leafletDirectiveMarker.click not working with Dynamic markers

[goclixy-core]

First of all, Thank you so much for this wonderful work!!!

I want to display the Map on a button click, but the click event does not work. Zoom In and Zoom Out (+ & -) buttons are also not working.

However, the drag and dblclick events are working fine.

If I display the map on controller's load without button click, everything works well.

Could you please help me with this issue?

The controller code is as follow:

.controller('ViewMap', function($scope) { $scope.map = false; $scope.viewMap = function() { $scope.map = true; angular.extend($scope, { mapCenter: { lat: 40.095, lng: -3.823, zoom: 6 }, defaults: { scrollWheelZoom: false }, markers: { ABC: { lat: 40.095, lng: -3.823, message: "This is Madrid. But you can drag me to another position", focus: true, draggable: true } }, layers: { baselayers: { osm: { name: 'OpenStreetMap', url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', type: 'xyz' } } }, events: { map: { enable: ['zoomstart', 'contextmenu', 'drag', 'click', 'mousemove', 'popupopen'], logic: 'broadcast' } } });

    $scope.$on('leafletDirectiveMarker.click', function(event){
        alert('Message');
    });
}

}) VIEW FILE:

View Map

<div ng-if="map">
    <leaflet default="defaults" center="mapCenter" markers="markers" class="leafletMap" layers="layers" events="events" style="height: 350px;"></leaflet>
</div>

CONSOLE LOG: leafletDirectiveMap.mouseup leafletDirectiveMarker.mousedown leafletDirectiveMap.mouseup leafletDirectiveMarker.dblclick leafletDirectiveMarker.mousedown leafletDirectiveMap.mouseup leafletDirectiveMarker.mousedown leafletDirectiveMap.mousemove leafletDirectiveMarker.dragstart leafletDirectiveMarker.drag

[lungare]

I think this was resolved by someone earlier but here it goes.

1. Add an id to your leaflet tag, for example "drawingMap"

 <leaflet 
            data-tap-disabled="true" 
            id="drawingMap" 
            lf-center="center"
            defaults="defaults" 
            layers="layers" 
            ng-if="map"
            width="100%">          
        </leaflet>

1. Now you can access it using below syntax

 $scope.$on('leafletDirectiveMarker.drawingMap.click', function(event, locationEvent) {
alert('Message');
});

[jewelcai]

Hi, Have you solved this problem? I have encountered the same issue on iOS emulator, but not on web browser, could you please share the solution if possible?

Thank you.

[lungare]

Yes. The solution I gave above works for me on ios. I havent tested on ios emulator though.

1. Add id to the leaflet directive
2. use the id in the event binding as shown above "leafletDirectiveMarker..click"

In my case the leaflet id is "drawingMap" hence the binding string becomes 'leafletDirectiveMarker.drawingMap.click'

[jewelcai]

would you please tell me what version of code are you using? including leaflet and angular leaflet directive. Thank you.

[goclixy-core]

Thank You, adding ID and data-tap-disabled="true" to the leaflet tag worked for me.