JSFiddle - React, Tailwind, and code Playground

by kzima

HTML

<script src="//rawgit.com/turban/Leaflet.Photo/gh-pages/examples/lib/reqwest.min.js"></script>
<script src="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdn.jsdelivr.net/leaflet.esri/1.0.0/esri-leaflet.js"></script>
<script src="//rawgit.com/turban/Leaflet.Photo/gh-pages/examples/lib/cluster/leaflet.markercluster.js"></script>
<script src="//rawgit.com/turban/Leaflet.Photo/gh-pages/examples/lib/cluster/leaflet.markercluster-src.js"></script>
<script src="//rawgit.com/turban/Leaflet.Photo/gh-pages/Leaflet.Photo.js"></script>
<link rel="stylesheet" href="//rawgit.com/turban/Leaflet.Photo/gh-pages/Leaflet.Photo.css">
<link rel="stylesheet" href="//rawgit.com/turban/Leaflet.Photo/gh-pages/examples/lib/cluster/MarkerCluster.Default.css">
<link rel="stylesheet" href="//rawgit.com/turban/Leaflet.Photo/gh-pages/examples/lib/cluster/MarkerCluster.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/leaflet/0.7.3/leaflet.css">
<script src="//rawgit.com/jerroydmoore/leaflet-button/master/L.Control.Button.js"></script>
<script src="//rawgit.com/CliffCloud/Leaflet.EasyButton/master/src/easy-button.js"></script>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<div id="map">
  <!-- changing map style -->
  <div id="basemaps-wrapper" class="leaflet-bar">
    <select name="basemaps" id="basemaps">
    <option value="Topographic">Topographic</option>
      <option value="Streets">Streets</option>
      <option value="NationalGeographic">National Geographic</option>
      <option value="Oceans">Oceans</option>
      <option value="Gray">Gray</option>
      <option value="DarkGray">Dark Gray</option>
      <option value="Imagery">Imagery</option>
      <option value="ShadedRelief">Shaded Relief</option>
    </select>
  </div>
</div>

CSS

#map
{
  margin-bottom: 20px;
  height: 360px;
  margin-right: 20px;
}

    #basemaps-wrapper
    {
      position: absolute;
      top: 10px;
      right: 10px;
      z-index: 10;
      background: white;
      padding: 10px;
    }

    #basemaps
    {
      margin-bottom: 5px;
    }

JavaScript

var max_val_bounds =  L.latLngBounds( L.latLng(-90, 180), L.latLng(90, -180));
// initialize map
var map = L.map( 'map', {
  center: [50, 10],
  maxZoom: 18,
  minZoom: 2,
  maxBounds: max_val_bounds,
  zoom:5
})

var layer = L.esri.basemapLayer('Topographic').addTo(map);
var layerLabels;
// set up map type
function setBasemap(basemap)
{
  if (layer){ map.removeLayer(layer); }
  layer = L.esri.basemapLayer(basemap);
  map.addLayer(layer);
  if (layerLabels){ map.removeLayer(layerLabels);	}
  if (basemap === 'ShadedRelief' || basemap === 'Oceans' || 
      basemap === 'Gray' || basemap === 'DarkGray' || 
      basemap === 'Imagery' || basemap === 'Terrain')
  {
    layerLabels = L.esri.basemapLayer(basemap + 'Labels');
    map.addLayer(layerLabels);
  }
}

var basemaps = document.getElementById('basemaps');
basemaps.addEventListener('change', function()
                          {
  setBasemap(basemaps.value);
});

// INTERESTING PART
// setting up latitude, longitude
var decimal_lat = 50,
		decimal_lon = 10;

// creating polygon for this place
var polygon = L.polygon( [ 
		[parseFloat(decimal_lat), 			parseFloat(decimal_lon)], 
		[parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) - 1],						[parseFloat(decimal_lat) + 1, parseFloat(decimal_lon) + 1] ], 		
    {
				color:'green'
		});
polygon.addTo(map);

// creating marker for this place
var newMarker = L.marker([decimal_lat, decimal_lon]);
newMarker.addTo( map );

// slider to move polygon
var range_yaw = document.createElement("input");
range_yaw.setAttribute("type", "range");
range_yaw.min = "0";
range_yaw.max = "819";
range_yaw.step = "2.275";
range_yaw.defaultValue = 90;

// creating polyline for this place
var SIN = Math.sin((range_yaw.value/(819/360) - 90)*(Math.PI/180));
var COS = Math.cos((range_yaw.value/(819/360) - 90)*(Math.PI/180));
var pointA = new L.LatLng(parseFloat(decimal_lat),					
													parseFloat(decimal_lon));
var pointB = new L.LatLng(parseFloat(decimal_lat) + 2*COS,...