solid-map-gl 1.1.9 → 1.1.10
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
CHANGED
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
import{template,createComponent,
|
|
1
|
+
import{template,createComponent,memo,effect,classList,insert}from"solid-js/web";import{useTransition,createContext,useContext,onCleanup,onMount,createEffect,createMemo,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const _tmpl$$2=template("<main></main>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{let a,t;onCleanup(()=>a.remove()),onMount(()=>{a=new mapboxgl.Map({...n.options,container:t,interactive:n.onViewportChange,bounds:n.viewport.bounds,center:n.viewport.center,zoom:n.viewport.zoom||null,pitch:n.viewport.pitch||null,bearing:n.viewport.bearing||null,fitBoundsOptions:{padding:n.viewport.padding}}),a.container=void 0}),createEffect(()=>a.on("mousemove",e=>n.onMouseMove(e.lngLat))),createMemo(()=>a&&a.setStyle(n.options.style));const e=e=>{e.isInternal||(e={center:a.getCenter(),zoom:a.getZoom(),pitch:a.getPitch(),bearing:a.getBearing(),padding:n.viewport.padding,bounds:n.viewport.bounds},n.onViewportChange(e))};createEffect(()=>n.onViewportChange&&a.on("dragend",e).on("moveend",e).on("zoomend",e).on("rotateend",e).on("pitchend",e).on("boxzoomend",e)),createMemo(()=>{var e;a&&(e=a.cameraForBounds(n.viewport.bounds,{padding:n.viewport.padding}),n.onViewportChange({...n.viewport,...e}))}),createEffect(async e=>{var t=n.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(a.stop(),n.transitionType){case"easeTo":a.easeTo(o,{isInternal:!0});case"jumpTo":a.jumpTo(o,{isInternal:!0});default:a.flyTo(o,{isInternal:!0})}return t},n.viewport);let o=0;return createEffect(()=>{n.triggerResize&&(o=0,window.requestAnimationFrame(function e(){o<15&&(o++,window.requestAnimationFrame(e),start(()=>a.resize()))}))}),createComponent(MapContext.Provider,{value:()=>a,get children(){return[memo(()=>n.children),(()=>{const a=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(a):t=a,a.style.setProperty("height","100%"),a.style.setProperty("width","100%"),effect(e=>{var t=n.class||"",o=n.classList;return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),a})()]}})},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().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=(a={},n={})=>{return[...new Set([...Object.keys(a),...Object.keys(n)])].reduce((e,t)=>{var o=a[t];return o!==n[t]&&e.push([t,o]),e},[])},Layer=o=>{const a=useMap(),t=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(o.id)||a().addLayer(o.layer||{...o.style,id:o.id,source:t.id},o.beforeType?a().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style&&a().getSource(t.id)&&a().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])=>a().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])=>a().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)||a().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style.filter!==(null==e?void 0:e.filter)&&a().setFilter(o.id,o.style.filter,{validate:!1}),o.style},o.style),createEffect(e=>{if(void 0!==o.visible&&o.visible!==e&&a().getSource(t.id)&&a().getLayer(o.id))return a().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}),o.visible},o.visible),createEffect(async()=>{o.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(a().isStyleLoaded()||await a().once("styledata"),a().removeFeatureState({source:t.id,sourceLayer:o.style["source-layer"]}),a().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,a]=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),a(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=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(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),createEffect(()=>a.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const a=useMap();return onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().addImage(o.id,t)}):a().hasImage(o.id)||a().addImage(o.id,o.image,o.options)}),onCleanup(()=>a().hasImage(o.id)&&a().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().updateImage(o.id,t)}):a().hasImage(o.id)&&a().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/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":["import {\n createEffect,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\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'\n\nexport type Viewport = {\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: number\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[]\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 let containerRef: HTMLElement\n\n onCleanup(() => map.remove())\n\n onMount(() => {\n map = new mapboxgl.Map({\n ...props.options,\n container: mapRef,\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 map.container = containerRef\n })\n\n createEffect(\n () =>\n props.onMouseMove &&\n map.on('mousemove', event => props.onMouseMove(event.lngLat))\n )\n\n const _onViewportChange = 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 createEffect(\n () =>\n props.onViewportChange &&\n map\n .on('dragend', _onViewportChange)\n .on('moveend', _onViewportChange)\n .on('zoomend', _onViewportChange)\n .on('rotateend', _onViewportChange)\n .on('pitchend', _onViewportChange)\n .on('boxzoomend', _onViewportChange)\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 <main ref={containerRef} style={{ height: '100%', width: '100%' }}>\n {props.children}\n <div\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}></div>\n </main>\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().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().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().hasImage(props.id) && map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","containerRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","createEffect","onMouseMove","on","event","lngLat","_onViewportChange","evt","isInternal","getCenter","getZoom","getPitch","getBearing","onViewportChange","prev","camera","cameraForBounds","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","style","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/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":["import {\n createEffect,\n createMemo,\n onMount,\n onCleanup,\n createContext,\n useContext,\n Component,\n useTransition,\n} from 'solid-js'\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'\n\nexport type Viewport = {\n center?: LngLatLike\n bounds?: LngLatBounds\n zoom?: number\n pitch?: number\n bearing?: number\n padding?: number\n}\n\nexport type TransitionType = 'flyTo' | 'easeTo' | 'jumpTo'\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?: TransitionType\n onMouseMove?: (event: MapMouseEvent) => void\n onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n let map: MapboxMap\n let mapRef: HTMLDivElement\n let containerRef: HTMLElement\n\n onCleanup(() => map.remove())\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 map.container = containerRef\n })\n\n createEffect(() => map.on('mousemove', evt => props.onMouseMove(evt.lngLat)))\n\n createMemo(() => map && map.setStyle(props.options.style))\n\n const _onViewportChange = 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 createEffect(\n () =>\n props.onViewportChange &&\n map\n .on('dragend', _onViewportChange)\n .on('moveend', _onViewportChange)\n .on('zoomend', _onViewportChange)\n .on('rotateend', _onViewportChange)\n .on('pitchend', _onViewportChange)\n .on('boxzoomend', _onViewportChange)\n )\n\n createMemo(() => {\n if (map) {\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 })\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 <main\n ref={mapRef}\n class={props.class || ''}\n classList={props.classList}\n style={{ height: '100%', width: '100%' }}></main>\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().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().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().hasImage(props.id) && map().updateImage(props.id, props.image)\n }\n })\n\n return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","containerRef","createEffect","on","evt","onMouseMove","lngLat","createMemo","setStyle","style","_onViewportChange","isInternal","getCenter","getZoom","getPitch","getBearing","camera","cameraForBounds","prev","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","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":"8RA6BM,CAACA,QAASC,OAASC,gBAEnBC,WAAaC,gBACbC,OAAS,IAAMC,WAAWH,YAE1BI,MAYDC,QACCC,EACAC,EAGJC,UAAU,IAAMF,EAAIG,UAEpBC,QAAQ,KACNJ,EAAM,IAAIK,SAASC,IAAI,IAClBP,EAAMQ,QACTC,UAAWP,EACXQ,YAAaV,EAAMW,iBACnBC,OAAQZ,EAAMa,SAASD,OACvBE,OAAQd,EAAMa,SAASC,OACvBC,KAAMf,EAAMa,SAASE,MAAQ,KAC7BC,MAAOhB,EAAMa,SAASG,OAAS,KAC/BC,QAASjB,EAAMa,SAASI,SAAW,KACnCC,iBAAkB,CAAEC,QAASnB,EAAMa,SAASM,WAG9ClB,EAAIQ,eAjBFW,IAoBJC,aAAa,IAAMpB,EAAIqB,GAAG,YAAaC,GAAOvB,EAAMwB,YAAYD,EAAIE,UAEpEC,WAAW,IAAMzB,GAAOA,EAAI0B,SAAS3B,EAAMQ,QAAQoB,cAE7CC,EAAoBN,IACpBA,EAAIO,aACFjB,EAAqB,CACzBC,OAAQb,EAAI8B,YACZhB,KAAMd,EAAI+B,UACVhB,MAAOf,EAAIgC,WACXhB,QAAShB,EAAIiC,aACbf,QAASnB,EAAMa,SAASM,QACxBP,OAAQZ,EAAMa,SAASD,QAEzBZ,EAAMW,iBAAiBE,KAGzBQ,aACE,IACErB,EAAMW,kBACNV,EACGqB,GAAG,UAAWO,GACdP,GAAG,UAAWO,GACdP,GAAG,UAAWO,GACdP,GAAG,YAAaO,GAChBP,GAAG,WAAYO,GACfP,GAAG,aAAcO,IAGxBH,WAAW,SAEDS,EADJlC,IACIkC,EAASlC,EAAImC,gBAAgBpC,EAAMa,SAASD,OAAQ,CACxDO,QAASnB,EAAMa,SAASM,UAE1BnB,EAAMW,iBAAiB,IAClBX,EAAMa,YACNsB,OAkBTd,aAAoBgB,MAAAA,QACZC,EAAetC,EAAMa,SACrB0B,EAAgB,IAChBD,EAAGvB,MAAQsB,EAAKtB,MAAQ,CAAEA,KAAMuB,EAAGvB,SACnCuB,EAAGnB,SAAWkB,EAAKlB,SAAW,CAAEA,QAASmB,EAAGnB,YAC5CmB,EAAGrB,SAAWoB,EAAKpB,SAAW,CAAEA,QAASqB,EAAGrB,YAC5CqB,EAAGtB,OAASqB,EAAKrB,OAAS,CAAEA,MAAOsB,EAAGtB,UACtCsB,EAAGxB,QAAUuB,EAAKvB,QAAU,CAC9BA,OAAQwB,EAAGxB,OAAO0B,IAAM,CAACF,EAAGxB,OAAO0B,IAAKF,EAAGxB,OAAO2B,KAAOH,EAAGxB,YAG5D4B,OAAOC,KAAKJ,GAAKK,cACnB3C,EAAI4C,OACI7C,EAAM8C,oBACP,SACH7C,EAAI8C,OAAOR,EAAK,CAAET,YAAY,QAC3B,SACH7B,EAAI+C,OAAOT,EAAK,CAAET,YAAY,YAE9B7B,EAAIgD,MAAMV,EAAK,CAAET,YAAY,WAG5BQ,GACNtC,EAAMa,cAELqC,EAAQ,SAEZ7B,aAAa,KACPrB,EAAMmD,gBACRD,EAAQ,EACRE,OAAOC,sBAAsB,SAASC,IAChCJ,EAAQ,KACVA,IACAE,OAAOC,sBAAsBC,GAC7B7D,MAAM,IAAMQ,EAAIsD,gCAOrB5D,WAAW6D,UAASC,MAAO,IAAMxD,iCAC/BD,EAAM0D,iDAEAxD,kCAAAA,8FACEF,EAAM2D,OAAS,KACX3D,EAAM4D,uHCzJnBC,cAAgBjE,gBAEhBkE,UAAY,IAAchE,WAAW+D,eAErCE,gBAGD/D,UACGC,EAAiBJ,gBACvBG,EAAMgE,GAAKhE,EAAMgE,IAAMC,iBAEvB5D,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC3CnE,IAAMoE,UAAUrE,EAAMgE,KAAO/D,IAAMqE,UAAUtE,EAAMgE,GAAIhE,EAAMuE,UAIhEpE,UAAU,KACRF,IACGuE,WACAC,OAAOC,QACNC,GAASA,EAAMJ,SAAWvE,EAAMgE,IAAM/D,IAAM2E,YAAYD,EAAMX,KAElE/D,IAAMoE,UAAUrE,EAAMgE,KAAO/D,IAAM4E,aAAa7E,EAAMgE,MAIxD3C,aAAa6C,WACe,YAAtBlE,EAAMuE,OAAOO,MAAuB9E,EAAMuE,OAAOQ,OAErD9E,IAAMoE,UAAUrE,EAAMgE,KACpB/D,IAAMoE,UAAUrE,EAAMgE,IAAIgB,QAAQhF,EAAMuE,OAAOQ,wBAIhDlB,cAAcL,4BAAgB,CAAEQ,GAAIhE,EAAMgE,2BACxChE,EAAM0D,aCzCPuB,KAAO,CACXC,EAA+B,GAC/BC,EAAgC,YAGzB,IADM,IAAIC,IAAI,IAAI1C,OAAOC,KAAKuC,MAAcxC,OAAOC,KAAKwC,MAC9CE,OAAO,CAACC,EAAKC,SACtB9B,EAAQyB,EAASK,UACnB9B,IAAU0B,EAAUI,IACtBD,EAAIE,KAAK,CAACD,EAAK9B,IAEV6B,GACN,KAGCG,MAoBDzF,UACGC,EAAiBJ,SACjB0E,EAA8BT,mBACpC9D,EAAMgE,GAAKhE,EAAMgE,IAAMC,iBAEvB5D,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAExCnE,IAAMyF,SAAS1F,EAAMgE,KAEzB/D,IAAM0F,SACJ3F,EAAM2E,OAAS,IACV3E,EAAM4B,MACToC,GAAIhE,EAAMgE,GACVO,OAAQA,EAAOP,IAEjBhE,EAAM4F,WACF3F,IACGuE,WACAC,OAAOoB,KAAKC,GAAKA,EAAEhB,OAAS9E,EAAM4F,YAAY5B,GACjDhE,EAAM+F,YAKd1E,aAAcgB,OAETrC,EAAM4B,OACN3B,IAAMoE,UAAUE,EAAOP,KACvB/D,IAAMyF,SAAS1F,EAAMgE,WAIpBhE,EAAM4B,MAAMoE,UAAW3D,MAAAA,SAAAA,EAAM2D,SAC/Bf,KAAKjF,EAAM4B,MAAMoE,OAAQ3D,MAAAA,SAAAA,EAAM2D,QAAQtB,QAAQ,CAAA,CAAEa,EAAK9B,KACpDxD,IAAMgG,kBAAkBjG,EAAMgE,GAAIuB,EAAK9B,EAAO,CAAEyC,UAAU,KAG1DlG,EAAM4B,MAAMuE,SAAU9D,MAAAA,SAAAA,EAAM8D,QAC9BlB,KAAKjF,EAAM4B,MAAMuE,MAAO9D,MAAAA,SAAAA,EAAM8D,OAAOzB,QAAQ,CAAA,CAAEa,EAAK9B,KAClDxD,IAAMmG,iBAAiBpG,EAAMgE,GAAIuB,EAAK9B,EAAO,CAAEyC,UAAU,KAI3DlG,EAAM4B,MAAMyE,WAAYhE,MAAAA,SAAAA,EAAMgE,UAC9BrG,EAAM4B,MAAM0E,WAAYjE,MAAAA,SAAAA,EAAMiE,UAE9BrG,IAAMsG,kBACJvG,EAAMgE,GACNhE,EAAM4B,MAAMyE,QACZrG,EAAM4B,MAAM0E,SAGZtG,EAAM4B,MAAM4E,UAAWnE,MAAAA,SAAAA,EAAMmE,SAC/BvG,IAAMwG,UAAUzG,EAAMgE,GAAIhE,EAAM4B,MAAM4E,OAAQ,CAAEN,UAAU,IAErDlG,EAAM4B,OACZ5B,EAAM4B,OAGTP,aAAcgB,YAEQqE,IAAlB1G,EAAM2G,SACN3G,EAAM2G,UAAYtE,GACjBpC,IAAMoE,UAAUE,EAAOP,KACvB/D,IAAMyF,SAAS1F,EAAMgE,WAIxB/D,IAAMgG,kBACJjG,EAAMgE,GACN,aACAhE,EAAM2G,QAAU,UAAY,OAC5B,CAAET,UAAU,IAEPlG,EAAM2G,SACZ3G,EAAM2G,SAGTtF,aAAa6C,UACNlE,EAAMwG,SAEVvG,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMwG,UAAUzG,EAAMgE,GAAIhE,EAAMwG,WAIlCnF,aAAa6C,UACNlE,EAAM4G,cAAiB5G,EAAM4G,aAAa5C,KAE9C/D,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAE5CnE,IAAM4G,mBAAmB,CACvBtC,OAAQA,EAAOP,GACf8C,YAAa9G,EAAM4B,MAAM,kBAE3B3B,IAAM8G,gBACJ,CACExC,OAAQA,EAAOP,GACf8C,YAAa9G,EAAM4B,MAAM,gBACzBoC,GAAIhE,EAAM4G,aAAa5C,IAEzBhE,EAAM4G,aAAaI,UAIhBhH,EAAM0D,UClJTuD,IAGDjH,UACGC,EAAiBJ,gBAEvBQ,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMiH,OAAOlH,EAAM4B,SAGrBzB,UAAU,IAAMF,IAAMiH,OAAO,OAG7B7F,aAAa6C,eACWwC,IAAlB1G,EAAM2G,UAET1G,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMiH,OAAOlH,EAAM2G,QAAU3G,EAAM4B,MAAQ,SAGtC5B,EAAM0D,UCrBTyD,IAGDnH,UACGC,EAAiBJ,SACjBuH,EAAU,cAEhB/G,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC3CnE,IAAMyF,SAAS0B,IAAYnH,IAAM0F,SAAS,IAAK3F,EAAM4B,MAAOoC,GAAIoD,MAInEjH,UAAU,IAAMF,IAAMyF,SAAS0B,IAAYnH,IAAM2E,YAAYwC,IAG7D/F,aAAa6C,eACWwC,IAAlB1G,EAAM2G,UAET1G,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMgG,kBACJmB,EACA,aACApH,EAAM2G,QAAU,UAAY,WAIzB3G,EAAM0D,UCvBT2D,QAGDrH,UACGC,EAAiBJ,SACjB0E,EAA8BT,mBAGpCzD,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMqH,WAAW,IAAKtH,EAAM4B,MAAO2C,OAAQA,EAAOP,OAIpD7D,UAAU,IAAMF,IAAMqH,WAAW,OAGjCjG,aAAa6C,eACWwC,IAAlB1G,EAAM2G,UAET1G,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMqH,WAAWtH,EAAM2G,QAAU3G,EAAM4B,MAAQ,SAG1C5B,EAAM0D,UCvBT6D,QAgBDvH,UACGC,EAAiBJ,SACjB,CAAC2H,EAASC,GAAcC,aAAa,aAE3CrH,QAAQ6D,cACFsD,SAEIxH,EAAM8E,UACP,aACH0C,EAAU,IAAIlH,SAASqH,kBAAkB3H,EAAMQ,mBAE5C,QACHgH,EAAU,IAAIlH,SAASsH,aAAa5H,EAAMQ,mBAEvC,cACHgH,EAAU,IAAIlH,SAASuH,mBAAmB7H,EAAMQ,mBAE7C,aACHgH,EAAU,IAAIlH,SAASwH,kBACrB9H,EAAMQ,SAAW,CAAEC,UAAWR,IAAMQ,sBAGnC,YACH+G,EAAU,IAAIlH,SAASyH,iBAAiB/H,EAAMQ,SAiBlDgH,GAAWvH,IAAM+H,WAAWR,EAASxH,EAAMiI,UAC3CR,EAAWD,KAGbrH,UAAU,IAAMF,IAAMiI,cAAcV,MAE7BxH,EAAM0D,6CCjETyE,OAGDnI,UACGC,EAAiBJ,aACnBuI,EAAS,YAGb/H,QAAQ6D,gBACNkE,EAAS,IAAI9H,SAAS6H,OAAOnI,EAAMQ,SAChC6H,UAAUrI,EAAMsI,QAChBC,SACCvI,EAAM0D,UACF,IAAIpD,SAASkI,OAAQC,qDAAoBzI,EAAM0D,cAC/C,MAELgF,MAAMzI,OAGXE,UAAU,IAAMiI,EAAOhI,UAGvBiB,aAAa,IAAM+G,EAAOC,UAAUrI,EAAMsI,8CCtBtCE,MAGDxI,UACGC,EAAiBJ,aACnB8I,EAAQ,YAGZtI,QAAQ6D,gBACNyE,EAAQ,IAAIrI,SAASkI,MAAMxI,EAAMQ,SAC9B6H,UAAUrI,EAAMsI,QAChBG,mDAAoBzI,EAAM0D,cAC1BgF,MAAMzI,OAGXE,UAAU,IAAMwI,EAAMvI,UAGtBiB,aAAa,IAAMsH,EAAMN,UAAUrI,EAAMsI,SAGzCjH,aAAa,IAAMsH,EAAMF,mEAAoBzI,EAAM0D,sBCpB/CkF,MAUD5I,UACGC,EAAiBJ,gBAEvBQ,QAAQ6D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aACxCpE,EAAM6I,IACR5I,IAAM6I,UAAU9I,EAAM6I,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChB9I,IAAMgJ,SAASjJ,EAAMgE,KAAO/D,IAAMiJ,SAASlJ,EAAMgE,GAAIgF,KAGvD/I,IAAMgJ,SAASjJ,EAAMgE,KACpB/D,IAAMiJ,SAASlJ,EAAMgE,GAAIhE,EAAMgJ,MAAOhJ,EAAMQ,WAIlDL,UAAU,IAAMF,IAAMgJ,SAASjJ,EAAMgE,KAAO/D,IAAMkJ,YAAYnJ,EAAMgE,KAGpE3C,aAAa6C,UACPlE,EAAMgJ,OAAShJ,EAAM6I,MAErB7I,EAAM6I,IACR5I,IAAM6I,UAAU9I,EAAM6I,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChB9I,IAAMgJ,SAASjJ,EAAMgE,KAAO/D,IAAMmJ,YAAYpJ,EAAMgE,GAAIgF,KAG3D/I,IAAMgJ,SAASjJ,EAAMgE,KAAO/D,IAAMmJ,YAAYpJ,EAAMgE,GAAIhE,EAAMgJ"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { createEffect, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
|
|
1
|
+
import { createEffect, createMemo, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
|
|
2
2
|
import mapboxgl from 'mapbox-gl';
|
|
3
3
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
4
4
|
const [pending, start] = useTransition();
|
|
@@ -13,6 +13,7 @@ const MapGL = props => {
|
|
|
13
13
|
map = new mapboxgl.Map({
|
|
14
14
|
...props.options,
|
|
15
15
|
container: mapRef,
|
|
16
|
+
interactive: props.onViewportChange,
|
|
16
17
|
bounds: props.viewport.bounds,
|
|
17
18
|
center: props.viewport.center,
|
|
18
19
|
zoom: props.viewport.zoom || null,
|
|
@@ -22,8 +23,8 @@ const MapGL = props => {
|
|
|
22
23
|
});
|
|
23
24
|
map.container = containerRef;
|
|
24
25
|
});
|
|
25
|
-
createEffect(() => props.onMouseMove
|
|
26
|
-
|
|
26
|
+
createEffect(() => map.on('mousemove', evt => props.onMouseMove(evt.lngLat)));
|
|
27
|
+
createMemo(() => map && map.setStyle(props.options.style));
|
|
27
28
|
const _onViewportChange = evt => {
|
|
28
29
|
if (evt.isInternal)
|
|
29
30
|
return;
|
|
@@ -45,8 +46,8 @@ const MapGL = props => {
|
|
|
45
46
|
.on('rotateend', _onViewportChange)
|
|
46
47
|
.on('pitchend', _onViewportChange)
|
|
47
48
|
.on('boxzoomend', _onViewportChange));
|
|
48
|
-
|
|
49
|
-
if (
|
|
49
|
+
createMemo(() => {
|
|
50
|
+
if (map) {
|
|
50
51
|
const camera = map.cameraForBounds(props.viewport.bounds, {
|
|
51
52
|
padding: props.viewport.padding,
|
|
52
53
|
});
|
|
@@ -55,8 +56,19 @@ const MapGL = props => {
|
|
|
55
56
|
...camera,
|
|
56
57
|
});
|
|
57
58
|
}
|
|
58
|
-
|
|
59
|
-
|
|
59
|
+
});
|
|
60
|
+
// createEffect(prev => {
|
|
61
|
+
// if (props.viewport.bounds != prev) {
|
|
62
|
+
// const camera = map.cameraForBounds(props.viewport.bounds, {
|
|
63
|
+
// padding: props.viewport.padding,
|
|
64
|
+
// })
|
|
65
|
+
// props.onViewportChange({
|
|
66
|
+
// ...props.viewport,
|
|
67
|
+
// ...camera,
|
|
68
|
+
// })
|
|
69
|
+
// }
|
|
70
|
+
// return props.viewport.bounds
|
|
71
|
+
// }, props.viewport.bounds)
|
|
60
72
|
createEffect(async (prev) => {
|
|
61
73
|
const vp = props.viewport;
|
|
62
74
|
const nvp = {
|
|
@@ -95,10 +107,8 @@ const MapGL = props => {
|
|
|
95
107
|
}
|
|
96
108
|
});
|
|
97
109
|
return (<MapContext.Provider value={() => map}>
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
<div ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%' }}></div>
|
|
101
|
-
</main>
|
|
110
|
+
{props.children}
|
|
111
|
+
<main ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%' }}></main>
|
|
102
112
|
</MapContext.Provider>);
|
|
103
113
|
};
|
|
104
114
|
export { MapGL as default, useMap };
|
|
@@ -12,6 +12,7 @@ export declare type Viewport = {
|
|
|
12
12
|
bearing?: number;
|
|
13
13
|
padding?: number;
|
|
14
14
|
};
|
|
15
|
+
export declare type TransitionType = 'flyTo' | 'easeTo' | 'jumpTo';
|
|
15
16
|
declare const useMap: () => MapboxMap;
|
|
16
17
|
declare const MapGL: Component<{
|
|
17
18
|
class?: string;
|
|
@@ -20,9 +21,9 @@ declare const MapGL: Component<{
|
|
|
20
21
|
};
|
|
21
22
|
viewport?: Viewport;
|
|
22
23
|
options?: MapboxOptions;
|
|
23
|
-
children?: Element[];
|
|
24
|
+
children?: Element | Element[];
|
|
24
25
|
triggerResize?: boolean;
|
|
25
|
-
transitionType?:
|
|
26
|
+
transitionType?: TransitionType;
|
|
26
27
|
onMouseMove?: (event: MapMouseEvent) => void;
|
|
27
28
|
onViewportChange?: (viewport: Viewport) => void;
|
|
28
29
|
}>;
|
package/dist/types/index.d.ts
CHANGED
|
@@ -9,3 +9,4 @@ export { default as Marker } from './components/Marker';
|
|
|
9
9
|
export { default as Popup } from './components/Popup';
|
|
10
10
|
export { default as Image } from './components/Image';
|
|
11
11
|
export type { Viewport } from './components/MapGL';
|
|
12
|
+
export type { TransitionType } from './components/MapGL';
|
package/package.json
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "1.1.
|
|
2
|
+
"version": "1.1.10",
|
|
3
3
|
"name": "solid-map-gl",
|
|
4
4
|
"description": "Solid Component Library for Mapbox GL JS",
|
|
5
5
|
"author": "kaihuebner",
|
|
@@ -43,7 +43,7 @@
|
|
|
43
43
|
},
|
|
44
44
|
"devDependencies": {
|
|
45
45
|
"@types/mapbox-gl": "^2.6.1",
|
|
46
|
-
"rollup": "^2.67.
|
|
46
|
+
"rollup": "^2.67.3",
|
|
47
47
|
"rollup-plugin-import-css": "^3.0.2",
|
|
48
48
|
"rollup-plugin-uglify": "^6.0.4",
|
|
49
49
|
"rollup-preset-solid": "^1.2.2",
|