@reuters-graphics/graphics-components 3.1.0 → 3.2.0

package/dist/components/TileMap/TileMap.svelte

@@ -0,0 +1,199 @@
+<!-- @component `Map` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-map--docs) -->
+<script lang="ts" module>
+  import { Protocol } from 'pmtiles';
+  import maplibregl from 'maplibre-gl';
+
+  // Track if PMTiles protocol has been registered (only do this once per page)
+  let pmtilesProtocolRegistered = false;
+
+  function ensurePMTilesProtocol() {
+    if (!pmtilesProtocolRegistered) {
+      const protocol = new Protocol();
+      maplibregl.addProtocol('pmtiles', protocol.tile);
+      pmtilesProtocolRegistered = true;
+    }
+  }
+</script>
+
+<script lang="ts">
+  import { onMount, onDestroy, setContext, type Snippet } from 'svelte';
+  import { writable } from 'svelte/store';
+  import GraphicBlock from '../GraphicBlock/GraphicBlock.svelte';
+  import type { ContainerWidth } from '../@types/global';
+  import type { ProjectionSpecification } from 'maplibre-gl';
+  import 'maplibre-gl/dist/maplibre-gl.css';
+
+  interface Props {
+    /** Title of the map as a string or a custom snippet. */
+    title?: string | Snippet;
+    /** Description of the map, passed in as a markdown string. */
+    description?: string;
+    /**
+     * Notes to the map, passed in as a markdown string or a custom snippet.
+     */
+    notes?: string | Snippet;
+    /**
+     * Map container id
+     */
+    id?: string;
+    /**
+     * Map center coordinates [longitude, latitude]
+     */
+    center?: [number, number];
+    /**
+     * Initial zoom level
+     */
+    zoom?: number;
+    /**
+     * Minimum zoom level
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level
+     */
+    maxZoom?: number;
+    /**
+     * Map projection. Use 'globe' for 3D globe view.
+     * See https://maplibre.org/maplibre-style-spec/types/#projectiondefinition
+     */
+    projection?: ProjectionSpecification;
+    /**
+     * Enable interactive controls (zoom, pan, etc.)
+     */
+    interactive?: boolean;
+    /**
+     * Map style URL
+     */
+    styleUrl?: string;
+    /**
+     * Map height (default: '500px')
+     */
+    height?: string;
+    /** Width of the map within the text well. */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example,
+     * "normal" to keep the title, description and notes inline with the rest
+     * of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /** Callback function that receives the map instance when ready */
+    onMapReady?: (map: maplibregl.Map) => void;
+    /** Child components (e.g., TileMapLayer) */
+    children?: Snippet;
+  }
+
+  let {
+    title,
+    description,
+    notes,
+    id = `map-${Math.random().toString(36).substring(2, 9)}`,
+    center = [0, 0],
+    zoom = 2,
+    minZoom = 0,
+    maxZoom = 22,
+    projection,
+    interactive = true,
+    styleUrl = 'https://graphics.thomsonreuters.com/reuters-protomaps/style.json',
+    height = '500px',
+    width = 'normal',
+    textWidth = 'normal',
+    onMapReady,
+    children,
+  }: Props = $props();
+
+  let mapContainer: HTMLDivElement;
+  let map: maplibregl.Map | null = null;
+
+  // Create a writable store for the map instance
+  const mapStore = writable<maplibregl.Map | null>(null);
+
+  // Set context with the store immediately (not in onMount)
+  setContext('map', mapStore);
+
+  onMount(() => {
+    if (typeof window !== 'undefined' && mapContainer) {
+      // Set up PMTiles protocol (only once per page)
+      ensurePMTilesProtocol();
+
+      // Set the map options
+      const mapOptions: maplibregl.MapOptions = {
+        container: mapContainer,
+        style: styleUrl,
+        center,
+        zoom,
+        minZoom,
+        maxZoom,
+        attributionControl: false,
+        scrollZoom: false, // Always disabled for consistency
+        doubleClickZoom: interactive,
+        dragPan: interactive,
+        touchPitch: false, // Disabled to prevent unwanted tilting
+        touchZoomRotate: interactive,
+        boxZoom: interactive,
+        keyboard: interactive,
+      };
+
+      const mapInstance = new maplibregl.Map(mapOptions);
+
+      map = mapInstance;
+
+      // Update the store with the map instance
+      mapStore.set(mapInstance);
+
+      // Initialize controls only if interactive
+      if (interactive) {
+        map.addControl(
+          new maplibregl.NavigationControl({ showCompass: false })
+        );
+      }
+
+      // Call the callback when map is ready
+      map.on('load', () => {
+        if (!map) return;
+
+        // Set projection after map loads if specified
+        if (projection) {
+          map.setProjection(projection);
+        }
+
+        if (onMapReady) {
+          onMapReady(map);
+        }
+      });
+    }
+  });
+
+  onDestroy(() => {
+    if (map) {
+      map.remove();
+      map = null;
+      mapStore.set(null);
+    }
+  });
+</script>
+
+<GraphicBlock {width} {textWidth} {title} {description} {notes}>
+  <div class="map" {id}>
+    <div
+      bind:this={mapContainer}
+      class="map-container"
+      style="height: {height}"
+    ></div>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+</GraphicBlock>
+
+<style>
+  .map {
+    width: 100%;
+    position: relative;
+  }
+
+  .map-container {
+    width: 100%;
+    position: relative;
+  }
+</style>

