Marker
Quick answer
L.marker places a draggable, interactive point symbol on the map with an icon, an optional popup and its own click and drag events. It is the default representation for point features and the usual anchor for user interaction. Options cover icons, opacity, zIndexOffset, keyboard focus and riseOnHover.
L.marker( latlng , options ) → Marker
Key points
- draggable true adds dragstart, drag and dragend events carrying the new position.
- zIndexOffset lifts a marker above neighbours without touching layer order.
- setIcon and setLatLng update the symbol without removing it from the map.
Example
var icon = L.divIcon({
className: '',
html: '<div style="width:14px;height:14px;border-radius:50%;background:#1f5fd0;border:2px solid #fff"></div>',
iconSize: [14, 14],
iconAnchor: [7, 7]
});
L.marker([39.9, 116.4], { icon: icon }).addTo(map);L.marker([39.907359, 116.391263])
.bindPopup('<b>天安门</b><br>39.907359, 116.391263')
.on('click', function (e) {
console.log(e.latlng);
})
.addTo(map);Notes
- Adding hundreds of markers individually is slow; group them and add the group once.
- A missing iconAnchor makes every pin appear slightly offset from its coordinate.
English edition written for Atlaslog. Code is taken from the original Chinese page and runs unchanged.
Atlaslog (2026). Marker. https://www.jingweizhi.com/en/leaflet/api/marker.html (accessed 2026-11-03).