Error: Cannot read property 'disableClickPropagation' of undefined

kcarrier commented 7 years ago

Here is my code, I am new to leaflet and trying to understand if I am not defining something correctly.

<!DOCTYPE html>
<html><head>

    <title>My First Leaflet</title>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Load Leaflet from CDN-->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet-src.js"></script>

  <!-- Load Esri Leaflet from CDN -->
  <script src="https://unpkg.com/esri-leaflet@2.0.8"></script>
    <style>
        #map {
            width: 600px;
            height: 400px;
        }
    </style>

    <style>body { padding: 0; margin: 0; } html, body, #map { height: 100vh; width: 100vw; }</style>
</head>
<body>

<!-- Include Leaflet.heat via rawgit.com
in production you'd be better off hosting this library yourself -->
<script src="https://rawgit.com/Leaflet/Leaflet.heat/gh-pages/dist/leaflet-heat.js"></script>
<!-- Load Heatmap Feature Layer from CDN -->
<script src="https://unpkg.com/esri-leaflet-heatmap@2.0.0"></script>
<!-- Esri Legend -->
<script src="https://unpkg.com/esri-leaflet-legend@2.0.0/dist/esri-leaflet-legend-compat-src.js"></script>
<!-- Load Esri Leaflet Renderers -->
<script src="//unpkg.com/esri-leaflet-renderers@2.0.4/dist/esri-leaflet-renderers-debug.js"></script>

<div id="map" 
     class="leaflet-container leaflet-touch leaflet-fade-anim leaflet-grab leaflet-touch-drag leaflet-touch-zoom" 
     tabindex="0" style="position: relative; outline: none;"/>

<script>
    var map = L.map('map');

    // new constructor syntax at 2.0.0
    var watermainbreaks = L.esri.Heat.featureLayer({
        url: 'http://maps4.hamilton-city.org/arcgis/rest/services/WaterMainBreaks/MapServer/0',
        radius: 60
    }).addTo(map);

    var sanitarylyrs = L.esri.dynamicMapLayer({
        url: "http://maps3.hamilton-city.org/arcgis/rest/services/FlexAppOperationalLayerSanitary15/MapServer"
    });

    var waterlyrs = L.esri.dynamicMapLayer({
        url: "http://maps2.hamilton-city.org/arcgis/rest/services/FlexAppOperationalLayerWater15/MapServer"
    });

    var aerial2016 = L.esri.tiledMapLayer({
        url: "http://maps1.hamilton-city.org/arcgis/rest/services/Aerial2016/MapServer",
        maxZoom: 21
    }).addTo(map);

    var baseLayers = {
      "Aerial 2016": aerial2016
    };

      var overlays = {
      "Water Main Breaks": watermainbreaks,
      "Water": waterlyrs,
      "Sanitary": sanitarylyrs
    };

    L.control.layers(baseLayers, overlays).addTo(map);
    L.esri.legendControl(waterlyrs).addTo(map);

    function onLocationFound(e) {
        var radius = e.accuracy / 2;

        //L.marker(e.latlng).addTo(map)
            //.bindPopup("You are within " + radius + " meters from this point").openPopup();

        //L.circle(e.latlng, radius).addTo(map);
    }

    function onLocationError(e) {
        alert(e.message);
    }

    //map.on('locationfound', onLocationFound);
    //map.on('locationerror', onLocationError);

    map.locate({setView: true});
</script>
**</body></html>**

jgravois commented 7 years ago

looks like this plugin isn't compatible with Leaflet v1.1.0 yet. in the meantime, i'd recommend downgrading to v1.0.3.

w8r commented 7 years ago

Exactly

w8r / esri-leaflet-legend

Error: Cannot read property 'disableClickPropagation' of undefined #5