angular-leaflet-directive
angular-leaflet-directive copied to clipboard
Marker click event stops working when Map ID is assigned
Hello!
I've implemented some functionality for when the markers in the map are clicked. All worked fine until I had to get the map object, so I added an ID to my map. The click events won't trigger anymore :( am I missing something? Thanks in advance.
My code looks like this:
<!-- Map -->
<leaflet id="citymap" class="leaflet-map" event-broadcast="events"
layers="mapbox.layers"
lf-center="mapbox.center"
markers="markers"
defaults="mapbox.defaults"
maxbounds="mapbox.maxbounds"></leaflet>
'use strict';
angular.module('club', ['leaflet-directive'])
.controller('clubCtrl', function ($scope, leafletData, leafletMarkerEvents) {
// Get current map zoom
var getCurrentMapZoom = function() {
leafletData.getMap('citymap').then(function(map) {
console.log(map.zoom);
});
};
// Event listener when markers get clicked
$scope.$on('leafletDirectiveMarker.click', function (event, args) {
// console.log("Marker clicked");
getCurrentMapZoom();
});
});
Found the issue (for someone stumbling upon the same case):
The click event needs to reference the current map id, instead of:
$scope.$on('leafletDirectiveMarker.click', function (event, args) { ... }
use the following:
$scope.$on('leafletDirectiveMarker.citymap.click', function (event, args) { ... }
Note the .citymap (ID of the map clicked)
Looks like as breaking change! Example in "events" section on exaples page doesn't work too old way) All events in my app stop working after update to new version, thank you, teknotica, i fixed it with adding map id after leafletDirectiveMarker, leafletDirectiveMap etc. It should be mentioned in docs..
@DDroll I was smashing my head on keyboard! Thanks!