JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.css" />
<script src="http://cdn.leafletjs.com/leaflet-0.4.4/leaflet.js"></script>
</head>
<body class="body">
    <div class="contents">
        <div id="actionBar" class="topBar">
            <div id="sidePaneControl" class="button">
                Side Pane
            </div>
        </div>
        <div class="details">
            <div id="map" class="map"></div>
        </div>
    </div>
</body>
</html>

CSS

.topBar {
    top: 0;
    left: 0;
    background-color: black;
    width: 100%;
    height: 40px;
    position: absolute;
}

.button {
    border-color: red;
    border-style: solid;
    width: 100px;
}

div.map {
    position:relative;
    width:100%;
    height:100%;
}

div.details {
    width:100%;
    display: block;
    top: 40px;
    left: 0;
    bottom: 0;
    position: absolute;
    color: black;
}

.body {
    width:100%;
    height:100%;
    background-color: yellow;
    display: block;
    position: absolute;
}

div.contents {
    position:relative;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    color: white;
    background-color: grey;
}

JavaScript

var esriWorldTopographicalUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer/tile/{z}/{y}/{x}',
    esriWorldTopographicalAttribution = 'Tiles &copy; Esri &mdash; Esri, DeLorme, NAVTEQ, TomTom, Intermap, iPC, USGS, FAO, NPS, NRCAN, GeoBase, Kadaster NL, Ordnance Survey, Esri Japan, METI, Esri China (Hong Kong), and the GIS User Community';

var esriWorldImageryUrl = 'http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}',
    esriWorldImageryAttribution = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';

var esriWorldImageryTileLayer = new L.TileLayer(esriWorldImageryUrl, {
    maxZoom: 18,
    attribution: esriWorldImageryAttribution,
    subdomains: ['1', '2', '3', '4']
});
var esriWorldTopographicalTileLayer = new L.TileLayer(esriWorldTopographicalUrl, {
    maxZoom: 18,
    attribution: esriWorldTopographicalAttribution,
    subdomains: ['1', '2', '3', '4']
});


var mapquestUrl = 'http://otile{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png';

var mapquestAttribution = "Data CC-By-SA by <a href='http://openstreetmap.org/' target='_blank'>OpenStreetMap</a>, Tiles Courtesy of <a href='http://open.mapquest.com' target='_blank'>MapQuest</a>";

var mapquest = new L.TileLayer(mapquestUrl, {
    maxZoom: 18,
    zIndex: 99,
    attribution: mapquestAttribution,
    subdomains: ['1', '2', '3', '4']
});

map = new L.Map('map', {
    center: new L.LatLng(51.505, -0.09),
    zoom: 13,
    layers: [mapquest, esriWorldImageryTileLayer, esriWorldTopographicalTileLayer],

    zoomControl: true
});

var layers = {
    "One": mapquest,
    "ESRI World Imagery": esriWorldImageryTileLayer,
    "ESRI World Topographical": esriWorldTopographicalTileLayer
};

L.control.layers(layers).addTo(map);
mapquest.bringToFront();


var points = new Array([-27.62531, 153.14351], [-27.61957, 153.15287], [-27.62499, 153.16169],...