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

//Passage GPX test
//
// set center coordinates
var centerlat = 34.05;
var centerlon = -118.25;

// set default zoom level
var zoomLevel = 10;

// initialize map
var map = L.map('map').setView([centerlat, centerlon], zoomLevel);

// set source for map tiles (in this case one of Mapbox's minimal example maps)
MB_ATTR = '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>, ' +
    'Imagery © <a href="http://mapbox.com">Mapbox</a>';
MB_URL = 'http://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png';

// add tiles to map
L.tileLayer(MB_URL, {
    attribution: MB_ATTR,
    id: 'examples.map-szwdot65'
}).addTo(map);

//var el = L.control.elevation();
//el.addTo(map);

var g = new L.GPX("https://dl.dropbox.com/s/2076opmwg52stlb/p100.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);