242 lines
11 KiB
JavaScript
242 lines
11 KiB
JavaScript
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};
|