JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="https://rawgit.com/dwilhelm89/LeafletSlider/master/SliderControl.js"></script>
<script src="http://www.brainsen.com/floorplan.js"></script>
<body>
<div>
<div id="map"></div>
</div>
</body>
CSS
#map {
width: 100%;
height: 300px;
}
.info {
padding: 6px 8px;
font: 14px/16px Arial, Helvetica, sans-serif;
background: white;
background: rgba(255,255,255,0.8);
box-shadow: 0 0 15px rgba(0,0,0,0.2);
border-radius: 5px;
}
.info h4 {
margin: 0 0 5px;
color: #777;
}
.legend {
text-align: left;
line-height: 18px;
color: #555;
}
.legend i {
width: 18px;
height: 18px;
float: left;
margin-right: 8px;
opacity: 0.7;
}
JavaScript
var mktGeoJson;
var sl;
var map;
$(document).ready(function () {
mktGeoJson = L.geoJson(geoJson).addTo(map);
});
L.CRS.Meters = L.extend(L.CRS, {
projection: {
// copied from the latlng class
project: function (latlng) {
return new L.Point(latlng.lng, latlng.lat);
},
unproject: function (point) {
return new L.LatLng(point.y, point.x);
},
// perimiter size 1km
bounds: L.bounds([-500, -500], [500, 500])
},
transformation: new L.Transformation(1, 0, -1, 0),
scale: function (zoom) {
return Math.pow(2, zoom);
},
distance: function (latlng1, latlng2) {
var dx = latlng2.lng - latlng1.lng,
dy = latlng2.lat - latlng1.lat;
return Math.sqrt(dx * dx + dy * dy);
},
infinite: false
});
/*
* this could potentionally be fixed in the future,
* but for now we need to extend the Scale Control
*/
L.Control.ScaleMeters = L.Control.Scale.extend({
_update: function () {
var map = this._map,
y = map.getSize().y / 2;
var maxMeters = L.CRS.Meters.distance(
map.containerPointToLatLng([0, y]),
map.containerPointToLatLng([this.options.maxWidth, y]));
this._updateScales(maxMeters);
}
});
map = new L.Map('map', { center: new L.LatLng(0, 0), worldCopyJump: false, crs: L.CRS.Meters });