import{j as e}from"./index-bIIEL2MP.js";import{useMDXComponents as l}from"./index-CO-0pc0F.js";import{M as t,C as r}from"./index-Z-6k0Xrj.js";import{T as a,D as s,G as c,N as d,W as p}from"./TileMap.stories-BUS5l0dG.js";import"./_commonjsHelpers-D6-XlEtG.js";import"./iframe-CzjIX-qr.js";import"./index-aQYXhgXp.js";import"./index-DrFu-skq.js";import"./props-b4vEeO_8.js";import"./runtime-C3rQLW--.js";import"./lifecycle-F2p_Qkk3.js";import"./create-runtime-stories-7AWWVphH.js";import"./snippet-C5kbqVpq.js";import"./svelte-component-C8Ginrj8.js";import"./get-C3XmtPLd.js";import"./index-client-BAw8T8-V.js";import"./attributes-Cg6aLqN3.js";import"./style-DvJ3IcV1.js";import"./this-CrUBQEQ_.js";import"./GraphicBlock-uLJTqaY1.js";import"./Block-D3Ui8rd-.js";import"./PaddingReset-_TGvg1_B.js";import"./Markdown-DUxFwijc.js";import"./each-CVpBMMjG.js";function o(i){const n={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...l(),...i.components};return e.jsxs(e.Fragment,{children:[e.jsx(t,{of:a}),`
`,e.jsx(n.h1,{id:"tilemap",children:"TileMap"}),`
`,e.jsx(n.p,{children:"Easily add an interactive map to your page using MapLibre GL and PMTiles."}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { TileMap } from '@reuters-graphics/graphics-components';
<\/script>

<TileMap
  id="my-map"
  center={[-74.006, 40.7128]}
  zoom={10}
  interactive={true}
  height="500px"
/>
`})}),`
`,e.jsxs(n.p,{children:["The TileMap component uses ",e.jsx(n.a,{href:"https://maplibre.org/",rel:"nofollow",children:"MapLibre GL JS"})," and ",e.jsx(n.a,{href:"https://protomaps.com/docs/pmtiles",rel:"nofollow",children:"PMTiles"})," for efficient, interactive mapping. It automatically configures the PMTiles protocol and uses the Reuters Protomaps style by default."]}),`
`,e.jsx(r,{of:s}),`
`,e.jsx(n.h2,{id:"globe-view",children:"Globe view"}),`
`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"projection"})," prop to display a 3D globe. The projection accepts a ",e.jsx(n.a,{href:"https://maplibre.org/maplibre-style-spec/types/#projectiondefinition",rel:"nofollow",children:"ProjectionSpecification"})," object:"]}),`
`,e.jsx(r,{of:c}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<TileMap
  id="globe-map"
  center={[0, 0]}
  zoom={1}
  projection={{ type: 'globe' }}
  interactive={true}
  height="600px"
/>
`})}),`
`,e.jsx(n.h2,{id:"non-interactive-mode",children:"Non-interactive mode"}),`
`,e.jsx(n.p,{children:"Disable interaction for static maps:"}),`
`,e.jsx(r,{of:d}),`
`,e.jsx(n.h2,{id:"adding-geojson-layers",children:"Adding GeoJSON layers"}),`
`,e.jsxs(n.p,{children:["Use the ",e.jsx(n.code,{children:"TileMapLayer"})," component to add GeoJSON data to your map. You can pass GeoJSON data directly or fetch it from a URL. Layer rendering order will directly correspond to the order in which you add the layers in the code."]}),`
`,e.jsx(r,{of:p}),`
`,e.jsx(n.h3,{id:"basic-example-with-local-data",children:"Basic example with local data"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { TileMap, TileMapLayer } from '@reuters-graphics/graphics-components';

  const parkData = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Polygon',
          coordinates: [
            [
              [-73.9577, 40.8005],
              [-73.9816, 40.7684],
              [-73.973, 40.7649],
              [-73.9492, 40.7969],
              [-73.9577, 40.8005],
            ],
          ],
        },
        properties: { name: 'Central Park' },
      },
    ],
  };
