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.

svelte

<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="grid h-8 w-20 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
  >
    <span> Drag me ! </span>
  </Marker>

  <Marker
    bind:lngLat={boundPos}
    draggable
    class="grid h-8 w-24 place-items-center rounded-full border border-gray-200 bg-red-300 text-black shadow-2xl focus:outline-2 focus:outline-black"
  >
    <span> 2-way Bound ! </span>
  </Marker>
</MapLibre>

Back to Examples

Github