Image Source

svelte
<MapLibre
  style="https://basemaps.cartocdn.com/gl/positron-gl-style/style.json"
  class={mapClasses}
  standardControls
>
  <ImageSource
    url={quakeImageUrl}
    coordinates={[
      [topLeft.lng, topLeft.lat],
      [bottomRight.lng, topLeft.lat],
      [bottomRight.lng, bottomRight.lat],
      [topLeft.lng, bottomRight.lat],
    ]}
  >
    <RasterLayer
      paint={{
        'raster-fade-duration': 0,
        'raster-opacity': opacity / 100.0,
      }}
    />
  </ImageSource>
  <Marker bind:lngLat={topLeft} draggable>
    <span class="dot" />
  </Marker>
  <Marker bind:lngLat={bottomRight} draggable>
    <span class="dot" />
  </Marker>
</MapLibre>

Back to Examples

Github