CODEWITHSUNDEEP
angularjsleafletangular-leaflet-directive
Karthik Prasad
Karthik Prasad

Reputation: 10024

Angular Leaflet Directive Not updating marker position

I'm trying to use angular-leaflet-directive with Websocket, though I'm able to integrate successfully, the positions of the markers are not getting updated dynamically. However The positions of map gets updated if I move mouse over the map but doesn't get updated when the lat-lng value changes.

Below is code snippet of module.

    $scope.markers = {};
    angular.extend($scope, {
        bounds : $scope.bounds,
        center : {},
        kppaths : {},
        events: {
            markers:{
              enable: [ 'move' ]
            }
        }
    });


    $stomp.setDebug(function(args) {
        $log.info(args);
    });

    $scope.startWS = function() {

            var connectionHeaders = {};
            // Connect
            $stomp.connect("/kp-ws").then(function(frame){
            $log.info("connected to server")
            $stomp.send('/app/start', {});
            // Subscribe for message
            $scope.subscription = $stomp.subscribe('/topic/kp', function(
                    data, headers, res) {
                angular.forEach(data, function(k,v){
                    $scope.markers[k.markerId].lat = k.lat;
                    $scope.markers[k.markerId].lng = k.lng;
                });
            });
            });

    };

    $scope.stopWS = function() {
        $stomp.send('/app/stop', {});
        $scope.subscription.unsubscribe();
        $stomp.disconnect();
    };

    $scope.$on("leafletDirectiveMarker.move", function(event, args){
       $log.info(args.model.lat);
    });

} ]);

The html file

<div class="card-block">
            <leaflet bounds="bounds" geojson="geojson" lf-center="center"
                paths="kppaths" markers="markers" event-broadcast="events" width="100%" height="480px"></leaflet>
</div>

Is I'm missing something, Please let me know or suggest how to fix this issue?

Upvotes: 2

Views: 770

Answers (1)

Angel Todorov
Angel Todorov

Reputation: 1533

The possible workaround I found is:

leafletData.getMap().then(function (map) {
   $timeout(function() {map.invalidateSize()});
});

basically, once the map is invalidated, it updates markers' position. Although not perfect, considering some performance issues, the workaround at least solves the main issue.

Upvotes: 0

Related Questions