I have a feeling this is an obvious question, but it's stumping me and I'm not quite sure how to debug it. Probably just my javascript ignorance.
I'm using the leaflet utfgrid script from here: https://github.com/danzel/Leaflet.utfgrid
I'm mostly just following the example script, and I can't get the event handlers to work. At this point, I've got what I believe to be a very basic script. Here's the code - I'm looking to get the utfGrid.on('click') function to log to the console but it won't. I'd appreciate any help for feedback.
<head>
<meta charset="UTF-8">
<title>Leaflet Test</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="http://danzel.github.io/Leaflet.utfgrid/src/leaflet.utfgrid.js"></script>
<style>
#map{ width: auto; height: 800px; }
</style>
</head>
<body>
Map Data Test
<div id ="hover"></div>
<div id="map"></div>
<script>
// load a tile layer
var basemap = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', {attribution: 'CartoDB.', maxZoom: 18, minZoom: 2});
var cmamap = L.tileLayer('http://localhost:8080/tiles/{z}/{x}/{y}.png');
var utfGrid = new L.UtfGrid('http://localhost:8080/grid/{z}/{x}/{y}.json');
//event data
utfGrid.on('click', function (e) {
console.log('clicked');
});
//Create our map with just the base TileLayer
var map = L.map('map')
.setView([38, -94], 5)
.addLayer(basemap);
//Set up the base map and interactive stuff
var cmaLayers = L.layerGroup([
cmamap,
utfGrid
]).addTo(map);
</script>
</body>
So this looks like a version issue between the leaflet plugin and leaflet.utfgrid. When I use an old version of leaflet - it works.