Change marker icon and a pop-up message closes

Question

I'm using leaflet.awesome-markers card markers. When you change the color of the icon it immediately closes the pop-up message.

Is it possible to change the color without closing the pop-up?

$scope.$on('leafletDirectiveMarker.viewMap.click', function(e, args){
    $scope.selectedPoint = $scope.points.filter( function(spoint){ return spoint._id ===  args.modelName; })[0];
    $scope.waypoints[$scope.selectedPoint._id].icon.markerColor = 'green'; 
});

This can be observed even in the examples http://tombatossals.github.io/angular-leaflet-directive/examples/0000-viewer.html#/markers/icons-example — Алексей, Feb 11 '16 at 18:03
what if you do a e.preventDefault(); before $scope.selectedPoint? — kozer, Feb 11 '16 at 18:10
Also apply this decision ( e.preventDefault();) and to no avail . But the problem is not in this event - is not observed without changing the marker problems. — Алексей, Feb 12 '16 at 10:17

IvanSanchez · Answer 1 · 2016-02-12T18:22:26.277

1

Use L.Marker.setIcon() instead, and stop propagation of the event, preferably with L.DomEvent.stop() as it will stop propagation of click events from the marker to the map (through any L.LayerGroups, if any).

In plain Javascript (no angular) this would be:

marker.on('click', function(ev) {
    marker.setIcon(L.icon({ iconUrl: 'some-green-icon.png' }));
    // Also this.setIcon(...)

    L.DomEvent.stop(ev);    
});

edited Feb 12 '16 at 18:22

answered Feb 11 '16 at 19:06

IvanSanchez

18,272
3
30
45

Could you give an example? – Алексей Feb 12 '16 at 10:46
The problem is that the event is opening pop-up window appears before clicking on the marker, so that it does not solve the problem. Although the decision has found for itself. Later, I will share. – Алексей Feb 12 '16 at 21:23

score 0 · Answer 2 · answered Feb 14 '16 at 14:27

For myself, I solved the problem of the so - add and display pop-ups when necessary without using a standard mechanism angular (specified for a message marker). You can of course was immediately initialize the pop-up messages when loading data, but in my project it easier to implement on-demand.

//popup's store
$scope.popups = {};

$scope._setViewMarker = function(pId, showPopup){
var wp = $scope.waypoints;
wp[pId].icon.markerColor = 'red';

//set unselected markers color
for (var i in wp)
    if(i != pId){
        wp[i].icon.markerColor = 'blue';
    };  
// close other popups
for (var i in $scope.popups)
    if(i != pId)
        $scope.map.closePopup($scope.popups[i]);        
// show or create poupap
if(showPopup)
    if($scope.popups[pId] ){
        if(!$scope.popups[pId]._isOpen)
            $scope.map.openPopup($scope.popups[pId]);
    } else {
        var ind = $scope.points.map(function(e) { return e._id; }).indexOf(pId);   
        var c = angular.element('<popup point="points['+ind+']" note-click="showDetailPoint(points['+ind+'])"></popup>');
        var linkFn = $compile(c);
        var element = linkFn($scope);
        $scope.popups[pId] = L.popup({offset:[0, -30]}).setLatLng( [wp[pId].lat, wp[pId].lng] ).setContent(element[0]).openOn($scope.map);
        $scope.popups[pId].pointId = pId;
    };
};    
$scope.$on('leafletDirectiveMarker.viewMap.click', function(e, args){
    $scope._setViewMarker(args.modelName, true);
});

Change marker icon and a pop-up message closes

2 Answers2