JSFiddle - React, Tailwind, and code Playground

by nathansnider

HTML

<script src="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.js"></script>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.5/leaflet.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/perliedman/leaflet-routing-machine/master/dist/leaflet-routing-machine.css">
<script src="https://rawgit.com/perliedman/leaflet-routing-machine/master/examples/Control.Geocoder.js"></script>
<script src="https://rawgit.com/jacobtoye/Leaflet.iconlabel/master/dist/leaflet.iconlabel.js"></script>
<link rel="stylesheet" href="https://rawgit.com/jacobtoye/Leaflet.iconlabel/master/dist/leaflet.iconlabel.css">
<div id="map"></div>

CSS

html, body, #map {
    height: 100%;
    width:100%;
    padding:0px;
    margin:0px;
    background: white;
}

JavaScript

//Leaflet Routing Machine test 
//(imperial units still not working; need to wait for some changes to propagate on github).

var map = new L.Map('map').setView([34.2, -119], 10);

L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);


L.Routing.control({
	plan: L.Routing.plan([
		L.latLng(34.05, -118.25),
		L.latLng(34.42, -119.7)
	], {
		createMarker: function(i, wp) {
			return L.marker(wp.latLng, {
				draggable: true,
				icon: new L.Icon.Label.Default({ labelText: String.fromCharCode(65 + i) })
			});
		},
		geocoder: L.Control.Geocoder.nominatim(),
		routeWhileDragging: true
	}),
    //formatter: new L.Routing.Formatter({units: 'imperial'}),
    routeWhileDragging: true,
	routeDragTimeout: 250,
	showAlternatives: true,
	altLineOptions: {
		styles: [
			{color: 'black', opacity: 0.15, weight: 9},
			{color: 'white', opacity: 0.8, weight: 6},
			{color: 'blue', opacity: 0.5, weight: 2}
		]
	}
}).addTo(map);