w8r/esri-leaflet-legend

Error: Cannot read property 'disableClickPropagation' of undefined

Opened this issue · 2 comments

kcarrier commented

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

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

Exactly