package/dist/components/TileMap/TileMap.svelte.d.ts

@@ -0,0 +1,68 @@
+import maplibregl from 'maplibre-gl';
+import { type Snippet } from 'svelte';
+import type { ContainerWidth } from '../@types/global';
+import type { ProjectionSpecification } from 'maplibre-gl';
+import 'maplibre-gl/dist/maplibre-gl.css';
+interface Props {
+    /** Title of the map as a string or a custom snippet. */
+    title?: string | Snippet;
+    /** Description of the map, passed in as a markdown string. */
+    description?: string;
+    /**
+     * Notes to the map, passed in as a markdown string or a custom snippet.
+     */
+    notes?: string | Snippet;
+    /**
+     * Map container id
+     */
+    id?: string;
+    /**
+     * Map center coordinates [longitude, latitude]
+     */
+    center?: [number, number];
+    /**
+     * Initial zoom level
+     */
+    zoom?: number;
+    /**
+     * Minimum zoom level
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level
+     */
+    maxZoom?: number;
+    /**
+     * Map projection. Use 'globe' for 3D globe view.
+     * See https://maplibre.org/maplibre-style-spec/types/#projectiondefinition
+     */
+    projection?: ProjectionSpecification;
+    /**
+     * Enable interactive controls (zoom, pan, etc.)
+     */
+    interactive?: boolean;
+    /**
+     * Map style URL
+     */
+    styleUrl?: string;
+    /**
+     * Map height (default: '500px')
+     */
+    height?: string;
+    /** Width of the map within the text well. */
+    width?: ContainerWidth;
+    /**
+     * Set a different width for the text within the text well, for example,
+     * "normal" to keep the title, description and notes inline with the rest
+     * of the text well. Can't ever be wider than `width`.
+     */
+    textWidth?: ContainerWidth;
+    /** Callback function that receives the map instance when ready */
+    onMapReady?: (map: maplibregl.Map) => void;
+    /** Child components (e.g., TileMapLayer) */
+    children?: Snippet;
+}
+/** `Map` [Read the docs.](https://reuters-graphics.github.io/graphics-components/?path=/docs/components-graphics-map--docs) */
+declare const TileMap: import("svelte").Component<Props, {}, "">;
+type TileMap = ReturnType<typeof TileMap>;
+export default TileMap;

package/dist/components/TileMap/TileMapLayer.svelte

