Center leaflet marker after moving map

Question

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'
        }
    });

Vadim Gremyachev · Accepted Answer · 2020-04-08T06:21:07.140

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

João Pimentel Ferreira · Answer 2 · 2023-05-07T23:13:21.283

You can use an event on the marker after it is moved, and another even on the map to set the marker at the center of the map every time the map is moved. Check it out:

const lat = 38.736946
const lon = -9.142685

var map = L.map('mapid').setView([lat, lon], 10)

// add the OpenStreetMap tiles
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
  { subdomains: ['a', 'b', 'c'] })
  .addTo(map)
  
var marker = L.marker([lat, lon],{
  draggable: true,
  autoPan: true
}).addTo(map);
  
map.on("moveend", function () {
  marker.setLatLng(map.getCenter())
})

.map { 
  height: 280px; 
  z-index: 1;
}

.map-container {
  position: relative;
  width: 300px;
  height: 300px;
}

<link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css"/>
<script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script> 
 
<div class="map-container">
  <div class="map-marker-centered"></div>
  <div id="mapid" class="map"></div>
</div>

Center leaflet marker after moving map

2 Answers2