JSFiddle - React, Tailwind, and code Playground

by Alex Azuero

HTML

<link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css">
<!-- Load Leaflet from CDN-->
<script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
<!-- Load Esri Leaflet from CDN -->
 <script src="http://cdn-geoweb.s3.amazonaws.com/esri-leaflet/1.0.0-rc.2/esri-leaflet.js"></script>
<a id="btn-toggle">addLayer</a>
<div id="map"></div>

CSS

body {margin:0;padding:0;}
    #map {position: absolute;top:25px;bottom:0;right:0;left:0;}

#btn-toggle{ cursor: pointer; padding:5px; background-color:#bbb;}

JavaScript

var map = L.map('map').setView([34.025, -116.203], 9);
var layer =      L.esri.dynamicMapLayer('http://maps1.arcgisonline.com/ArcGIS/rest/services/USA_Federal_Lands/MapServer', {
    opacity: 0.5
});

L.esri.basemapLayer('Gray').addTo(map);

// super quick add and remove to illustrate bug.
// even tough the layer has been removed you will still see the
// image tile from the layer on the map.
map.addLayer(layer);
map.removeLayer(layer);



//Can manually toggle if you want. toggle quickly to see bug:
var toggleState = true;
$('#btn-toggle').click(function(){
    //alert('click');
    if(toggleState){        
        map.addLayer(layer);
        $('#btn-toggle').text('removeLayer');
    } else {
        map.removeLayer(layer);
        $('#btn-toggle').text('addLayer');
    }
    toggleState = !toggleState;
});