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/MrMufflon/Leaflet.Elevation/master/dist/leaflet.elevation-0.0.4.min.js"></script>
<link rel="stylesheet" href="https://rawgit.com/MrMufflon/Leaflet.Elevation/master/dist/leaflet.elevation-0.0.4.css">
<script src="https://rawgithub.com/mpetazzoni/leaflet-gpx/master/gpx.js"></script>
<script src="https://rawgit.com/mbostock/d3/master/d3.min.js"></script>
<div id="map"></div>

CSS

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

JavaScript

var map = new L.Map('map');

var url = 'http://otile{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.jpeg',
    attr = 'Tiles Courtesy of <a href="http://www.mapquest.com/">MapQuest</a> &mdash; Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>',
    service = new L.TileLayer(url, {
        subdomains: "1234",
        attribution: attr
    });

var el = L.control.elevation();
el.addTo(map);
var g = new L.GPX("http://mrmufflon.github.io/Leaflet.Elevation/example/demo.gpx", {
    async: true,
    marker_options: {
        startIconUrl: 'http://mrmufflon.github.io/Leaflet.Elevation/example/lib/leaflet-gpx/pin-icon-start.png',
        endIconUrl: 'http://mrmufflon.github.io/Leaflet.Elevation/example/lib/leaflet-gpx/pin-icon-end.png',
        shadowUrl: 'http://mrmufflon.github.io/Leaflet.Elevation/example/lib/leaflet-gpx/pin-shadow.png'
    }
});
g.on('loaded', function (e) {
    map.fitBounds(e.target.getBounds());
});
g.on("addline", function (e) {
    el.addData(e.line);
});
g.addTo(map);
map.addLayer(service);