Custom draggable Marker
- Position from drag events: [-122.2993,47.4464]
- Position from
bind:latLng
: {"lng":-10,"lat":-20}
Bound props can use either { lng, lat }
objects or GeoJSON Location
[lng, lat]
arrays.
<MapLibre
style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
class={mapClasses}
standardControls
zoom={1}
center={[-20, 0]}
>
<Marker
lngLat={[-122.2993, 47.4464]}
draggable
on:drag={handleDrag}
class="border-gray-200 border shadow-2xl focus:outline-2 focus:outline-black w-20 h-8 bg-red-300 text-black rounded-full grid place-items-center"
>
<span> Drag me ! </span>
</Marker>
<Marker
bind:lngLat={boundPos}
draggable
class="border-gray-200 border shadow-2xl focus:outline-2 focus:outline-black w-24 h-8 bg-red-300 text-black rounded-full grid place-items-center"
>
<span> 2-way Bound ! </span>
</Marker>
</MapLibre>