@@ -0,0 +1,211 @@
+<!-- @component `TileMapLayer` - Add GeoJSON layers to a TileMap component -->
+<script lang="ts">
+  import { getContext, onMount } from 'svelte';
+  import type { Map as MaplibreMap, GeoJSONSource } from 'maplibre-gl';
+  import type { Writable } from 'svelte/store';
+  import type { GeoJSON } from 'geojson';
+
+  interface Props {
+    /**
+     * Unique ID for this layer
+     */
+    id: string;
+    /**
+     * GeoJSON data to display (FeatureCollection, Feature, Geometry, or URL string to fetch from)
+     */
+    data: GeoJSON | string;
+    /**
+     * Layer type: 'fill', 'line', 'circle', 'symbol', etc.
+     */
+    type?:
+      | 'fill'
+      | 'line'
+      | 'circle'
+      | 'symbol'
+      | 'fill-extrusion'
+      | 'raster'
+      | 'background'
+      | 'heatmap'
+      | 'hillshade';
+    /**
+     * Paint properties for the layer
+     */
+    paint?: Record<string, unknown>;
+    /**
+     * Layout properties for the layer
+     */
+    layout?: Record<string, unknown>;
+    /**
+     * Layer to insert before (for layer ordering)
+     */
+    beforeId?: string;
+    /**
+     * Minimum zoom level to display layer
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level to display layer
+     */
+    maxZoom?: number;
+    /**
+     * Filter expression for the layer
+     */
+    filter?: unknown[];
+  }
+
+  let {
+    id,
+    data,
+    type = 'fill',
+    paint = {},
+    layout = {},
+    beforeId,
+    minZoom,
+    maxZoom,
+    filter,
+  }: Props = $props();
+
+  const mapStore = getContext<Writable<MaplibreMap | null>>('map');
+
+  if (!mapStore) {
+    throw new Error('TileMapLayer must be used inside a TileMap component');
+  }
+
+  const sourceId = `${id}-source`;
+  let isInitialized = $state(false);
+  let fetchedData = $state<GeoJSON | null>(null);
+  let isLoading = $state(false);
+
+  // Fetch GeoJSON if data is a URL string
+  $effect(() => {
+    if (
+      typeof data === 'string' &&
+      (data.startsWith('http://') || data.startsWith('https://'))
+    ) {
+      isLoading = true;
+      fetchedData = null; // Reset while fetching
+      fetch(data)
+        .then((response) => {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch GeoJSON: ${response.statusText}`);
+          }
+          return response.json();
+        })
+        .then((json) => {
+          fetchedData = json;
+          isLoading = false;
+        })
+        .catch((error) => {
+          console.error(`Error fetching GeoJSON from ${data}:`, error);
+          isLoading = false;
+        });
+    } else {
+      fetchedData = null;
+      isLoading = false;
+    }
+  });
+
+  // Get the actual data to use (fetched or passed directly)
+  // Only use data directly if it's not a URL string
+  const isUrlString = $derived(
+    typeof data === 'string' &&
+      (data.startsWith('http://') || data.startsWith('https://'))
+  );
+  const actualData = $derived(fetchedData || (isUrlString ? null : data));
+
+  // Subscribe to map store and initialize when map is available
+  $effect(() => {
+    const map = $mapStore;
+    const currentData = actualData; // Track actualData explicitly
+    const loading = isLoading; // Track isLoading explicitly
+
+    if (!map || isInitialized || loading || !currentData) return;
+
+    const initializeLayer = () => {
+      if (isInitialized) return;
+
+      // Add source
+      if (!map.getSource(sourceId)) {
+        map.addSource(sourceId, {
+          type: 'geojson',
+          data: currentData,
+        });
+      }
+
+      // Add layer
+      if (!map.getLayer(id)) {
+        const layerConfig: Record<string, unknown> = {
+          id,
+          type,
+          source: sourceId,
+          paint,
+          layout,
+        };
+
+        if (minZoom !== undefined) layerConfig.minzoom = minZoom;
+        if (maxZoom !== undefined) layerConfig.maxzoom = maxZoom;
+        if (filter) layerConfig.filter = filter;
+
+        map.addLayer(layerConfig as never, beforeId);
+      }
+
+      isInitialized = true;
+    };
+
+    // Wait for map to be loaded
+    if (!map.loaded()) {
+      map.once('load', initializeLayer);
+    } else {
+      initializeLayer();
+    }
+  });
+
+  // Update data reactively
+  $effect(() => {
+    const map = $mapStore;
+    const currentData = actualData; // Track actualData explicitly
+    const loading = isLoading; // Track isLoading explicitly
+
+    if (!map || !isInitialized || loading || !currentData) return;
+
+    const source = map.getSource(sourceId);
+    if (source && (source as GeoJSONSource).setData) {
+      (source as GeoJSONSource).setData(currentData);
+    }
+  });
+
+  // Update paint properties reactively
+  $effect(() => {
+    const map = $mapStore;
+    if (!map || !isInitialized || !paint) return;
+
+    Object.entries(paint).forEach(([property, value]) => {
+      map.setPaintProperty(id, property, value);
+    });
+  });
+
+  // Update layout properties reactively
+  $effect(() => {
+    const map = $mapStore;
+    if (!map || !isInitialized || !layout) return;
+
+    Object.entries(layout).forEach(([property, value]) => {
+      map.setLayoutProperty(id, property, value);
+    });
+  });
+
+  // Cleanup
+  onMount(() => {
+    return () => {
+      const map = $mapStore;
+      if (map && isInitialized) {
+        if (map.getLayer(id)) {
+          map.removeLayer(id);
+        }
+        if (map.getSource(sourceId)) {
+          map.removeSource(sourceId);
+        }
+      }
+    };
+  });
+</script>

package/dist/components/TileMap/TileMapLayer.svelte.d.ts

@@ -0,0 +1,43 @@
+import type { GeoJSON } from 'geojson';
+interface Props {
+    /**
+     * Unique ID for this layer
+     */
+    id: string;
+    /**
+     * GeoJSON data to display (FeatureCollection, Feature, Geometry, or URL string to fetch from)
+     */
+    data: GeoJSON | string;
+    /**
+     * Layer type: 'fill', 'line', 'circle', 'symbol', etc.
+     */
+    type?: 'fill' | 'line' | 'circle' | 'symbol' | 'fill-extrusion' | 'raster' | 'background' | 'heatmap' | 'hillshade';
+    /**
+     * Paint properties for the layer
+     */
+    paint?: Record<string, unknown>;
+    /**
+     * Layout properties for the layer
+     */
+    layout?: Record<string, unknown>;
+    /**
+     * Layer to insert before (for layer ordering)
+     */
+    beforeId?: string;
+    /**
+     * Minimum zoom level to display layer
+     */
+    minZoom?: number;
+    /**
+     * Maximum zoom level to display layer
+     */
+    maxZoom?: number;
+    /**
+     * Filter expression for the layer
+     */
+    filter?: unknown[];
+}
+/** `TileMapLayer` - Add GeoJSON layers to a TileMap component */
+declare const TileMapLayer: import("svelte").Component<Props, {}, "">;
+type TileMapLayer = ReturnType<typeof TileMapLayer>;
+export default TileMapLayer;

package/dist/index.d.ts

@@ -22,6 +22,8 @@ export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
+export { default as TileMap } from './components/TileMap/TileMap.svelte';
+export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';

package/dist/index.js

@@ -25,6 +25,8 @@ export { default as EndNotes } from './components/EndNotes/EndNotes.svelte';
 export { default as InfoBox } from './components/InfoBox/InfoBox.svelte';
 export { default as InlineAd } from './components/AdSlot/InlineAd.svelte';
 export { default as LeaderboardAd } from './components/AdSlot/LeaderboardAd.svelte';
+export { default as TileMap } from './components/TileMap/TileMap.svelte';
+export { default as TileMapLayer } from './components/TileMap/TileMapLayer.svelte';
 export { default as PaddingReset } from './components/PaddingReset/PaddingReset.svelte';
 export { default as PhotoPack } from './components/PhotoPack/PhotoPack.svelte';
 export { default as PymChild } from './components/PymChild/PymChild.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@reuters-graphics/graphics-components",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "private": false,
   "homepage": "https://reuters-graphics.github.io/graphics-components",
@@ -96,10 +96,13 @@
     "@lottiefiles/dotlottie-web": "^0.52.2",
     "@reuters-graphics/svelte-markdown": "^0.0.3",
     "@sveltejs/kit": "^2.0.0",
+    "@types/geojson": "^7946.0.16",
     "dayjs": "^1.11.13",
     "es-toolkit": "^1.35.0",
     "journalize": "^2.6.0",
+    "maplibre-gl": "^5.15.0",
     "mp4box": "^0.5.4",
+    "pmtiles": "^4.3.2",
     "proper-url-join": "^2.1.2",
     "pym.js": "^1.3.2",
     "slugify": "^1.6.6",