Load Images from URLs

Utility for loading images from URLs

<script lang="ts">
  import { MapLibre, ImageLoader, GeoJSONSource, SymbolLayer } from 'svelte-maplibre-gl';
  import type { FeatureCollection } from 'geojson';

  let data: FeatureCollection = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-48.47279, -1.44585] },
        properties: { imageName: 'osgeo', year: 2024 }
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [0, 0] },
        properties: { imageName: 'cat', scale: 0.2 }
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [40, -30] },
        properties: { imageName: 'popup-debug', name: 'Line 1\nLine 2\nLine 3' }
      },
      {
        type: 'Feature',
        geometry: { type: 'Point', coordinates: [-40, -30] },
        properties: { imageName: 'popup-debug', name: 'One longer line' }
      }
    ]
  };
</script>

<MapLibre
  class="h-[55vh] min-h-[300px]"
  style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
  zoom={1.5}
  center={{ lng: -10.0, lat: -20 }}
>
  <GeoJSONSource {data}>
    <ImageLoader
      images={{
        osgeo: 'https://maplibre.org/maplibre-gl-js/docs/assets/osgeo-logo.png',
        cat: 'https://upload.wikimedia.org/wikipedia/commons/7/7c/201408_cat.png',
        'popup-debug': [
          'https://maplibre.org/maplibre-gl-js/docs/assets/popup_debug.png',
          {
            // stretchable image
            stretchX: [
              [25, 55],
              [85, 115]
            ],
            stretchY: [[25, 100]],
            content: [25, 25, 115, 100],
            pixelRatio: 2
          }
        ]
      }}
    >
      <!-- Children components will be added after all images have been loaded -->
      <SymbolLayer
        layout={{
          'text-field': ['get', 'name'],
          'icon-image': ['get', 'imageName'],
          'icon-size': ['number', ['get', 'scale'], 1],
          'icon-text-fit': 'both',
          'icon-overlap': 'always',
          'text-overlap': 'always'
        }}
      />
    </ImageLoader>
  </GeoJSONSource>
</MapLibre>