<\/script>

<TileMap center={[-73.9712, 40.7831]} zoom={13}>
  <!-- Polygon fill -->
  <TileMapLayer
    id="park-fill"
    data={parkData}
    type="fill"
    paint={{
      'fill-color': '#179639',
      'fill-opacity': 0.7,
    }}
  />

  <!-- Polygon outline -->
  <TileMapLayer
    id="park-outline"
    data={parkData}
    type="line"
    paint={{
      'line-color': '#228b22',
      'line-width': 2,
    }}
  />
</TileMap>
`})}),`
`,e.jsx(n.h3,{id:"fetching-geojson-from-a-url",children:"Fetching GeoJSON from a URL"}),`
`,e.jsx(n.p,{children:"You can also pass a URL string to fetch GeoJSON data:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<TileMap center={[-73.9712, 40.7831]} zoom={11}>
  <TileMapLayer
    id="marathon-route"
    data="https://example.com/path/to/route.geojson"
    type="line"
    paint={{
      'line-color': '#4287f5',
      'line-width': 2,
    }}
  />
</TileMap>
`})}),`
`,e.jsx(n.h3,{id:"adding-point-markers",children:"Adding point markers"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  const officeLocation = {
    type: 'FeatureCollection',
    features: [
      {
        type: 'Feature',
        geometry: {
          type: 'Point',
          coordinates: [-73.9868, 40.7567],
        },
        properties: { name: 'Office' },
      },
    ],
  };
<\/script>

<TileMap center={[-73.9868, 40.7567]} zoom={14}>
  <!-- Point marker -->
  <TileMapLayer
    id="office-point"
    data={officeLocation}
    type="circle"
    paint={{
      'circle-radius': 6,
      'circle-color': '#ff0000',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff',
    }}
  />

  <!-- Text label -->
  <TileMapLayer
    id="office-label"
    data={officeLocation}
    type="symbol"
    layout={{
      'text-field': 'Office',
      'text-offset': [0, 1],
      'text-anchor': 'top',
      'text-size': 12,
    }}
    paint={{
      'text-color': '#000000',
      'text-halo-color': '#ffffff',
      'text-halo-width': 2,
    }}
  />
</TileMap>
`})}),`
`,e.jsx(n.h3,{id:"tilemaplayer-props",children:"TileMapLayer Props"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"id"}),": ",e.jsx(n.code,{children:"string"})," (required) - Unique identifier for the layer"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"data"}),": ",e.jsx(n.code,{children:"object | string"})," (required) - GeoJSON data or URL to fetch from"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"type"}),": ",e.jsx(n.code,{children:"'fill' | 'line' | 'circle' | 'symbol' | 'fill-extrusion' | 'raster' | 'background' | 'heatmap' | 'hillshade'"})," - Layer type (default: ",e.jsx(n.code,{children:"'fill'"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"paint"}),": ",e.jsx(n.code,{children:"Record<string, unknown>"})," - Paint properties for the layer"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"layout"}),": ",e.jsx(n.code,{children:"Record<string, unknown>"})," - Layout properties for the layer"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"beforeId"}),": ",e.jsx(n.code,{children:"string"})," - Layer ID to insert before (for ordering)"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"minZoom"}),": ",e.jsx(n.code,{children:"number"})," - Minimum zoom level to display layer"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"maxZoom"}),": ",e.jsx(n.code,{children:"number"})," - Maximum zoom level to display layer"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"filter"}),": ",e.jsx(n.code,{children:"unknown[]"})," - Filter expression for the layer"]}),`
`]}),`
`,e.jsx(n.h3,{id:"multiple-layers-example",children:"Multiple layers example"}),`
`,e.jsx(n.p,{children:"You can combine multiple layers to create rich visualizations:"}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<TileMap center={[-73.9712, 40.7831]} zoom={11}>
  <!-- Background polygon -->
  <TileMapLayer
    id="area-fill"
    data={areaData}
    type="fill"
    paint={{ 'fill-color': '#179639', 'fill-opacity': 0.7 }}
  />

  <!-- Border line -->
  <TileMapLayer
    id="area-border"
    data={areaData}
    type="line"
    paint={{ 'line-color': '#228b22', 'line-width': 2 }}
  />

  <!-- Route from URL -->
  <TileMapLayer
    id="route"
    data="https://example.com/route.geojson"
    type="line"
    paint={{ 'line-color': '#4287f5', 'line-width': 2 }}
  />

  <!-- Point markers -->
  <TileMapLayer
    id="markers"
    data={pointsData}
    type="circle"
    paint={{
      'circle-radius': 4,
      'circle-color': '#9c27b0',
      'circle-stroke-width': 2,
      'circle-stroke-color': '#ffffff',
    }}
  />
</TileMap>
`})}),`
`,e.jsx(n.h2,{id:"advanced-usage",children:"Advanced usage"}),`
`,e.jsxs(n.p,{children:["For more control over the map, you can use the ",e.jsx(n.code,{children:"onMapReady"})," callback to access the MapLibre GL instance:"]}),`
`,e.jsx(n.pre,{children:e.jsx(n.code,{className:"language-svelte",children:`<script>
  import { TileMap } from '@reuters-graphics/graphics-components';
  import type { Map as MaplibreMap } from 'maplibre-gl';

  function handleMapReady(map: MaplibreMap) {
    // Add custom layers, sources, or event handlers
    map.addSource('my-source', {
      type: 'geojson',
      data: myGeoJsonData,
    });

    map.addLayer({
      id: 'my-layer',
      type: 'circle',
      source: 'my-source',
      paint: {
        'circle-radius': 8,
        'circle-color': '#007cbf',
      },
    });
  }
<\/script>

<Map id="custom-map" center={[0, 0]} zoom={2} onMapReady={handleMapReady} />
`})}),`
`,e.jsx(n.h2,{id:"props",children:"Props"}),`
`,e.jsxs(n.ul,{children:[`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"center"}),": ",e.jsx(n.code,{children:"[longitude, latitude]"})," - Map center coordinates (default: ",e.jsx(n.code,{children:"[0, 0]"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"zoom"}),": ",e.jsx(n.code,{children:"number"})," - Initial zoom level (default: ",e.jsx(n.code,{children:"2"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"minZoom"}),": ",e.jsx(n.code,{children:"number"})," - Minimum zoom level (default: ",e.jsx(n.code,{children:"0"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"maxZoom"}),": ",e.jsx(n.code,{children:"number"})," - Maximum zoom level (default: ",e.jsx(n.code,{children:"22"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"interactive"}),": ",e.jsx(n.code,{children:"boolean"})," - Enable interactive controls (default: ",e.jsx(n.code,{children:"true"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"styleUrl"}),": ",e.jsx(n.code,{children:"string"})," - Map style URL (default: Reuters Protomaps style)"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"height"}),": ",e.jsx(n.code,{children:"string"})," - Map height in CSS units (default: ",e.jsx(n.code,{children:"'500px'"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"width"}),": ",e.jsx(n.code,{children:"ContainerWidth"})," - Width within the text well (default: ",e.jsx(n.code,{children:"'normal'"}),")"]}),`
`,e.jsxs(n.li,{children:[e.jsx(n.strong,{children:"onMapReady"}),": ",e.jsx(n.code,{children:"(map: maplibregl.Map) => void"})," - Callback when map is ready"]}),`
`]})]})}function J(i={}){const{wrapper:n}={...l(),...i.components};return n?e.jsx(n,{...i,children:e.jsx(o,{...i})}):o(i)}export{J as default};