solid-map-gl 1.1.11 → 1.1.12
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/esm/index.js +1 -1
- package/dist/esm/index.js.map +1 -1
- package/dist/source/components/Layer/index.jsx +20 -1
- package/dist/source/components/MapGL/index.jsx +42 -30
- package/dist/source/{components/MapGL/events.js → events.js} +37 -9
- package/dist/types/components/MapGL/index.d.ts +7 -0
- package/dist/types/events.d.ts +4 -0
- package/package.json +1 -1
- package/dist/types/components/MapGL/events.d.ts +0 -2
package/dist/esm/index.js
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template,createComponent,memo,effect,classList,insert}from"solid-js/web";import{useTransition,createContext,useContext,onMount,onCleanup,createEffect,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const
|
|
1
|
+
import{template,createComponent,memo,effect,classList,insert}from"solid-js/web";import{useTransition,createContext,useContext,onMount,onCleanup,createEffect,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const mapEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseMove","onMouseEnter","onMouseLeave","onPreClick","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel","onWheel","onResize","onRemove","onTouchMove","onMoveStart","onMove","onMoveEnd","onDragStart","onDrag","onDragEnd","onZoomStart","onZoom","onZoomEnd","onRotateStart","onRotate","onRotatEnd","onPitchStart","onPitch","onPitchEnd","onBoxZoomStart","onBoxZoomEnd","onBoxZoomCancel","onWebglContextLost","onWebglContextRestored","onLoad","onRender","onIdle","onError","onData","onStyleData","onSourceData","onDataLoading","onStyleDataLoading","onSourceDataLoading","onStyleImageMissing"],layerEvents=["onMouseDown","onMouseUp","onMouseOver","onMouseOut","onMouseOnMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],viewportEvents=["dragend","moveend","zoomend","pitchend","rotateend","boxzoomend"],_tmpl$$2=template("<section></section>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=a=>{let n,t,o=(onMount(()=>{n=new mapboxgl.Map({...a.options,container:t,interactive:!!a.onViewportChange,bounds:a.viewport.bounds,center:a.viewport.center,zoom:a.viewport.zoom||null,pitch:a.viewport.pitch||null,bearing:a.viewport.bearing||null,fitBoundsOptions:{padding:a.viewport.padding}})}),onCleanup(()=>{mapEvents.forEach(t=>{a[t]&&n.off(t.slice(2).toLowerCase(),e=>a[t](e))}),n.remove()}),createEffect(()=>mapEvents.forEach(t=>{var e;a[t]&&(e=t.slice(2).toLowerCase(),n.off(e,e=>a[t](e)).on(e,e=>a[t](e)))})),createEffect(()=>n.showTileBoundaries=a.showTileBoundaries),createEffect(()=>n.showTerrainWireframe=a.showTerrainWireframe),createEffect(()=>n.showPadding=a.showPadding),createEffect(()=>n.showCollisionBoxes=a.showCollisionBoxes),createEffect(()=>n.showOverdrawInspector=a.showOverdrawInspector),createEffect(()=>n.getCanvas().style.cursor=a.cursorStyle),createEffect(e=>e!==a.options.style&&n.setStyle(a.options.style),a.options.style),createEffect(()=>{a.onViewportChange&&viewportEvents.forEach(e=>n.on(e,e=>{e.originalEvent&&a.onViewportChange({center:n.getCenter(),zoom:n.getZoom(),pitch:n.getPitch(),bearing:n.getBearing(),padding:a.viewport.padding,bounds:a.viewport.bounds})}))}),createEffect(e=>{return a.viewport.bounds!=e&&(e=n.cameraForBounds(a.viewport.bounds,{padding:a.viewport.padding}),a.onViewportChange({...a.viewport,...e})),a.viewport.bounds},a.viewport.bounds),createEffect(async e=>{var t=a.viewport,o={...t.zoom!=e.zoom&&{zoom:t.zoom},...t.padding!=e.padding&&{padding:t.padding},...t.bearing!=e.bearing&&{bearing:t.bearing},...t.pitch!=e.pitch&&{pitch:t.pitch},...t.center!=e.center&&{center:t.center.lng?[t.center.lng,t.center.lat]:t.center}};if(Object.keys(o).length)switch(n.stop(),a.transitionType){case"easeTo":n.easeTo(o);case"jumpTo":n.jumpTo(o);default:n.flyTo(o)}return o},a.viewport),0);return createEffect(()=>{a.triggerResize&&(o=0,window.requestAnimationFrame(function e(){o<15&&(o++,window.requestAnimationFrame(e),start(()=>n.resize()))}))}),createComponent(MapContext.Provider,{value:()=>n,get children(){return[memo(()=>a.children),(()=>{const n=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(n):t=n,n.style.setProperty("height","100%"),n.style.setProperty("width","100%"),effect(e=>{var t=a.class||"",o=a.classList;return t!==e._v$&&(n.className=e._v$=t),e._v$2=classList(n,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),n})()]}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().style&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{id:t.id}},get children(){return t.children}})},diff=(n={},a={})=>{return[...new Set([...Object.keys(n),...Object.keys(a)])].reduce((e,t)=>{var o=n[t];return o!==a[t]&&e.push([t,o]),e},[])},Layer=o=>{const n=useMap(),t=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{n().isStyleLoaded()||await n().once("styledata"),n().getLayer(o.id)||n().addLayer(o.layer||{...o.style,id:o.id,source:t.id},o.beforeType?n().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),onCleanup(()=>{const e=n().getLayer(o.id);e&&(layerEvents.forEach(t=>{o[t]&&e.off(t.slice(2).toLowerCase(),e=>o[t](e))}),n().removeLayer(o.id))}),createEffect(()=>layerEvents.forEach(t=>{var e;o[t]&&(e=t.slice(2).toLowerCase(),n().off(e,o.id,e=>o[t](e)).on(e,o.id,e=>o[t](e)))})),createEffect(e=>{if(o.style&&n().style&&n().getSource(t.id)&&n().getLayer(o.id))return o.style.layout!==(null==e?void 0:e.layout)&&diff(o.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>n().setLayoutProperty(o.id,e,t,{validate:!1})),o.style.paint!==(null==e?void 0:e.paint)&&diff(o.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>n().setPaintProperty(o.id,e,t,{validate:!1})),o.style.minzoom===(null==e?void 0:e.minzoom)&&o.style.maxzoom===(null==e?void 0:e.maxzoom)||n().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style.filter!==(null==e?void 0:e.filter)&&n().setFilter(o.id,o.style.filter,{validate:!1}),o.style},o.style),createEffect(e=>{if(void 0!==o.visible&&o.visible!==e&&n().getSource(t.id)&&n().getLayer(o.id))return n().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}),o.visible},o.visible),createEffect(async()=>{o.filter&&(n().isStyleLoaded()||await n().once("styledata"),n().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(n().isStyleLoaded()||await n().once("styledata"),n().removeFeatureState({source:t.id,sourceLayer:o.style["source-layer"]}),n().setFeatureState({source:t.id,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.id})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,n]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options||{container:o().container});break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),n(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let n=null;return onMount(async()=>{var e;n=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>n.remove()),createEffect(()=>n.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let n=null;return onMount(async()=>{var e;n=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>n.remove()),createEffect(()=>n.setLngLat(t.lnglat)),createEffect(()=>n.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const n=useMap();return onMount(async()=>{n().isStyleLoaded()||await n().once("styledata"),o.url?n().loadImage(o.url,(e,t)=>{if(e)throw e;n().hasImage(o.id)||n().addImage(o.id,t)}):n().hasImage(o.id)||n().addImage(o.id,o.image,o.options)}),onCleanup(()=>n().hasImage(o.id)&&n().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?n().loadImage(o.url,(e,t)=>{if(e)throw e;n().hasImage(o.id)||n().updateImage(o.id,t)}):n().style&&n().hasImage(o.id)&&n().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default,useMap};
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sources":["../../src/components/MapGL/events.ts","../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["const events = [\n 'onResize',\n 'onRemove',\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseMove',\n 'onClick',\n 'onDblClick',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onMouseOut',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchMove',\n 'onTouchCancel',\n 'onMoveStart',\n 'onMove',\n 'onMoveEnd',\n 'onDragStart',\n 'onDrag',\n 'onDragEnd',\n 'onZoomStart',\n 'onZoom',\n 'onZoomEnd',\n 'onRotateStart',\n 'onRotate',\n 'onRotateEnd',\n 'onPitchStart',\n 'onPitch',\n 'onPitchEnd',\n 'onBoxZoomStart',\n 'onBoxZoomEnd',\n 'onBoxZoomCancel',\n 'onWebglContextLost',\n 'onWebglContextRestored',\n 'onLoad',\n 'onError',\n 'onData',\n 'onStyleData',\n 'onSourceData',\n 'onDataLoading',\n 'onStyleDataLoading',\n 'onSourceDataLoading',\n]\n\nexport { events as default }\n","import {\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\nimport events from './events'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\nimport type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js'\n\nexport type Viewport = {\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: PaddingOptions\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n class?: string\n classList?: {\n [k: string]: boolean | undefined\n }\n viewport?: Viewport\n options?: MapboxOptions\n children?: Element | Element[]\n triggerResize?: boolean\n transitionType?: 'flyTo' | 'easeTo' | 'jumpTo'\n onMouseMove?: (event: MapMouseEvent) => void\n onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n let map: MapboxMap\n let mapRef: HTMLDivElement\n\n onMount(() => {\n map = new mapboxgl.Map({\n ...props.options,\n container: mapRef,\n interactive: props.onViewportChange,\n bounds: props.viewport.bounds,\n center: props.viewport.center,\n zoom: props.viewport.zoom || null,\n pitch: props.viewport.pitch || null,\n bearing: props.viewport.bearing || null,\n fitBoundsOptions: { padding: props.viewport.padding },\n } as MapboxOptions)\n })\n\n onCleanup(() => map.remove())\n\n // Hook up events\n createEffect(() =>\n events.forEach(item => {\n props[item] && map.on(item.slice(2).toLowerCase(), e => props[item](e))\n })\n )\n\n // Update map style\n createEffect(\n prev => prev !== props.options.style && map.setStyle(props.options.style),\n props.options.style\n )\n\n // Update Viewport\n createEffect(() => {\n props.onViewportChange &&\n [\n 'dragend',\n 'moveend',\n 'zoomend',\n 'pitchend',\n 'rotateend',\n 'boxzoomend',\n ].forEach(item =>\n map.on(item, evt => {\n if (evt.isInternal) return\n const viewport: Viewport = {\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport.padding,\n bounds: props.viewport.bounds,\n }\n props.onViewportChange(viewport)\n })\n )\n })\n\n createEffect(prev => {\n if (props.viewport.bounds != prev) {\n const camera = map.cameraForBounds(props.viewport.bounds, {\n padding: props.viewport.padding,\n })\n props.onViewportChange({\n ...props.viewport,\n ...camera,\n })\n }\n return props.viewport.bounds\n }, props.viewport.bounds)\n\n createEffect(async (prev: Viewport) => {\n const vp: Viewport = props.viewport\n const nvp: Viewport = {\n ...(vp.zoom != prev.zoom && { zoom: vp.zoom }),\n ...(vp.padding != prev.padding && { padding: vp.padding }),\n ...(vp.bearing != prev.bearing && { bearing: vp.bearing }),\n ...(vp.pitch != prev.pitch && { pitch: vp.pitch }),\n ...(vp.center != prev.center && {\n center: vp.center.lng ? [vp.center.lng, vp.center.lat] : vp.center,\n }),\n }\n if (Object.keys(nvp).length) {\n map.stop()\n switch (props.transitionType) {\n case 'easeTo':\n map.easeTo(nvp, { isInternal: true })\n case 'jumpTo':\n map.jumpTo(nvp, { isInternal: true })\n default:\n map.flyTo(nvp, { isInternal: true })\n }\n }\n return vp\n }, props.viewport)\n\n let index = 0\n\n createEffect(() => {\n if (props.triggerResize) {\n index = 0\n window.requestAnimationFrame(function loop() {\n if (index < 15) {\n index++\n window.requestAnimationFrame(loop)\n start(() => map.resize())\n }\n })\n }\n })\n\n return (\n <MapContext.Provider value={() => map}>\n {props.children}\n <section\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}></section>\n </MapContext.Provider>\n )\n}\n\nexport { MapGL as default, useMap }\n","import {\n onMount,\n onCleanup,\n createEffect,\n Component,\n createContext,\n useContext,\n createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n Source,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n id?: string\n source: SourceSpecification\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n // Add Source\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getSource(props.id) && map().addSource(props.id, props.source)\n })\n\n // Remove Source\n onCleanup(() => {\n map()\n .getStyle()\n .layers.forEach(\n layer => layer.source === props.id && map().removeLayer(layer.id)\n )\n map().getSource(props.id) && map().removeSource(props.id)\n })\n\n // Update GeoJSON Data\n createEffect(async () => {\n if (props.source.type !== 'geojson' && !props.source.data) return\n\n map().style &&\n map().getSource(props.id) &&\n map().getSource(props.id).setData(props.source.data)\n })\n\n return (\n <SourceContext.Provider value={{ id: props.id }}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n newProps: StyleSpecification = {},\n prevProps: StyleSpecification = {}\n) => {\n const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n return [...keys].reduce((acc, key: string) => {\n const value = newProps[key]\n if (value !== prevProps[key]) {\n acc.push([key, value])\n }\n return acc\n }, [])\n}\n\nconst Layer: Component<{\n id?: string\n style?: StyleSpecification\n layer?: CustomLayerInterface\n filter?: FilterSpecification\n visible?: boolean\n sourceId?: string\n beforeType?:\n | 'background'\n | 'fill'\n | 'line'\n | 'symbol'\n | 'raster'\n | 'circle'\n | 'fill-extrusion'\n | 'heatmap'\n | 'hillshade'\n | 'sky'\n beforeId?: string\n featureState?: { id: number | string; state: object }\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n props.id = props.id || createUniqueId()\n // Add Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n if (map().getLayer(props.id)) return\n\n map().addLayer(\n props.layer || {\n ...props.style,\n id: props.id,\n source: source.id,\n },\n props.beforeType\n ? map()\n .getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n // Update Style\n createEffect((prev: StyleSpecification) => {\n if (\n !props.style ||\n !map().style ||\n !map().getSource(source.id) ||\n !map().getLayer(props.id)\n )\n return\n\n if (props.style.layout !== prev?.layout)\n diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value, { validate: false })\n )\n\n if (props.style.paint !== prev?.paint)\n diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value, { validate: false })\n )\n\n if (\n props.style.minzoom !== prev?.minzoom ||\n props.style.maxzoom !== prev?.maxzoom\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n if (props.style.filter !== prev?.filter)\n map().setFilter(props.id, props.style.filter, { validate: false })\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect((prev: boolean) => {\n if (\n props.visible === undefined ||\n props.visible === prev ||\n !map().getSource(source.id) ||\n !map().getLayer(props.id)\n )\n return\n\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n return props.visible\n }, props.visible)\n\n // Update Filter\n createEffect(async () => {\n if (!props.filter) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFilter(props.id, props.filter)\n })\n\n // Update Feature State\n createEffect(async () => {\n if (!props.featureState || !props.featureState.id) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n map().removeFeatureState({\n source: source.id,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: source.id,\n sourceLayer: props.style['source-layer'],\n id: props.featureState.id,\n },\n props.featureState.state\n )\n })\n\n return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n style: FogSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.style)\n })\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n // Add Sky Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n })\n\n // Remove Sky Layer\n onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n TerrainSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n\n // Add Terrain Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain({ ...props.style, source: source.id })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n type:\n | 'navigation'\n | 'scale'\n | 'attribution'\n | 'fullscreen'\n | 'geolocate'\n | 'language'\n | 'traffic'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n // Add Control\n onMount(async () => {\n let control\n\n switch (props.type) {\n case 'navigation':\n control = new mapboxgl.NavigationControl(props.options)\n break\n case 'scale':\n control = new mapboxgl.ScaleControl(props.options)\n break\n case 'attribution':\n control = new mapboxgl.AttributionControl(props.options)\n break\n case 'fullscreen':\n control = new mapboxgl.FullscreenControl(\n props.options || { container: map().container }\n )\n break\n case 'geolocate':\n control = new mapboxgl.GeolocateControl(props.options)\n break\n // case 'language':\n // // @ts-ignore\n // const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n // .default\n // control = new MapboxLanguage(props.options)\n // break\n // case 'traffic':\n // // @ts-ignore\n // const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n // .default\n // // @ts-ignore\n // await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n // control = new MapboxTraffic(props.options)\n // break\n }\n control && map().addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n options?: MarkerSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n onMount(async () => {\n marker = new mapboxgl.Marker(props.options)\n .setLngLat(props.lnglat)\n .setPopup(\n props.children\n ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n : null\n )\n .addTo(map())\n })\n // Remove Marker\n onCleanup(() => marker.remove())\n\n // Update Position\n createEffect(() => marker.setLngLat(props.lnglat))\n\n return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n options?: PopupSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n onMount(async () => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lnglat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup.setLngLat(props.lnglat))\n\n // Update Content\n createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n StyleImageInterface,\n StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n id: string\n url?: string\n image?:\n | HTMLImageElement\n | ImageBitmap\n | ImageData\n | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n | StyleImageInterface\n options?: StyleImageMetadata\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Image\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().addImage(props.id, image)\n })\n } else {\n !map().hasImage(props.id) &&\n map().addImage(props.id, props.image, props.options)\n }\n })\n // Remove Image\n onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n // Update Image\n createEffect(async () => {\n if (props.image && props.url) return\n\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().updateImage(props.id, image)\n })\n } else {\n map().style &&\n map().hasImage(props.id) &&\n map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["events","pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","index","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","onCleanup","remove","createEffect","forEach","item","on","slice","toLowerCase","e","prev","style","setStyle","evt","isInternal","getCenter","getZoom","getPitch","getBearing","camera","cameraForBounds","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","beforeType","find","l","beforeId","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","filter","setFilter","undefined","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"index.js","sources":["../../src/events.ts","../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["const mapEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onPreClick',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n 'onWheel',\n 'onResize',\n 'onRemove',\n 'onTouchMove',\n 'onMoveStart',\n 'onMove',\n 'onMoveEnd',\n 'onDragStart',\n 'onDrag',\n 'onDragEnd',\n 'onZoomStart',\n 'onZoom',\n 'onZoomEnd',\n 'onRotateStart',\n 'onRotate',\n 'onRotatEnd',\n 'onPitchStart',\n 'onPitch',\n 'onPitchEnd',\n 'onBoxZoomStart',\n 'onBoxZoomEnd',\n 'onBoxZoomCancel',\n 'onWebglContextLost',\n 'onWebglContextRestored',\n 'onLoad',\n 'onRender',\n 'onIdle',\n 'onError',\n 'onData',\n 'onStyleData',\n 'onSourceData',\n 'onDataLoading',\n 'onStyleDataLoading',\n 'onSourceDataLoading',\n 'onStyleImageMissing',\n]\n\nconst layerEvents: string[] = [\n 'onMouseDown',\n 'onMouseUp',\n 'onMouseOver',\n 'onMouseOut',\n 'onMouseOnMove',\n 'onMouseEnter',\n 'onMouseLeave',\n 'onClick',\n 'onDblClick',\n 'onContextMenu',\n 'onTouchStart',\n 'onTouchEnd',\n 'onTouchCancel',\n]\n\nconst viewportEvents: string[] = [\n 'dragend',\n 'moveend',\n 'zoomend',\n 'pitchend',\n 'rotateend',\n 'boxzoomend',\n]\n\nexport { mapEvents, layerEvents, viewportEvents }\n","import {\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\nimport { mapEvents, viewportEvents } from '../../events'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\nimport type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js'\n\nexport type Viewport = {\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: PaddingOptions\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n class?: string\n classList?: {\n [k: string]: boolean | undefined\n }\n viewport?: Viewport\n options?: MapboxOptions\n children?: Element | Element[]\n triggerResize?: boolean\n transitionType?: 'flyTo' | 'easeTo' | 'jumpTo'\n onMouseMove?: (event: MapMouseEvent) => void\n onViewportChange?: (viewport: Viewport) => void\n showTileBoundaries?: boolean\n showTerrainWireframe?: boolean\n showPadding?: boolean\n showCollisionBoxes?: boolean\n showOverdrawInspector?: boolean\n repaint?: boolean\n cursorStyle?: string\n}> = props => {\n let map: MapboxMap\n let mapRef: HTMLDivElement\n\n onMount(() => {\n map = new mapboxgl.Map({\n ...props.options,\n container: mapRef,\n interactive: !!props.onViewportChange,\n bounds: props.viewport.bounds,\n center: props.viewport.center,\n zoom: props.viewport.zoom || null,\n pitch: props.viewport.pitch || null,\n bearing: props.viewport.bearing || null,\n fitBoundsOptions: { padding: props.viewport.padding },\n } as MapboxOptions)\n })\n\n onCleanup(() => {\n mapEvents.forEach(item => {\n props[item] && map.off(item.slice(2).toLowerCase(), e => props[item](e))\n })\n map.remove()\n })\n\n // Hook up events\n createEffect(() =>\n mapEvents.forEach(item => {\n if (props[item]) {\n const eventString = item.slice(2).toLowerCase()\n map\n .off(eventString, e => props[item](e))\n .on(eventString, e => props[item](e))\n }\n })\n )\n\n // Update debug features\n createEffect(() => (map.showTileBoundaries = props.showTileBoundaries))\n createEffect(() => (map.showTerrainWireframe = props.showTerrainWireframe))\n createEffect(() => (map.showPadding = props.showPadding))\n createEffect(() => (map.showCollisionBoxes = props.showCollisionBoxes))\n createEffect(() => (map.showOverdrawInspector = props.showOverdrawInspector))\n createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle))\n\n // Update map style\n createEffect(\n prev => prev !== props.options.style && map.setStyle(props.options.style),\n props.options.style\n )\n\n // Update Viewport\n createEffect(() => {\n props.onViewportChange &&\n viewportEvents.forEach(item =>\n map.on(item, evt => {\n if (!evt.originalEvent) return\n props.onViewportChange({\n center: map.getCenter(),\n zoom: map.getZoom(),\n pitch: map.getPitch(),\n bearing: map.getBearing(),\n padding: props.viewport.padding,\n bounds: props.viewport.bounds,\n })\n })\n )\n })\n\n // Update boundaries\n createEffect(prev => {\n if (props.viewport.bounds != prev) {\n const camera = map.cameraForBounds(props.viewport.bounds, {\n padding: props.viewport.padding,\n })\n props.onViewportChange({\n ...props.viewport,\n ...camera,\n })\n }\n return props.viewport.bounds\n }, props.viewport.bounds)\n\n createEffect(async (prev: Viewport) => {\n const viewport: Viewport = props.viewport\n const newViewport: Viewport = {\n ...(viewport.zoom != prev.zoom && { zoom: viewport.zoom }),\n ...(viewport.padding != prev.padding && { padding: viewport.padding }),\n ...(viewport.bearing != prev.bearing && { bearing: viewport.bearing }),\n ...(viewport.pitch != prev.pitch && { pitch: viewport.pitch }),\n ...(viewport.center != prev.center && {\n center: viewport.center.lng\n ? [viewport.center.lng, viewport.center.lat]\n : viewport.center,\n }),\n }\n if (Object.keys(newViewport).length) {\n map.stop()\n switch (props.transitionType) {\n case 'easeTo':\n map.easeTo(newViewport)\n case 'jumpTo':\n map.jumpTo(newViewport)\n default:\n map.flyTo(newViewport)\n }\n }\n return newViewport\n }, props.viewport)\n\n let index = 0\n\n createEffect(() => {\n if (props.triggerResize) {\n index = 0\n window.requestAnimationFrame(function loop() {\n if (index < 15) {\n index++\n window.requestAnimationFrame(loop)\n start(() => map.resize())\n }\n })\n }\n })\n\n return (\n <MapContext.Provider value={() => map}>\n {props.children}\n <section\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}></section>\n </MapContext.Provider>\n )\n}\n\nexport { MapGL as default, useMap }\n","import {\n onMount,\n onCleanup,\n createEffect,\n Component,\n createContext,\n useContext,\n createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n Source,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n id?: string\n source: SourceSpecification\n}> = props => {\n const map: MapboxMap = useMap()\n props.id = props.id || createUniqueId()\n // Add Source\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getSource(props.id) && map().addSource(props.id, props.source)\n })\n\n // Remove Source\n onCleanup(() => {\n map()\n .getStyle()\n .layers.forEach(\n layer => layer.source === props.id && map().removeLayer(layer.id)\n )\n map().getSource(props.id) && map().removeSource(props.id)\n })\n\n // Update GeoJSON Data\n createEffect(async () => {\n if (props.source.type !== 'geojson' && !props.source.data) return\n\n map().style &&\n map().getSource(props.id) &&\n map().getSource(props.id).setData(props.source.data)\n })\n\n return (\n <SourceContext.Provider value={{ id: props.id }}>\n {props.children}\n </SourceContext.Provider>\n )\n}\n\nexport { SourceComponent as default, useSource }\n","import {\n onMount,\n onCleanup,\n createEffect,\n Component,\n createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport { layerEvents } from '../../events'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n FilterSpecification,\n StyleSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n newProps: StyleSpecification = {},\n prevProps: StyleSpecification = {}\n) => {\n const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n return [...keys].reduce((acc, key: string) => {\n const value = newProps[key]\n if (value !== prevProps[key]) {\n acc.push([key, value])\n }\n return acc\n }, [])\n}\n\nconst Layer: Component<{\n id?: string\n style?: StyleSpecification\n layer?: CustomLayerInterface\n filter?: FilterSpecification\n visible?: boolean\n sourceId?: string\n beforeType?:\n | 'background'\n | 'fill'\n | 'line'\n | 'symbol'\n | 'raster'\n | 'circle'\n | 'fill-extrusion'\n | 'heatmap'\n | 'hillshade'\n | 'sky'\n beforeId?: string\n featureState?: { id: number | string; state: object }\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n props.id = props.id || createUniqueId()\n // Add Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n if (map().getLayer(props.id)) return\n\n map().addLayer(\n props.layer || {\n ...props.style,\n id: props.id,\n source: source.id,\n },\n props.beforeType\n ? map()\n .getStyle()\n .layers.find(l => l.type === props.beforeType).id\n : props.beforeId\n )\n })\n\n onCleanup(() => {\n const layer = map().getLayer(props.id)\n if (!layer) return\n layerEvents.forEach(item => {\n props[item] && layer.off(item.slice(2).toLowerCase(), e => props[item](e))\n })\n map().removeLayer(props.id)\n })\n\n // Hook up events\n createEffect(() =>\n layerEvents.forEach(item => {\n if (props[item]) {\n const eventString = item.slice(2).toLowerCase()\n map()\n .off(eventString, props.id, e => props[item](e))\n .on(eventString, props.id, e => props[item](e))\n }\n })\n )\n\n // Update Style\n createEffect((prev: StyleSpecification) => {\n if (\n !props.style ||\n !map().style ||\n !map().getSource(source.id) ||\n !map().getLayer(props.id)\n )\n return\n\n if (props.style.layout !== prev?.layout)\n diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n map().setLayoutProperty(props.id, key, value, { validate: false })\n )\n\n if (props.style.paint !== prev?.paint)\n diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n map().setPaintProperty(props.id, key, value, { validate: false })\n )\n\n if (\n props.style.minzoom !== prev?.minzoom ||\n props.style.maxzoom !== prev?.maxzoom\n )\n map().setLayerZoomRange(\n props.id,\n props.style.minzoom,\n props.style.maxzoom\n )\n\n if (props.style.filter !== prev?.filter)\n map().setFilter(props.id, props.style.filter, { validate: false })\n\n return props.style\n }, props.style)\n\n // Update Visibility\n createEffect((prev: boolean) => {\n if (\n props.visible === undefined ||\n props.visible === prev ||\n !map().getSource(source.id) ||\n !map().getLayer(props.id)\n )\n return\n\n map().setLayoutProperty(\n props.id,\n 'visibility',\n props.visible ? 'visible' : 'none',\n { validate: false }\n )\n return props.visible\n }, props.visible)\n\n // Update Filter\n createEffect(async () => {\n if (!props.filter) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFilter(props.id, props.filter)\n })\n\n // Update Feature State\n createEffect(async () => {\n if (!props.featureState || !props.featureState.id) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n\n map().removeFeatureState({\n source: source.id,\n sourceLayer: props.style['source-layer'],\n })\n map().setFeatureState(\n {\n source: source.id,\n sourceLayer: props.style['source-layer'],\n id: props.featureState.id,\n },\n props.featureState.state\n )\n })\n\n return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n style: FogSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Fog Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.style)\n })\n // Remove Fog Layer\n onCleanup(() => map().setFog(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setFog(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n style: StyleSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const layerId = '_sky'\n // Add Sky Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n })\n\n // Remove Sky Layer\n onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setLayoutProperty(\n layerId,\n 'visibility',\n props.visible ? 'visible' : 'none'\n )\n })\n\n return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n TerrainSpecification,\n SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n style: TerrainSpecification\n visible?: boolean\n}> = props => {\n const map: MapboxMap = useMap()\n const source: SourceSpecification = useSource()\n\n // Add Terrain Layer\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain({ ...props.style, source: source.id })\n })\n\n // Remove Terrain Layer\n onCleanup(() => map().setTerrain(null))\n\n // Update Visibility\n createEffect(async () => {\n if (props.visible === undefined) return\n\n !map().isStyleLoaded() && (await map().once('styledata'))\n map().setTerrain(props.visible ? props.style : null)\n })\n\n return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n type:\n | 'navigation'\n | 'scale'\n | 'attribution'\n | 'fullscreen'\n | 'geolocate'\n | 'language'\n | 'traffic'\n options?:\n | NavigationOptions\n | ScaleOptions\n | AttributionOptions\n | FullscreenOptions\n | GeolocateOptions\n position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n const map: MapboxMap = useMap()\n const [control, setControl] = createSignal(null)\n // Add Control\n onMount(async () => {\n let control\n\n switch (props.type) {\n case 'navigation':\n control = new mapboxgl.NavigationControl(props.options)\n break\n case 'scale':\n control = new mapboxgl.ScaleControl(props.options)\n break\n case 'attribution':\n control = new mapboxgl.AttributionControl(props.options)\n break\n case 'fullscreen':\n control = new mapboxgl.FullscreenControl(\n props.options || { container: map().container }\n )\n break\n case 'geolocate':\n control = new mapboxgl.GeolocateControl(props.options)\n break\n // case 'language':\n // // @ts-ignore\n // const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n // .default\n // control = new MapboxLanguage(props.options)\n // break\n // case 'traffic':\n // // @ts-ignore\n // const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n // .default\n // // @ts-ignore\n // await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n // control = new MapboxTraffic(props.options)\n // break\n }\n control && map().addControl(control, props.position)\n setControl(control)\n })\n\n onCleanup(() => map().removeControl(control()))\n\n return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n options?: MarkerSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let marker = null\n\n // Add Marker\n onMount(async () => {\n marker = new mapboxgl.Marker(props.options)\n .setLngLat(props.lnglat)\n .setPopup(\n props.children\n ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n : null\n )\n .addTo(map())\n })\n // Remove Marker\n onCleanup(() => marker.remove())\n\n // Update Position\n createEffect(() => marker.setLngLat(props.lnglat))\n\n return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n options?: PopupSpecification\n lnglat: LngLatLike\n}> = props => {\n const map: MapboxMap = useMap()\n let popup = null\n\n // Add Popup\n onMount(async () => {\n popup = new mapboxgl.Popup(props.options)\n .setLngLat(props.lnglat)\n .setDOMContent(<div>{props.children}</div>)\n .addTo(map())\n })\n // Remove Popup\n onCleanup(() => popup.remove())\n\n // Update Position\n createEffect(() => popup.setLngLat(props.lnglat))\n\n // Update Content\n createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n StyleImageInterface,\n StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n id: string\n url?: string\n image?:\n | HTMLImageElement\n | ImageBitmap\n | ImageData\n | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n | StyleImageInterface\n options?: StyleImageMetadata\n}> = props => {\n const map: MapboxMap = useMap()\n // Add Image\n onMount(async () => {\n !map().isStyleLoaded() && (await map().once('styledata'))\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().addImage(props.id, image)\n })\n } else {\n !map().hasImage(props.id) &&\n map().addImage(props.id, props.image, props.options)\n }\n })\n // Remove Image\n onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n // Update Image\n createEffect(async () => {\n if (props.image && props.url) return\n\n if (props.url) {\n map().loadImage(props.url, (error, image) => {\n if (error) throw error\n !map().hasImage(props.id) && map().updateImage(props.id, image)\n })\n } else {\n map().style &&\n map().hasImage(props.id) &&\n map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["mapEvents","layerEvents","viewportEvents","pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","index","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","onCleanup","forEach","item","off","slice","toLowerCase","e","remove","createEffect","eventString","on","showTileBoundaries","showTerrainWireframe","showPadding","showCollisionBoxes","showOverdrawInspector","getCanvas","style","cursor","cursorStyle","prev","setStyle","evt","originalEvent","getCenter","getZoom","getPitch","getBearing","camera","cameraForBounds","newViewport","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","beforeType","find","l","beforeId","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","filter","setFilter","undefined","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
|
-
import { onMount, createEffect, createUniqueId } from 'solid-js';
|
|
1
|
+
import { onMount, onCleanup, createEffect, createUniqueId, } from 'solid-js';
|
|
2
2
|
import { useMap } from '../MapGL';
|
|
3
3
|
import { useSource } from '../Source';
|
|
4
|
+
import { layerEvents } from '../../events';
|
|
4
5
|
const diff = (newProps = {}, prevProps = {}) => {
|
|
5
6
|
const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
|
|
6
7
|
return [...keys].reduce((acc, key) => {
|
|
@@ -30,6 +31,24 @@ const Layer = props => {
|
|
|
30
31
|
.layers.find(l => l.type === props.beforeType).id
|
|
31
32
|
: props.beforeId);
|
|
32
33
|
});
|
|
34
|
+
onCleanup(() => {
|
|
35
|
+
const layer = map().getLayer(props.id);
|
|
36
|
+
if (!layer)
|
|
37
|
+
return;
|
|
38
|
+
layerEvents.forEach(item => {
|
|
39
|
+
props[item] && layer.off(item.slice(2).toLowerCase(), e => props[item](e));
|
|
40
|
+
});
|
|
41
|
+
map().removeLayer(props.id);
|
|
42
|
+
});
|
|
43
|
+
// Hook up events
|
|
44
|
+
createEffect(() => layerEvents.forEach(item => {
|
|
45
|
+
if (props[item]) {
|
|
46
|
+
const eventString = item.slice(2).toLowerCase();
|
|
47
|
+
map()
|
|
48
|
+
.off(eventString, props.id, e => props[item](e))
|
|
49
|
+
.on(eventString, props.id, e => props[item](e));
|
|
50
|
+
}
|
|
51
|
+
}));
|
|
33
52
|
// Update Style
|
|
34
53
|
createEffect((prev) => {
|
|
35
54
|
if (!props.style ||
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { createEffect, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
|
|
2
|
-
import
|
|
2
|
+
import { mapEvents, viewportEvents } from '../../events';
|
|
3
3
|
import mapboxgl from 'mapbox-gl';
|
|
4
4
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
5
5
|
const [pending, start] = useTransition();
|
|
@@ -12,7 +12,7 @@ const MapGL = props => {
|
|
|
12
12
|
map = new mapboxgl.Map({
|
|
13
13
|
...props.options,
|
|
14
14
|
container: mapRef,
|
|
15
|
-
interactive: props.onViewportChange,
|
|
15
|
+
interactive: !!props.onViewportChange,
|
|
16
16
|
bounds: props.viewport.bounds,
|
|
17
17
|
center: props.viewport.center,
|
|
18
18
|
zoom: props.viewport.zoom || null,
|
|
@@ -21,37 +21,47 @@ const MapGL = props => {
|
|
|
21
21
|
fitBoundsOptions: { padding: props.viewport.padding },
|
|
22
22
|
});
|
|
23
23
|
});
|
|
24
|
-
onCleanup(() =>
|
|
24
|
+
onCleanup(() => {
|
|
25
|
+
mapEvents.forEach(item => {
|
|
26
|
+
props[item] && map.off(item.slice(2).toLowerCase(), e => props[item](e));
|
|
27
|
+
});
|
|
28
|
+
map.remove();
|
|
29
|
+
});
|
|
25
30
|
// Hook up events
|
|
26
|
-
createEffect(() =>
|
|
27
|
-
|
|
31
|
+
createEffect(() => mapEvents.forEach(item => {
|
|
32
|
+
if (props[item]) {
|
|
33
|
+
const eventString = item.slice(2).toLowerCase();
|
|
34
|
+
map
|
|
35
|
+
.off(eventString, e => props[item](e))
|
|
36
|
+
.on(eventString, e => props[item](e));
|
|
37
|
+
}
|
|
28
38
|
}));
|
|
39
|
+
// Update debug features
|
|
40
|
+
createEffect(() => (map.showTileBoundaries = props.showTileBoundaries));
|
|
41
|
+
createEffect(() => (map.showTerrainWireframe = props.showTerrainWireframe));
|
|
42
|
+
createEffect(() => (map.showPadding = props.showPadding));
|
|
43
|
+
createEffect(() => (map.showCollisionBoxes = props.showCollisionBoxes));
|
|
44
|
+
createEffect(() => (map.showOverdrawInspector = props.showOverdrawInspector));
|
|
45
|
+
createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle));
|
|
29
46
|
// Update map style
|
|
30
47
|
createEffect(prev => prev !== props.options.style && map.setStyle(props.options.style), props.options.style);
|
|
31
48
|
// Update Viewport
|
|
32
49
|
createEffect(() => {
|
|
33
50
|
props.onViewportChange &&
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
'moveend',
|
|
37
|
-
'zoomend',
|
|
38
|
-
'pitchend',
|
|
39
|
-
'rotateend',
|
|
40
|
-
'boxzoomend',
|
|
41
|
-
].forEach(item => map.on(item, evt => {
|
|
42
|
-
if (evt.isInternal)
|
|
51
|
+
viewportEvents.forEach(item => map.on(item, evt => {
|
|
52
|
+
if (!evt.originalEvent)
|
|
43
53
|
return;
|
|
44
|
-
|
|
54
|
+
props.onViewportChange({
|
|
45
55
|
center: map.getCenter(),
|
|
46
56
|
zoom: map.getZoom(),
|
|
47
57
|
pitch: map.getPitch(),
|
|
48
58
|
bearing: map.getBearing(),
|
|
49
59
|
padding: props.viewport.padding,
|
|
50
60
|
bounds: props.viewport.bounds,
|
|
51
|
-
};
|
|
52
|
-
props.onViewportChange(viewport);
|
|
61
|
+
});
|
|
53
62
|
}));
|
|
54
63
|
});
|
|
64
|
+
// Update boundaries
|
|
55
65
|
createEffect(prev => {
|
|
56
66
|
if (props.viewport.bounds != prev) {
|
|
57
67
|
const camera = map.cameraForBounds(props.viewport.bounds, {
|
|
@@ -65,28 +75,30 @@ const MapGL = props => {
|
|
|
65
75
|
return props.viewport.bounds;
|
|
66
76
|
}, props.viewport.bounds);
|
|
67
77
|
createEffect(async (prev) => {
|
|
68
|
-
const
|
|
69
|
-
const
|
|
70
|
-
...(
|
|
71
|
-
...(
|
|
72
|
-
...(
|
|
73
|
-
...(
|
|
74
|
-
...(
|
|
75
|
-
center:
|
|
78
|
+
const viewport = props.viewport;
|
|
79
|
+
const newViewport = {
|
|
80
|
+
...(viewport.zoom != prev.zoom && { zoom: viewport.zoom }),
|
|
81
|
+
...(viewport.padding != prev.padding && { padding: viewport.padding }),
|
|
82
|
+
...(viewport.bearing != prev.bearing && { bearing: viewport.bearing }),
|
|
83
|
+
...(viewport.pitch != prev.pitch && { pitch: viewport.pitch }),
|
|
84
|
+
...(viewport.center != prev.center && {
|
|
85
|
+
center: viewport.center.lng
|
|
86
|
+
? [viewport.center.lng, viewport.center.lat]
|
|
87
|
+
: viewport.center,
|
|
76
88
|
}),
|
|
77
89
|
};
|
|
78
|
-
if (Object.keys(
|
|
90
|
+
if (Object.keys(newViewport).length) {
|
|
79
91
|
map.stop();
|
|
80
92
|
switch (props.transitionType) {
|
|
81
93
|
case 'easeTo':
|
|
82
|
-
map.easeTo(
|
|
94
|
+
map.easeTo(newViewport);
|
|
83
95
|
case 'jumpTo':
|
|
84
|
-
map.jumpTo(
|
|
96
|
+
map.jumpTo(newViewport);
|
|
85
97
|
default:
|
|
86
|
-
map.flyTo(
|
|
98
|
+
map.flyTo(newViewport);
|
|
87
99
|
}
|
|
88
100
|
}
|
|
89
|
-
return
|
|
101
|
+
return newViewport;
|
|
90
102
|
}, props.viewport);
|
|
91
103
|
let index = 0;
|
|
92
104
|
createEffect(() => {
|
|
@@ -1,20 +1,22 @@
|
|
|
1
|
-
const
|
|
2
|
-
'onResize',
|
|
3
|
-
'onRemove',
|
|
1
|
+
const mapEvents = [
|
|
4
2
|
'onMouseDown',
|
|
5
3
|
'onMouseUp',
|
|
6
4
|
'onMouseOver',
|
|
5
|
+
'onMouseOut',
|
|
7
6
|
'onMouseMove',
|
|
8
|
-
'onClick',
|
|
9
|
-
'onDblClick',
|
|
10
7
|
'onMouseEnter',
|
|
11
8
|
'onMouseLeave',
|
|
12
|
-
'
|
|
9
|
+
'onPreClick',
|
|
10
|
+
'onClick',
|
|
11
|
+
'onDblClick',
|
|
13
12
|
'onContextMenu',
|
|
14
13
|
'onTouchStart',
|
|
15
14
|
'onTouchEnd',
|
|
16
|
-
'onTouchMove',
|
|
17
15
|
'onTouchCancel',
|
|
16
|
+
'onWheel',
|
|
17
|
+
'onResize',
|
|
18
|
+
'onRemove',
|
|
19
|
+
'onTouchMove',
|
|
18
20
|
'onMoveStart',
|
|
19
21
|
'onMove',
|
|
20
22
|
'onMoveEnd',
|
|
@@ -26,7 +28,7 @@ const events = [
|
|
|
26
28
|
'onZoomEnd',
|
|
27
29
|
'onRotateStart',
|
|
28
30
|
'onRotate',
|
|
29
|
-
'
|
|
31
|
+
'onRotatEnd',
|
|
30
32
|
'onPitchStart',
|
|
31
33
|
'onPitch',
|
|
32
34
|
'onPitchEnd',
|
|
@@ -36,6 +38,8 @@ const events = [
|
|
|
36
38
|
'onWebglContextLost',
|
|
37
39
|
'onWebglContextRestored',
|
|
38
40
|
'onLoad',
|
|
41
|
+
'onRender',
|
|
42
|
+
'onIdle',
|
|
39
43
|
'onError',
|
|
40
44
|
'onData',
|
|
41
45
|
'onStyleData',
|
|
@@ -43,5 +47,29 @@ const events = [
|
|
|
43
47
|
'onDataLoading',
|
|
44
48
|
'onStyleDataLoading',
|
|
45
49
|
'onSourceDataLoading',
|
|
50
|
+
'onStyleImageMissing',
|
|
51
|
+
];
|
|
52
|
+
const layerEvents = [
|
|
53
|
+
'onMouseDown',
|
|
54
|
+
'onMouseUp',
|
|
55
|
+
'onMouseOver',
|
|
56
|
+
'onMouseOut',
|
|
57
|
+
'onMouseOnMove',
|
|
58
|
+
'onMouseEnter',
|
|
59
|
+
'onMouseLeave',
|
|
60
|
+
'onClick',
|
|
61
|
+
'onDblClick',
|
|
62
|
+
'onContextMenu',
|
|
63
|
+
'onTouchStart',
|
|
64
|
+
'onTouchEnd',
|
|
65
|
+
'onTouchCancel',
|
|
66
|
+
];
|
|
67
|
+
const viewportEvents = [
|
|
68
|
+
'dragend',
|
|
69
|
+
'moveend',
|
|
70
|
+
'zoomend',
|
|
71
|
+
'pitchend',
|
|
72
|
+
'rotateend',
|
|
73
|
+
'boxzoomend',
|
|
46
74
|
];
|
|
47
|
-
export {
|
|
75
|
+
export { mapEvents, layerEvents, viewportEvents };
|
|
@@ -26,5 +26,12 @@ declare const MapGL: Component<{
|
|
|
26
26
|
transitionType?: 'flyTo' | 'easeTo' | 'jumpTo';
|
|
27
27
|
onMouseMove?: (event: MapMouseEvent) => void;
|
|
28
28
|
onViewportChange?: (viewport: Viewport) => void;
|
|
29
|
+
showTileBoundaries?: boolean;
|
|
30
|
+
showTerrainWireframe?: boolean;
|
|
31
|
+
showPadding?: boolean;
|
|
32
|
+
showCollisionBoxes?: boolean;
|
|
33
|
+
showOverdrawInspector?: boolean;
|
|
34
|
+
repaint?: boolean;
|
|
35
|
+
cursorStyle?: string;
|
|
29
36
|
}>;
|
|
30
37
|
export { MapGL as default, useMap };
|
package/package.json
CHANGED