Search code examples
leafletangular-leaflet-directive

Center leaflet marker after moving map


I have been trying to add a logic where by when you start dragging the map around the marker will stay in the center of the map and then return the lat and lng of the new position. Please see the Plunker of what I have done thanks Plunker

var location = {lat: -33.8830, lng: 151.2166};

var mainMarker = {
            lat: location.lat,
            lng: location.lng,
            focus: true,
            draggable: false
    };

  var vm = angular.extend(this, {
        center: {
            lat: location.lat,
            lng: location.lng,
            zoom: 17
        },
        markers: {
            mainMarker: angular.copy(mainMarker)
        },
        defaults: {
            zoomControl: false
        },
        tiles: {
            url: 'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'
        }
    });

Solution

  • The marker position could be updated (centered on the map) when map moves like this:

    $scope.$on('leafletDirectiveMap.drag', function(event,args){  
           //get the Leaflet map from the triggered event.
           var map = args.leafletEvent.target;
           var center = map.getCenter();  //get map center
    
           //update(recenter) marker
           $scope.vm.markers.mainMarker.lat = center.lat;
           $scope.vm.markers.mainMarker.lng = center.lng;
    });
    

    Updated plunker