solid-map-gl 1.1.24 → 1.1.27

package/LICENSE

@@ -1,6 +1,6 @@
 MIT License
 
-Copyright (c) 2021 GIShub
+Copyright (c) 2022 GIShub
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

package/README.md

@@ -2,11 +2,12 @@
 
 # Solid Mapbox GL JS
 
-[![npm](https://badgen.net/npm/v/solid-map-gl)
+[![npm](https://badgen.net/npm/v/solid-map-gl?icon=npm&label)
 ![downloads](https://badgen.net/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)
 [![licence](https://badgen.net/badge/license/MIT/blue)](./LICENSE)
-[![zip](https://badgen.net/bundlephobia/minzip/solid-map-gl)
-![treeshaking](https://badgen.net/bundlephobia/tree-shaking/solid-map-gl)](https://bundlephobia.com/package/solid-map-gl)
+[![size](https://badgen.net/badge/color/113%20kB/blue?label=Unpacked%20Size)
+![treeshaking](https://badgen.net/badge/color/supported/green?label=tree%20shaking)](https://bundlephobia.com/package/solid-map-gl)
+![types](https://badgen.net/npm/types/solid-map-gl?icon=typescript&label)
 
 [Solid](https://www.solidjs.com/) Component Library for [Mapbox GL JS.](https://github.com/mapbox/mapbox-gl-js) Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)
 
@@ -36,7 +37,7 @@ yarn add solid-map-gl
 npm install --save solid-map-gl
 ```
 
-### Optional Dependencies
+<!-- ### Optional Dependencies
 
 If you want to use `LanguageControl` and `TrafficControl`:
 
@@ -46,7 +47,7 @@ yarn add @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
 
 ```shell
 npm install --save @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
-```
+``` -->
 
 ## Components
 
@@ -73,15 +74,16 @@ By default, `MapGL` component renders in a static mode. That means that the user
 
 ```jsx
 import MapGL from 'solid-map-gl'
-;<MapGL
+<MapGL
   options={{
-    accessToken: { MAPBOX_ACCESS_TOKEN },
+    accessToken: MAPBOX_ACCESS_TOKEN,
     style: 'mapbox://styles/mapbox/light-v10',
   }}
   viewport={{
     center: [-122.41, 37.78],
     zoom: 11,
-  }}></MapGL>
+  }}>
+</MapGL>
 ```
 
 ### Interactive Map
@@ -90,7 +92,8 @@ In most cases, you will want the user to interact with the map. To do this, you
 
 ```jsx
 import { createSignal } from 'solid-js'
-import MapGL, { Viewport } from 'solid-map-gl'
+import MapGL from 'solid-map-gl'
+import type { Viewport } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
     center: [-122.41, 37.78],
@@ -99,7 +102,7 @@ const [viewport, setViewport] = createSignal({
 
 <MapGL
     options={{
-        accessToken: { MAPBOX_ACCESS_TOKEN },
+        accessToken: MAPBOX_ACCESS_TOKEN,
         style: 'mapbox://styles/mapbox/light-v10'
     }}
     viewport={viewport()}
@@ -120,13 +123,13 @@ import MapGL, { Source, Layer } from 'solid-map-gl';
 
 <MapGL
     options={{
-        accessToken: { MAPBOX_ACCESS_TOKEN },
+        accessToken: MAPBOX_ACCESS_TOKEN,
         style: 'mapbox://styles/mapbox/light-v10'
     }}>
     <Source
         source={{
         type: 'vector',
-        url: 'mapbox://mapbox.mapbox-terrain-v2'
+        url: 'mapbox://mapbox.mapbox-terrain-v2',
     }}>
         <Layer style={{
             type: 'line',
@@ -147,6 +150,7 @@ To draw a GeoJSON on a map, add `Source` with the `type` property set to `geojso
 ```jsx
 import { createSignal } from 'solid-js'
 import MapGL, { Source, Layer } from 'solid-map-gl'
+import type { Viewport } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
   center: [-122.486052, 37.830348],
@@ -183,9 +187,9 @@ const data = {
   },
 }
 
-;<MapGL
+<MapGL
   options={{
-    accessToken: { MAPBOX_ACCESS_TOKEN },
+    accessToken: MAPBOX_ACCESS_TOKEN,
     style: 'mapbox://styles/mapbox/light-v10',
   }}
   viewport={viewport()}
@@ -223,6 +227,7 @@ import { createSignal } from 'solid-js'
 import MapGL, { Source, Layer } from 'solid-map-gl'
 import { MapboxLayer } from '@deck.gl/mapbox'
 import { ScatterplotLayer } from '@deck.gl/layers'
+import type { Viewport } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
   center: [-74.5, 40],
@@ -238,9 +243,9 @@ const myDeckLayer = new MapboxLayer({
   getColor: [255, 0, 0],
 })
 
-;<MapGL
+<MapGL
   options={{
-    accessToken: { MAPBOX_ACCESS_TOKEN },
+    accessToken: MAPBOX_ACCESS_TOKEN,
     style: 'mapbox://styles/mapbox/light-v10',
   }}
   viewport={viewport()}
@@ -257,4 +262,5 @@ const myDeckLayer = new MapboxLayer({
 - [x] Minify bundle & reduce size
 - [x] Add basemap switching
 - [x] Include event handling
-- [ ] Add edit functionality
+- [x] Sync Maps
+- [ ] Add draw functionality

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{template,createComponent,memo,effect,classList,style,insert}from"solid-js/web";import{useTransition,createSignal,createContext,useContext,createUniqueId,onMount,onCleanup,createEffect,untrack}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","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],_tmpl$$2=template("<section></section>",2),[pending,start]=useTransition(),[transitionType,setTransitionType]=createSignal("flyTo"),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=r=>{let n,t,o=(r.id=r.id||createUniqueId(),onMount(()=>{n=new mapboxgl.Map({...r.options,container:t,interactive:!!r.onViewportChange,bounds:r.viewport.bounds,center:r.viewport.center,zoom:r.viewport.zoom||null,pitch:r.viewport.pitch||null,bearing:r.viewport.bearing||null,fitBoundsOptions:{padding:r.viewport.padding}})}),onCleanup(()=>n.remove()),createEffect(()=>mapEvents.forEach(t=>{if(r[t]){const e=t.slice(2).toLowerCase(),o=e=>r[t](e);n.on(e,o),onCleanup(()=>n.off(e,o))}})),createEffect(()=>n.showTileBoundaries=r.showTileBoundaries),createEffect(()=>n.showTerrainWireframe=r.showTerrainWireframe),createEffect(()=>n.showPadding=r.showPadding),createEffect(()=>n.showCollisionBoxes=r.showCollisionBoxes),createEffect(()=>n.showOverdrawInspector=r.showOverdrawInspector),createEffect(()=>n.getCanvas().style.cursor=r.cursorStyle),createEffect(e=>{e!==r.options.style&&n.setStyle(r.options.style)},r.options.style),createEffect(e=>{e!==r.options.projection&&n.setProjection(r.options.projection)},r.options.projection),createEffect(()=>setTransitionType(r.transitionType)),createEffect(()=>{const t={id:null,center:n.getCenter(),zoom:n.getZoom(),pitch:n.getPitch(),bearing:n.getBearing(),padding:r.viewport.padding,bounds:r.viewport.bounds},e=e=>{e.originalEvent&&r.onViewportChange({...t,id:r.id}),setTransitionType("jumpTo")},o=e=>{e.originalEvent&&r.onViewportChange(t),setTransitionType(r.transitionType)};n.on("move",e).on("moveend",o),onCleanup(()=>n.off("move",e).off("moveend",o))}),createEffect(e=>(r.viewport.bounds!=e&&r.onViewportChange({...r.viewport,...n.cameraForBounds(r.viewport.bounds,{padding:r.viewport.padding})}),r.viewport.bounds),r.viewport.bounds),createEffect(()=>{if(r.sync&&r.id!==r.viewport.id){var e={...r.viewport,padding:r.viewport.padding||0};switch(untrack(transitionType)){case"easeTo":n.stop().easeTo(e);case"jumpTo":n.stop().jumpTo(e);default:n.stop().flyTo(e)}}}),0);return createEffect(()=>{r.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(()=>r.children),(()=>{const a=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(a):t=a,effect(e=>{var t=r.class||"",o=r.classList,n={height:"100%",width:"100%",...r.style};return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e._v$3=style(a,n,e._v$3),e},{_v$:void 0,_v$2:void 0,_v$3: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().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=n=>{const a=useMap(),t=useSource();return n.id=n.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(n.id)||a().addLayer(n.layer||{...n.style,id:n.id,source:t.id},n.beforeType?a().getStyle().layers.find(e=>e.type===n.beforeType).id:n.beforeId)}),onCleanup(()=>a().removeLayer(n.id)),createEffect(()=>layerEvents.forEach(t=>{if(n[t]){const e=t.slice(2).toLowerCase(),o=e=>n[t](e);a().on(e,n.id,o),onCleanup(()=>a().off(e,n.id,o))}})),createEffect(e=>{if(n.style&&a().style&&a().getSource(t.id)&&a().getLayer(n.id))return n.style.layout!==(null==e?void 0:e.layout)&&diff(n.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>a().setLayoutProperty(n.id,e,t,{validate:!1})),n.style.paint!==(null==e?void 0:e.paint)&&diff(n.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>a().setPaintProperty(n.id,e,t,{validate:!1})),n.style.minzoom===(null==e?void 0:e.minzoom)&&n.style.maxzoom===(null==e?void 0:e.maxzoom)||a().setLayerZoomRange(n.id,n.style.minzoom,n.style.maxzoom),n.style.filter!==(null==e?void 0:e.filter)&&a().setFilter(n.id,n.style.filter,{validate:!1}),n.style},n.style),createEffect(e=>{if(void 0!==n.visible&&n.visible!==e&&a().getSource(t.id)&&a().getLayer(n.id))return a().setLayoutProperty(n.id,"visibility",n.visible?"visible":"none",{validate:!1}),n.visible},n.visible),createEffect(async()=>{n.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(n.id,n.filter))}),createEffect(async()=>{n.featureState&&n.featureState.id&&(a().isStyleLoaded()||await a().once("styledata"),a().removeFeatureState({source:t.id,sourceLayer:n.style["source-layer"]}),a().setFeatureState({source:t.id,sourceLayer:n.style["source-layer"],id:n.featureState.id},n.featureState.state))}),n.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(()=>{var e=((e,t)=>{switch(e){case"navigation":return new mapboxgl.NavigationControl(t);case"scale":return new mapboxgl.ScaleControl(t);case"attribution":return new mapboxgl.AttributionControl(t);case"fullscreen":return new mapboxgl.FullscreenControl(t||{container:o().container});case"geolocate":return new mapboxgl.GeolocateControl(t)}})(t.type,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};
+import{createComponent,insert,effect,classList,style,template}from"solid-js/web";import{useTransition,createSignal,createContext,useContext,createUniqueId,onMount,onCleanup,createEffect,on,untrack}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","onMouseMove","onMouseEnter","onMouseLeave","onClick","onDblClick","onContextMenu","onTouchStart","onTouchEnd","onTouchCancel"],_tmpl$$2=template("<section><div></div></section>",4),[pending,start]=useTransition(),[transitionType,setTransitionType]=createSignal("flyTo"),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=r=>{var e;let a,n,i,t=(r.id=r.id||createUniqueId(),onMount(()=>{var e;(a=new mapboxgl.Map({...r.options,style:(null==(e=r.options)?void 0:e.style)||{version:8,sources:{},layers:[]},container:n,interactive:!!r.onViewportChange,bounds:null==(e=r.viewport)?void 0:e.bounds,center:null==(e=r.viewport)?void 0:e.center,zoom:(null==(e=r.viewport)?void 0:e.zoom)||null,pitch:(null==(e=r.viewport)?void 0:e.pitch)||null,bearing:(null==(e=r.viewport)?void 0:e.bearing)||null,fitBoundsOptions:{padding:null==(e=r.viewport)?void 0:e.padding}})).container=i}),onCleanup(()=>a.remove()),createEffect(()=>mapEvents.forEach(t=>{if(r[t]){const e=t.slice(2).toLowerCase(),o=e=>r[t](e);a.on(e,o),onCleanup(()=>a.off(e,o))}})),createEffect(()=>a.showTileBoundaries=r.showTileBoundaries),createEffect(()=>a.showTerrainWireframe=r.showTerrainWireframe),createEffect(()=>a.showPadding=r.showPadding),createEffect(()=>a.showCollisionBoxes=r.showCollisionBoxes),createEffect(()=>a.showOverdrawInspector=r.showOverdrawInspector),createEffect(()=>a.getCanvas().style.cursor=r.cursorStyle),createEffect(on(()=>r.options.style,()=>{const o=a.getStyle(),t=o.layers.filter(e=>e.id.startsWith("cl-")),n=Object.keys(o.sources).filter(e=>e.startsWith("cl-")).reduce((e,t)=>({...e,[t]:o.sources[t]}),{});a.setStyle(r.options.style),a.once("styledata",()=>{var e=a.getStyle();a.setStyle({...e,sources:{...e.sources,...n},layers:[...e.layers,...t]})})},{defer:!0})),createEffect(on(()=>r.options.projection,()=>a.setProjection(r.options.projection),{defer:!0})),createEffect(()=>setTransitionType(r.transitionType)),createEffect(()=>{var e;const t={id:null,center:a.getCenter(),zoom:a.getZoom(),pitch:a.getPitch(),bearing:a.getBearing(),padding:null==(e=r.viewport)?void 0:e.padding,bounds:null==(e=r.viewport)?void 0:e.bounds},o=e=>{e.originalEvent&&r.onViewportChange({...t,id:r.id}),setTransitionType("jumpTo")},n=e=>{e.originalEvent&&r.onViewportChange(t),setTransitionType(r.transitionType)};a.on("move",o).on("moveend",n),onCleanup(()=>a.off("move",o).off("moveend",n))}),createEffect(e=>{var t;return(null==(t=r.viewport)?void 0:t.bounds)!=e&&r.onViewportChange({...r.viewport,...a.cameraForBounds(null==(t=r.viewport)?void 0:t.bounds,{padding:null==(e=r.viewport)?void 0:e.padding})}),null==(t=r.viewport)?void 0:t.bounds},null==(e=r.viewport)?void 0:e.bounds),createEffect(()=>{var e;if(r.id!==(null==(e=r.viewport)?void 0:e.id)){var t={...r.viewport,padding:(null==(e=r.viewport)?void 0:e.padding)||0};switch(untrack(transitionType)){case"easeTo":a.stop().easeTo(t);case"jumpTo":a.stop().jumpTo(t);default:a.stop().flyTo(t)}}}),0);return createEffect(()=>{r.triggerResize&&(t=0,window.requestAnimationFrame(function e(){t<15&&(t++,window.requestAnimationFrame(e),start(()=>a.resize()))}))}),createComponent(MapContext.Provider,{value:()=>a,get children(){const e=_tmpl$$2.cloneNode(!0),a=e.firstChild,t=i,o=("function"==typeof t?t(e):i=e,e.style.setProperty("height","100%"),e.style.setProperty("width","100%"),insert(e,()=>r.children,a),n);return"function"==typeof o?o(a):n=a,effect(e=>{var t=r.class||"",o=r.classList,n={height:"100%",width:"100%",...r.style};return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e._v$3=style(a,n,e._v$3),e},{_v$:void 0,_v$2:void 0,_v$3:void 0}),e}})},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=n=>{const a=useMap(),t=useSource();return n.id=n.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(n.id)||a().addLayer(n.layer||{...n.style,id:n.id,source:t.id,metadata:{smg:{beforeType:n.beforeType,beforeId:n.beforeId}}},n.beforeType?a().getStyle().layers.find(e=>e.type===n.beforeType).id:n.beforeId)}),onCleanup(()=>a().removeLayer(n.id)),createEffect(()=>layerEvents.forEach(t=>{if(n[t]){const e=t.slice(2).toLowerCase(),o=e=>n[t](e);a().on(e,n.id,o),onCleanup(()=>a().off(e,n.id,o))}})),createEffect(e=>{if(n.style&&a().style&&a().getSource(t.id)&&a().getLayer(n.id))return n.style.layout!==(null==e?void 0:e.layout)&&diff(n.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>a().setLayoutProperty(n.id,e,t,{validate:!1})),n.style.paint!==(null==e?void 0:e.paint)&&diff(n.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>a().setPaintProperty(n.id,e,t,{validate:!1})),n.style.minzoom===(null==e?void 0:e.minzoom)&&n.style.maxzoom===(null==e?void 0:e.maxzoom)||a().setLayerZoomRange(n.id,n.style.minzoom,n.style.maxzoom),n.style.filter!==(null==e?void 0:e.filter)&&a().setFilter(n.id,n.style.filter,{validate:!1}),n.style},n.style),createEffect(e=>{if(void 0!==n.visible&&n.visible!==e&&a().getSource(t.id)&&a().getLayer(n.id))return a().setLayoutProperty(n.id,"visibility",n.visible?"visible":"none",{validate:!1}),n.visible},n.visible),createEffect(async()=>{n.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(n.id,n.filter))}),createEffect(async()=>{n.featureState&&n.featureState.id&&(a().isStyleLoaded()||await a().once("styledata"),a().removeFeatureState({source:t.id,sourceLayer:n.style["source-layer"]}),a().setFeatureState({source:t.id,sourceLayer:n.style["source-layer"],id:n.featureState.id},n.featureState.state))}),n.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=o=>{const n=useMap(),[e,t]=createSignal(null);return onMount(()=>{var e=((e,t)=>{if(o.custom)return new o.custom(t);switch(e){case"navigation":return new mapboxgl.NavigationControl(t);case"scale":return new mapboxgl.ScaleControl(t);case"attribution":return new mapboxgl.AttributionControl(t);case"geolocate":return new mapboxgl.GeolocateControl(t);case"fullscreen":return new mapboxgl.FullscreenControl(t||{container:n().container});default:throw new Error("Unknown control type: "+e)}})(o.type,o.options);e&&n().addControl(e,o.position),t(e)}),onCleanup(()=>n().removeControl(e())),o.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};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +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  'onMouseMove',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onClick',\n  'onDblClick',\n  'onContextMenu',\n  'onTouchStart',\n  'onTouchEnd',\n  'onTouchCancel',\n]\n\nexport { mapEvents, layerEvents }\n","import {\n  createSignal,\n  createEffect,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n  createUniqueId,\n  untrack,\n} from 'solid-js'\nimport { mapEvents } from '../../events'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type { MapboxMap, MapboxOptions } from 'mapbox-gl/src/ui/map'\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'\nimport type { JSX } from 'solid-js'\n\nexport type Viewport = {\n  id?: string\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: PaddingOptions\n}\n\nconst [pending, start] = useTransition()\nconst [transitionType, setTransitionType] = createSignal('flyTo')\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  id?: string\n  style?: JSX.CSSProperties\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  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  sync?: boolean\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLDivElement\n  props.id = props.id || createUniqueId()\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    mapEvents.forEach(item => {\n      if (props[item]) {\n        const event = item.slice(2).toLowerCase()\n        const callback = e => props[item](e)\n        map.on(event, callback)\n        onCleanup(() => map.off(event, callback))\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(prev => {\n    prev !== props.options.style && map.setStyle(props.options.style)\n  }, props.options.style)\n\n  // Update projection\n  createEffect(prev => {\n    prev !== props.options.projection &&\n      map.setProjection(props.options.projection)\n  }, props.options.projection)\n\n  createEffect(() => setTransitionType(props.transitionType))\n\n  // Hook up viewport events\n  createEffect(() => {\n    const viewport = {\n      id: null,\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    const callMove = event => {\n      if (event.originalEvent)\n        props.onViewportChange({ ...viewport, id: props.id })\n      setTransitionType('jumpTo')\n    }\n\n    const callEnd = event => {\n      if (event.originalEvent) props.onViewportChange(viewport)\n      setTransitionType(props.transitionType)\n    }\n\n    map.on('move', callMove).on('moveend', callEnd)\n    onCleanup(() => map.off('move', callMove).off('moveend', callEnd))\n  })\n\n  // Update boundaries\n  createEffect(prev => {\n    if (props.viewport.bounds != prev)\n      props.onViewportChange({\n        ...props.viewport,\n        ...map.cameraForBounds(props.viewport.bounds, {\n          padding: props.viewport.padding,\n        }),\n      })\n    return props.viewport.bounds\n  }, props.viewport.bounds)\n\n  // Update Viewport\n  createEffect(() => {\n    if (!props.sync || props.id === props.viewport.id) return\n    const viewport = { ...props.viewport, padding: props.viewport.padding || 0 }\n    switch (untrack(transitionType)) {\n      case 'easeTo':\n        map.stop().easeTo(viewport)\n      case 'jumpTo':\n        map.stop().jumpTo(viewport)\n      default:\n        map.stop().flyTo(viewport)\n    }\n  })\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%', ...props.style }}></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(() => map().removeLayer(props.id))\n\n  // Hook up events\n  createEffect(() =>\n    layerEvents.forEach(item => {\n      if (props[item]) {\n        const event = item.slice(2).toLowerCase()\n        const callback = e => props[item](e)\n        map().on(event, props.id, callback)\n        onCleanup(() => map().off(event, props.id, callback))\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 } 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\n  const getControl = (type, options) => {\n    switch (type) {\n      case 'navigation':\n        return new mapboxgl.NavigationControl(options)\n      case 'scale':\n        return new mapboxgl.ScaleControl(options)\n      case 'attribution':\n        return new mapboxgl.AttributionControl(options)\n      case 'fullscreen':\n        return new mapboxgl.FullscreenControl(\n          options || { container: map().container }\n        )\n      case 'geolocate':\n        return new mapboxgl.GeolocateControl(options)\n      // case 'language':\n      //   try {\n      //     const MapboxLanguage = require('@mapbox/mapbox-gl-language').default\n      //     return new MapboxLanguage(options)\n      //   } catch (e) {}\n      // case 'traffic':\n      //   try {\n      //     const MapboxTraffic = require('@mapbox/mapbox-gl-traffic').default\n      //     require('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n      //     return new MapboxTraffic(options)\n      //   } catch (e) {}\n    }\n  }\n\n  // Add Control\n  onMount(() => {\n    const control = getControl(props.type, props.options)\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","pending","start","useTransition","transitionType","setTransitionType","createSignal","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","index","id","createUniqueId","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","onCleanup","remove","createEffect","forEach","item","event","slice","toLowerCase","callback","e","on","off","showTileBoundaries","showTerrainWireframe","showPadding","showCollisionBoxes","showOverdrawInspector","getCanvas","style","cursor","cursorStyle","prev","setStyle","projection","setProjection","getCenter","getZoom","getPitch","getBearing","callMove","originalEvent","callEnd","cameraForBounds","sync","untrack","stop","easeTo","jumpTo","flyTo","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","height","width","SourceContext","useSource","SourceComponent","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","Object","keys","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","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","getControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"sPAAA,MAAMA,UAAsB,CAC1B,cACA,YACA,cACA,aACA,cACA,eACA,eACA,aACA,UACA,aACA,gBACA,eACA,aACA,gBACA,UACA,WACA,WACA,cACA,cACA,SACA,YACA,cACA,SACA,YACA,cACA,SACA,YACA,gBACA,WACA,aACA,eACA,UACA,aACA,iBACA,eACA,kBACA,qBACA,yBACA,SACA,WACA,SACA,UACA,SACA,cACA,eACA,gBACA,qBACA,sBACA,uBAGIC,YAAwB,CAC5B,cACA,YACA,cACA,aACA,cACA,eACA,eACA,UACA,aACA,gBACA,eACA,aACA,4DClCI,CAACC,QAASC,OAASC,gBACnB,CAACC,eAAgBC,mBAAqBC,aAAa,SAEnDC,WAAaC,gBACbC,OAAS,IAAMC,WAAWH,YAE1BI,MAqBDC,QACCC,EACAC,EAyGAC,GAxGJH,EAAMI,GAAKJ,EAAMI,IAAMC,iBAEvBC,QAAQ,KACNL,EAAM,IAAIM,SAASC,IAAI,IAClBR,EAAMS,QACTC,UAAWR,EACXS,cAAeX,EAAMY,iBACrBC,OAAQb,EAAMc,SAASD,OACvBE,OAAQf,EAAMc,SAASC,OACvBC,KAAMhB,EAAMc,SAASE,MAAQ,KAC7BC,MAAOjB,EAAMc,SAASG,OAAS,KAC/BC,QAASlB,EAAMc,SAASI,SAAW,KACnCC,iBAAkB,CAAEC,QAASpB,EAAMc,SAASM,aAIhDC,UAAU,IAAMpB,EAAIqB,UAGpBC,aAAa,IACXpC,UAAUqC,QAAQC,OACZzB,EAAMyB,GAAO,OACTC,EAAQD,EAAKE,MAAM,GAAGC,cACtBC,EAAWC,GAAK9B,EAAMyB,GAAMK,GAClC7B,EAAI8B,GAAGL,EAAOG,GACdR,UAAU,IAAMpB,EAAI+B,IAAIN,EAAOG,QAMrCN,aAAa,IAAOtB,EAAIgC,mBAAqBjC,EAAMiC,oBACnDV,aAAa,IAAOtB,EAAIiC,qBAAuBlC,EAAMkC,sBACrDX,aAAa,IAAOtB,EAAIkC,YAAcnC,EAAMmC,aAC5CZ,aAAa,IAAOtB,EAAImC,mBAAqBpC,EAAMoC,oBACnDb,aAAa,IAAOtB,EAAIoC,sBAAwBrC,EAAMqC,uBACtDd,aAAa,IAAOtB,EAAIqC,YAAYC,MAAMC,OAASxC,EAAMyC,aAGzDlB,aAAamB,IACXA,IAAS1C,EAAMS,QAAQ8B,OAAStC,EAAI0C,SAAS3C,EAAMS,QAAQ8B,QAC1DvC,EAAMS,QAAQ8B,OAGjBhB,aAAamB,IACXA,IAAS1C,EAAMS,QAAQmC,YACrB3C,EAAI4C,cAAc7C,EAAMS,QAAQmC,aACjC5C,EAAMS,QAAQmC,YAEjBrB,aAAa,IAAM9B,kBAAkBO,EAAMR,iBAG3C+B,aAAa,WACLT,EAAW,CACfV,GAAI,KACJW,OAAQd,EAAI6C,YACZ9B,KAAMf,EAAI8C,UACV9B,MAAOhB,EAAI+C,WACX9B,QAASjB,EAAIgD,aACb7B,QAASpB,EAAMc,SAASM,QACxBP,OAAQb,EAAMc,SAASD,QAGnBqC,EAAWxB,IACXA,EAAMyB,eACRnD,EAAMY,iBAAiB,IAAKE,EAAUV,GAAIJ,EAAMI,KAClDX,kBAAkB,WAGd2D,EAAU1B,IACVA,EAAMyB,eAAenD,EAAMY,iBAAiBE,GAChDrB,kBAAkBO,EAAMR,iBAG1BS,EAAI8B,GAAG,OAAQmB,GAAUnB,GAAG,UAAWqB,GACvC/B,UAAU,IAAMpB,EAAI+B,IAAI,OAAQkB,GAAUlB,IAAI,UAAWoB,MAI3D7B,aAAamB,IACP1C,EAAMc,SAASD,QAAU6B,GAC3B1C,EAAMY,iBAAiB,IAClBZ,EAAMc,YACNb,EAAIoD,gBAAgBrD,EAAMc,SAASD,OAAQ,CAC5CO,QAASpB,EAAMc,SAASM,YAGvBpB,EAAMc,SAASD,QACrBb,EAAMc,SAASD,QAGlBU,aAAa,QACNvB,EAAMsD,MAAQtD,EAAMI,KAAOJ,EAAMc,SAASV,QACzCU,EAAW,IAAKd,EAAMc,SAAUM,QAASpB,EAAMc,SAASM,SAAW,UACjEmC,QAAQ/D,qBACT,SACHS,EAAIuD,OAAOC,OAAO3C,OACf,SACHb,EAAIuD,OAAOE,OAAO5C,WAElBb,EAAIuD,OAAOG,MAAM7C,OAIX,UAEZS,aAAa,KACPvB,EAAM4D,gBACRzD,EAAQ,EACR0D,OAAOC,sBAAsB,SAASC,IAChC5D,EAAQ,KACVA,IACA0D,OAAOC,sBAAsBC,GAC7BzE,MAAM,IAAMW,EAAI+D,gCAOrBrE,WAAWsE,UAASC,MAAO,IAAMjE,iCAC/BD,EAAMmE,iDAEAjE,kCAAAA,qBACEF,EAAMoE,OAAS,KACXpE,EAAMqE,YACV,CAAEC,OAAQ,OAAQC,MAAO,UAAWvE,EAAMuC,yJC3KnDiC,cAAgB5E,gBAEhB6E,UAAY,IAAc3E,WAAW0E,eAErCE,gBAGD1E,UACGC,EAAiBJ,gBACvBG,EAAMI,GAAKJ,EAAMI,IAAMC,iBAEvBC,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC3C5E,IAAM6E,UAAU9E,EAAMI,KAAOH,IAAM8E,UAAU/E,EAAMI,GAAIJ,EAAMgF,UAIhE3D,UAAU,KACRpB,IACGgF,WACAC,OAAO1D,QACN2D,GAASA,EAAMH,SAAWhF,EAAMI,IAAMH,IAAMmF,YAAYD,EAAM/E,KAElEH,IAAM6E,UAAU9E,EAAMI,KAAOH,IAAMoF,aAAarF,EAAMI,MAIxDmB,aAAaoD,WACe,YAAtB3E,EAAMgF,OAAOM,MAAuBtF,EAAMgF,OAAOO,OAErDtF,IAAMsC,OACJtC,IAAM6E,UAAU9E,EAAMI,KACtBH,IAAM6E,UAAU9E,EAAMI,IAAIoF,QAAQxF,EAAMgF,OAAOO,wBAIhDf,cAAcP,4BAAgB,CAAE7D,GAAIJ,EAAMI,2BACxCJ,EAAMmE,aCnCPsB,KAAO,CACXC,EAA+B,GAC/BC,EAAgC,YAGzB,IADM,IAAIC,IAAI,IAAIC,OAAOC,KAAKJ,MAAcG,OAAOC,KAAKH,MAC9CI,OAAO,CAACC,EAAKC,SACtB/B,EAAQwB,EAASO,UACnB/B,IAAUyB,EAAUM,IACtBD,EAAIE,KAAK,CAACD,EAAK/B,IAEV8B,GACN,KAGCG,MAoBDnG,UACGC,EAAiBJ,SACjBmF,EAA8BP,mBACpCzE,EAAMI,GAAKJ,EAAMI,IAAMC,iBAEvBC,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAExC5E,IAAMmG,SAASpG,EAAMI,KAEzBH,IAAMoG,SACJrG,EAAMmF,OAAS,IACVnF,EAAMuC,MACTnC,GAAIJ,EAAMI,GACV4E,OAAQA,EAAO5E,IAEjBJ,EAAMsG,WACFrG,IACGgF,WACAC,OAAOqB,KAAKC,GAAKA,EAAElB,OAAStF,EAAMsG,YAAYlG,GACjDJ,EAAMyG,YAIdpF,UAAU,IAAMpB,IAAMmF,YAAYpF,EAAMI,KAGxCmB,aAAa,IACXnC,YAAYoC,QAAQC,OACdzB,EAAMyB,GAAO,OACTC,EAAQD,EAAKE,MAAM,GAAGC,cACtBC,EAAWC,GAAK9B,EAAMyB,GAAMK,GAClC7B,IAAM8B,GAAGL,EAAO1B,EAAMI,GAAIyB,GAC1BR,UAAU,IAAMpB,IAAM+B,IAAIN,EAAO1B,EAAMI,GAAIyB,QAMjDN,aAAcmB,OAET1C,EAAMuC,OACNtC,IAAMsC,OACNtC,IAAM6E,UAAUE,EAAO5E,KACvBH,IAAMmG,SAASpG,EAAMI,WAIpBJ,EAAMuC,MAAMmE,UAAWhE,MAAAA,SAAAA,EAAMgE,SAC/BjB,KAAKzF,EAAMuC,MAAMmE,OAAQhE,MAAAA,SAAAA,EAAMgE,QAAQlF,QAAQ,CAAA,CAAEyE,EAAK/B,KACpDjE,IAAM0G,kBAAkB3G,EAAMI,GAAI6F,EAAK/B,EAAO,CAAE0C,UAAU,KAG1D5G,EAAMuC,MAAMsE,SAAUnE,MAAAA,SAAAA,EAAMmE,QAC9BpB,KAAKzF,EAAMuC,MAAMsE,MAAOnE,MAAAA,SAAAA,EAAMmE,OAAOrF,QAAQ,CAAA,CAAEyE,EAAK/B,KAClDjE,IAAM6G,iBAAiB9G,EAAMI,GAAI6F,EAAK/B,EAAO,CAAE0C,UAAU,KAI3D5G,EAAMuC,MAAMwE,WAAYrE,MAAAA,SAAAA,EAAMqE,UAC9B/G,EAAMuC,MAAMyE,WAAYtE,MAAAA,SAAAA,EAAMsE,UAE9B/G,IAAMgH,kBACJjH,EAAMI,GACNJ,EAAMuC,MAAMwE,QACZ/G,EAAMuC,MAAMyE,SAGZhH,EAAMuC,MAAM2E,UAAWxE,MAAAA,SAAAA,EAAMwE,SAC/BjH,IAAMkH,UAAUnH,EAAMI,GAAIJ,EAAMuC,MAAM2E,OAAQ,CAAEN,UAAU,IAErD5G,EAAMuC,OACZvC,EAAMuC,OAGThB,aAAcmB,YAEQ0E,IAAlBpH,EAAMqH,SACNrH,EAAMqH,UAAY3E,GACjBzC,IAAM6E,UAAUE,EAAO5E,KACvBH,IAAMmG,SAASpG,EAAMI,WAIxBH,IAAM0G,kBACJ3G,EAAMI,GACN,aACAJ,EAAMqH,QAAU,UAAY,OAC5B,CAAET,UAAU,IAEP5G,EAAMqH,SACZrH,EAAMqH,SAGT9F,aAAaoD,UACN3E,EAAMkH,SAEVjH,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAMkH,UAAUnH,EAAMI,GAAIJ,EAAMkH,WAIlC3F,aAAaoD,UACN3E,EAAMsH,cAAiBtH,EAAMsH,aAAalH,KAE9CH,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAE5C5E,IAAMsH,mBAAmB,CACvBvC,OAAQA,EAAO5E,GACfoH,YAAaxH,EAAMuC,MAAM,kBAE3BtC,IAAMwH,gBACJ,CACEzC,OAAQA,EAAO5E,GACfoH,YAAaxH,EAAMuC,MAAM,gBACzBnC,GAAIJ,EAAMsH,aAAalH,IAEzBJ,EAAMsH,aAAaI,UAIhB1H,EAAMmE,UCxKTwD,IAGD3H,UACGC,EAAiBJ,gBAEvBS,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAM2H,OAAO5H,EAAMuC,SAGrBlB,UAAU,IAAMpB,IAAM2H,OAAO,OAG7BrG,aAAaoD,eACWyC,IAAlBpH,EAAMqH,UAETpH,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAM2H,OAAO5H,EAAMqH,QAAUrH,EAAMuC,MAAQ,SAGtCvC,EAAMmE,UCrBT0D,IAGD7H,UACGC,EAAiBJ,SACjBiI,EAAU,cAEhBxH,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC3C5E,IAAMmG,SAAS0B,IAAY7H,IAAMoG,SAAS,IAAKrG,EAAMuC,MAAOnC,GAAI0H,MAInEzG,UAAU,IAAMpB,IAAMmG,SAAS0B,IAAY7H,IAAMmF,YAAY0C,IAG7DvG,aAAaoD,eACWyC,IAAlBpH,EAAMqH,UAETpH,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAM0G,kBACJmB,EACA,aACA9H,EAAMqH,QAAU,UAAY,WAIzBrH,EAAMmE,UCvBT4D,QAGD/H,UACGC,EAAiBJ,SACjBmF,EAA8BP,mBAGpCnE,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAM+H,WAAW,IAAKhI,EAAMuC,MAAOyC,OAAQA,EAAO5E,OAIpDiB,UAAU,IAAMpB,IAAM+H,WAAW,OAGjCzG,aAAaoD,eACWyC,IAAlBpH,EAAMqH,UAETpH,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aAC5C5E,IAAM+H,WAAWhI,EAAMqH,QAAUrH,EAAMuC,MAAQ,SAG1CvC,EAAMmE,UCvBT8D,QAgBDjI,UACGC,EAAiBJ,SACjB,CAACqI,EAASC,GAAczI,aAAa,aA+B3CY,QAAQ,SACA4H,GA9BW,CAAC5C,EAAM7E,YAChB6E,OACD,oBACI,IAAI/E,SAAS6H,kBAAkB3H,OACnC,eACI,IAAIF,SAAS8H,aAAa5H,OAC9B,qBACI,IAAIF,SAAS+H,mBAAmB7H,OACpC,oBACI,IAAIF,SAASgI,kBAClB9H,GAAW,CAAEC,UAAWT,IAAMS,gBAE7B,mBACI,IAAIH,SAASiI,iBAAiB/H,KAiBzBgI,CAAWzI,EAAMsF,KAAMtF,EAAMS,SAC7CyH,GAAWjI,IAAMyI,WAAWR,EAASlI,EAAM2I,UAC3CR,EAAWD,KAGb7G,UAAU,IAAMpB,IAAM2I,cAAcV,MAE7BlI,EAAMmE,6CC5DT0E,OAGD7I,UACGC,EAAiBJ,aACnBiJ,EAAS,YAGbxI,QAAQqE,gBACNmE,EAAS,IAAIvI,SAASsI,OAAO7I,EAAMS,SAChCsI,UAAU/I,EAAMgJ,QAChBC,SACCjJ,EAAMmE,UACF,IAAI5D,SAAS2I,OAAQC,qDAAoBnJ,EAAMmE,cAC/C,MAELiF,MAAMnJ,OAGXoB,UAAU,IAAMyH,EAAOxH,UAGvBC,aAAa,IAAMuH,EAAOC,UAAU/I,EAAMgJ,8CCtBtCE,MAGDlJ,UACGC,EAAiBJ,aACnBwJ,EAAQ,YAGZ/I,QAAQqE,gBACN0E,EAAQ,IAAI9I,SAAS2I,MAAMlJ,EAAMS,SAC9BsI,UAAU/I,EAAMgJ,QAChBG,mDAAoBnJ,EAAMmE,cAC1BiF,MAAMnJ,OAGXoB,UAAU,IAAMgI,EAAM/H,UAGtBC,aAAa,IAAM8H,EAAMN,UAAU/I,EAAMgJ,SAGzCzH,aAAa,IAAM8H,EAAMF,mEAAoBnJ,EAAMmE,sBCpB/CmF,MAUDtJ,UACGC,EAAiBJ,gBAEvBS,QAAQqE,UACL1E,IAAM2E,uBAA0B3E,IAAM4E,KAAK,aACxC7E,EAAMuJ,IACRtJ,IAAMuJ,UAAUxJ,EAAMuJ,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChBxJ,IAAM0J,SAAS3J,EAAMI,KAAOH,IAAM2J,SAAS5J,EAAMI,GAAIsJ,KAGvDzJ,IAAM0J,SAAS3J,EAAMI,KACpBH,IAAM2J,SAAS5J,EAAMI,GAAIJ,EAAM0J,MAAO1J,EAAMS,WAIlDY,UAAU,IAAMpB,IAAM0J,SAAS3J,EAAMI,KAAOH,IAAM4J,YAAY7J,EAAMI,KAGpEmB,aAAaoD,UACP3E,EAAM0J,OAAS1J,EAAMuJ,MAErBvJ,EAAMuJ,IACRtJ,IAAMuJ,UAAUxJ,EAAMuJ,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChBxJ,IAAM0J,SAAS3J,EAAMI,KAAOH,IAAM6J,YAAY9J,EAAMI,GAAIsJ,KAG3DzJ,IAAMsC,OACJtC,IAAM0J,SAAS3J,EAAMI,KACrBH,IAAM6J,YAAY9J,EAAMI,GAAIJ,EAAM0J"}
+{"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  'onMouseMove',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onClick',\n  'onDblClick',\n  'onContextMenu',\n  'onTouchStart',\n  'onTouchEnd',\n  'onTouchCancel',\n]\n\nexport { mapEvents, layerEvents }\n","import {\n  createSignal,\n  createEffect,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n  createUniqueId,\n  untrack,\n  on,\n} from 'solid-js'\nimport { mapEvents } from '../../events'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type { MapboxMap, MapboxOptions } from 'mapbox-gl/src/ui/map'\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'\nimport type { JSX } from 'solid-js'\n\nexport type Viewport = {\n  id?: string\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: PaddingOptions\n}\n\nconst [pending, start] = useTransition()\nconst [transitionType, setTransitionType] = createSignal('flyTo')\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  id?: string\n  style?: JSX.CSSProperties\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  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  ref?: HTMLDivElement\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLDivElement\n  let containerRef: HTMLElement\n  props.id = props.id || createUniqueId()\n\n  onMount(() => {\n    map = new mapboxgl.Map({\n      ...props.options,\n      style: props.options?.style || { version: 8, sources: {}, layers: [] },\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  onCleanup(() => map.remove())\n\n  // Hook up events\n  createEffect(() =>\n    mapEvents.forEach(item => {\n      if (props[item]) {\n        const event = item.slice(2).toLowerCase()\n        const callback = e => props[item](e)\n        map.on(event, callback)\n        onCleanup(() => map.off(event, callback))\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    on(\n      () => props.options.style,\n      () => {\n        const oldStyle = map.getStyle()\n        const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'))\n        const oldSources = Object.keys(oldStyle.sources)\n          .filter(s => s.startsWith('cl-'))\n          .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {})\n        map.setStyle(props.options.style)\n        map.once('styledata', () => {\n          const newStyle = map.getStyle()\n          map.setStyle({\n            ...newStyle,\n            sources: { ...newStyle.sources, ...oldSources },\n            layers: [...newStyle.layers, ...oldLayers],\n          })\n        })\n      },\n      { defer: true }\n    )\n  )\n\n  // Update projection\n  createEffect(\n    on(\n      () => props.options.projection,\n      () => map.setProjection(props.options.projection),\n      { defer: true }\n    )\n  )\n\n  createEffect(() => setTransitionType(props.transitionType))\n\n  // Hook up viewport events\n  createEffect(() => {\n    const viewport = {\n      id: null,\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    const callMove = event => {\n      if (event.originalEvent)\n        props.onViewportChange({ ...viewport, id: props.id })\n      setTransitionType('jumpTo')\n    }\n\n    const callEnd = event => {\n      if (event.originalEvent) props.onViewportChange(viewport)\n      setTransitionType(props.transitionType)\n    }\n\n    map.on('move', callMove).on('moveend', callEnd)\n    onCleanup(() => map.off('move', callMove).off('moveend', callEnd))\n  })\n\n  // Update boundaries\n  createEffect(prev => {\n    if (props.viewport?.bounds != prev)\n      props.onViewportChange({\n        ...props.viewport,\n        ...map.cameraForBounds(props.viewport?.bounds, {\n          padding: props.viewport?.padding,\n        }),\n      })\n    return props.viewport?.bounds\n  }, props.viewport?.bounds)\n\n  // Update Viewport\n  createEffect(() => {\n    if (props.id === props.viewport?.id) return\n    const viewport = {\n      ...props.viewport,\n      padding: props.viewport?.padding || 0,\n    }\n    switch (untrack(transitionType)) {\n      case 'easeTo':\n        map.stop().easeTo(viewport)\n      case 'jumpTo':\n        map.stop().jumpTo(viewport)\n      default:\n        map.stop().flyTo(viewport)\n    }\n  })\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      <section 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%', ...props.style }}\n        />\n      </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        metadata: {\n          smg: { beforeType: props.beforeType, beforeId: props.beforeId },\n        },\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(() => map().removeLayer(props.id))\n\n  // Hook up events\n  createEffect(() =>\n    layerEvents.forEach(item => {\n      if (props[item]) {\n        const event = item.slice(2).toLowerCase()\n        const callback = e => props[item](e)\n        map().on(event, props.id, callback)\n        onCleanup(() => map().off(event, props.id, callback))\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 } 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: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate'\n  options?:\n    | NavigationOptions\n    | ScaleOptions\n    | AttributionOptions\n    | FullscreenOptions\n    | GeolocateOptions\n    | object\n  custom?: any\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n  const map: MapboxMap = useMap()\n  const [control, setControl] = createSignal(null)\n\n  const getControl = (type, options) => {\n    if (props.custom) return new props.custom(options)\n    switch (type) {\n      case 'navigation':\n        return new mapboxgl.NavigationControl(options)\n      case 'scale':\n        return new mapboxgl.ScaleControl(options)\n      case 'attribution':\n        return new mapboxgl.AttributionControl(options)\n      case 'geolocate':\n        return new mapboxgl.GeolocateControl(options)\n      case 'fullscreen':\n        return new mapboxgl.FullscreenControl(\n          options || { container: map().container }\n        )\n      default:\n        throw new Error(`Unknown control type: ${type}`)\n    }\n  }\n\n  // Add Control\n  onMount(() => {\n    const control = getControl(props.type, props.options)\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","pending","start","useTransition","transitionType","setTransitionType","createSignal","MapContext","createContext","useMap","useContext","MapGL","props","_props$viewport13","let","map","mapRef","containerRef","index","id","createUniqueId","onMount","_props$viewport6","mapboxgl","Map","options","style","_props$options","version","sources","layers","container","interactive","onViewportChange","bounds","viewport","_props$viewport","center","_props$viewport2","zoom","_props$viewport3","pitch","_props$viewport4","bearing","_props$viewport5","fitBoundsOptions","padding","onCleanup","remove","createEffect","forEach","item","event","slice","toLowerCase","callback","e","on","off","showTileBoundaries","showTerrainWireframe","showPadding","showCollisionBoxes","showOverdrawInspector","getCanvas","cursor","cursorStyle","oldStyle","getStyle","oldLayers","filter","l","startsWith","oldSources","Object","keys","s","reduce","obj","key","setStyle","once","newStyle","defer","projection","setProjection","_props$viewport8","getCenter","getZoom","getPitch","getBearing","_props$viewport7","callMove","originalEvent","callEnd","prev","_props$viewport12","_props$viewport9","cameraForBounds","_props$viewport10","_props$viewport11","_props$viewport15","_props$viewport14","untrack","stop","easeTo","jumpTo","flyTo","triggerResize","window","requestAnimationFrame","loop","resize","_$createComponent","Provider","value","children","_el$","_tmpl$","cloneNode","_el$2","firstChild","_ref$","_ref$2","setProperty","_$effect","_p$","_v$","class","classList","_v$3","height","width","className","_v$2","_$classList","_$style","undefined","SourceContext","useSource","SourceComponent","async","isStyleLoaded","getSource","addSource","source","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","acc","push","Layer","getLayer","addLayer","metadata","smg","beforeType","beforeId","find","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","setFilter","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","custom","NavigationControl","ScaleControl","AttributionControl","GeolocateControl","FullscreenControl","Error","getControl","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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"}

package/dist/source/components/Control/index.jsx

@@ -5,6 +5,8 @@ const Control = props => {
     const map = useMap();
     const [control, setControl] = createSignal(null);
     const getControl = (type, options) => {
+        if (props.custom)
+            return new props.custom(options);
         switch (type) {
             case 'navigation':
                 return new mapboxgl.NavigationControl(options);
@@ -12,21 +14,12 @@ const Control = props => {
                 return new mapboxgl.ScaleControl(options);
             case 'attribution':
                 return new mapboxgl.AttributionControl(options);
-            case 'fullscreen':
-                return new mapboxgl.FullscreenControl(options || { container: map().container });
             case 'geolocate':
                 return new mapboxgl.GeolocateControl(options);
-            // case 'language':
-            //   try {
-            //     const MapboxLanguage = require('@mapbox/mapbox-gl-language').default
-            //     return new MapboxLanguage(options)
-            //   } catch (e) {}
-            // case 'traffic':
-            //   try {
-            //     const MapboxTraffic = require('@mapbox/mapbox-gl-traffic').default
-            //     require('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')
-            //     return new MapboxTraffic(options)
-            //   } catch (e) {}
+            case 'fullscreen':
+                return new mapboxgl.FullscreenControl(options || { container: map().container });
+            default:
+                throw new Error(`Unknown control type: ${type}`);
         }
     };
     // Add Control

package/dist/source/components/Layer/index.jsx

@@ -25,6 +25,9 @@ const Layer = props => {
             ...props.style,
             id: props.id,
             source: source.id,
+            metadata: {
+                smg: { beforeType: props.beforeType, beforeId: props.beforeId },
+            },
         }, props.beforeType
             ? map()
                 .getStyle()

package/dist/source/components/MapGL/index.jsx

@@ -1,4 +1,4 @@
-import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, useTransition, createUniqueId, untrack, } from 'solid-js';
+import { createSignal, createEffect, onMount, onCleanup, createContext, useContext, useTransition, createUniqueId, untrack, on, } from 'solid-js';
 import { mapEvents } from '../../events';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
@@ -9,19 +9,22 @@ const useMap = () => useContext(MapContext);
 const MapGL = props => {
     let map;
     let mapRef;
+    let containerRef;
     props.id = props.id || createUniqueId();
     onMount(() => {
         map = new mapboxgl.Map({
             ...props.options,
+            style: props.options?.style || { version: 8, sources: {}, layers: [] },
             container: mapRef,
             interactive: !!props.onViewportChange,
-            bounds: props.viewport.bounds,
-            center: props.viewport.center,
-            zoom: props.viewport.zoom || null,
-            pitch: props.viewport.pitch || null,
-            bearing: props.viewport.bearing || null,
-            fitBoundsOptions: { padding: props.viewport.padding },
+            bounds: props.viewport?.bounds,
+            center: props.viewport?.center,
+            zoom: props.viewport?.zoom || null,
+            pitch: props.viewport?.pitch || null,
+            bearing: props.viewport?.bearing || null,
+            fitBoundsOptions: { padding: props.viewport?.padding },
         });
+        map.container = containerRef;
     });
     onCleanup(() => map.remove());
     // Hook up events
@@ -41,14 +44,24 @@ const MapGL = props => {
     createEffect(() => (map.showOverdrawInspector = props.showOverdrawInspector));
     createEffect(() => (map.getCanvas().style.cursor = props.cursorStyle));
     // Update map style
-    createEffect(prev => {
-        prev !== props.options.style && map.setStyle(props.options.style);
-    }, props.options.style);
+    createEffect(on(() => props.options.style, () => {
+        const oldStyle = map.getStyle();
+        const oldLayers = oldStyle.layers.filter(l => l.id.startsWith('cl-'));
+        const oldSources = Object.keys(oldStyle.sources)
+            .filter(s => s.startsWith('cl-'))
+            .reduce((obj, key) => ({ ...obj, [key]: oldStyle.sources[key] }), {});
+        map.setStyle(props.options.style);
+        map.once('styledata', () => {
+            const newStyle = map.getStyle();
+            map.setStyle({
+                ...newStyle,
+                sources: { ...newStyle.sources, ...oldSources },
+                layers: [...newStyle.layers, ...oldLayers],
+            });
+        });
+    }, { defer: true }));
     // Update projection
-    createEffect(prev => {
-        prev !== props.options.projection &&
-            map.setProjection(props.options.projection);
-    }, props.options.projection);
+    createEffect(on(() => props.options.projection, () => map.setProjection(props.options.projection), { defer: true }));
     createEffect(() => setTransitionType(props.transitionType));
     // Hook up viewport events
     createEffect(() => {
@@ -58,8 +71,8 @@ const MapGL = props => {
             zoom: map.getZoom(),
             pitch: map.getPitch(),
             bearing: map.getBearing(),
-            padding: props.viewport.padding,
-            bounds: props.viewport.bounds,
+            padding: props.viewport?.padding,
+            bounds: props.viewport?.bounds,
         };
         const callMove = event => {
             if (event.originalEvent)
@@ -76,20 +89,23 @@ const MapGL = props => {
     });
     // Update boundaries
     createEffect(prev => {
-        if (props.viewport.bounds != prev)
+        if (props.viewport?.bounds != prev)
             props.onViewportChange({
                 ...props.viewport,
-                ...map.cameraForBounds(props.viewport.bounds, {
-                    padding: props.viewport.padding,
+                ...map.cameraForBounds(props.viewport?.bounds, {
+                    padding: props.viewport?.padding,
                 }),
             });
-        return props.viewport.bounds;
-    }, props.viewport.bounds);
+        return props.viewport?.bounds;
+    }, props.viewport?.bounds);
     // Update Viewport
     createEffect(() => {
-        if (!props.sync || props.id === props.viewport.id)
+        if (props.id === props.viewport?.id)
             return;
-        const viewport = { ...props.viewport, padding: props.viewport.padding || 0 };
+        const viewport = {
+            ...props.viewport,
+            padding: props.viewport?.padding || 0,
+        };
         switch (untrack(transitionType)) {
             case 'easeTo':
                 map.stop().easeTo(viewport);
@@ -113,8 +129,10 @@ const MapGL = props => {
         }
     });
     return (<MapContext.Provider value={() => map}>
-      {props.children}
-      <section ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%', ...props.style }}></section>
+      <section ref={containerRef} style={{ height: '100%', width: '100%' }}>
+        {props.children}
+        <div ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%', ...props.style }}/>
+      </section>
     </MapContext.Provider>);
 };
 export { MapGL as default, useMap };

package/dist/types/components/Control/index.d.ts

@@ -5,8 +5,9 @@ import type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolo
 import type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control';
 import type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control';
 declare const Control: Component<{
-    type: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate' | 'language' | 'traffic';
-    options?: NavigationOptions | ScaleOptions | AttributionOptions | FullscreenOptions | GeolocateOptions;
+    type: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
+    options?: NavigationOptions | ScaleOptions | AttributionOptions | FullscreenOptions | GeolocateOptions | object;
+    custom?: any;
     position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
 }>;
 export default Control;

package/dist/types/components/MapGL/index.d.ts

@@ -35,6 +35,6 @@ declare const MapGL: Component<{
     showOverdrawInspector?: boolean;
     repaint?: boolean;
     cursorStyle?: string;
-    sync?: boolean;
+    ref?: HTMLDivElement;
 }>;
 export { MapGL as default, useMap };

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.24",
+  "version": "1.1.27",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "info": "Solid Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.",
@@ -36,9 +36,6 @@
       "default": "./dist/esm/index.js"
     }
   },
-  "scripts": {
-    "build": "rollup -c"
-  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/gishub4/solid-map-gl.git"
@@ -48,15 +45,25 @@
     "not ie 11"
   ],
   "dependencies": {
-    "mapbox-gl": "^2.7.0",
-    "solid-js": "^1.3.9"
+    "mapbox-gl": "^2.7.1",
+    "solid-js": "^1.3.13"
   },
   "devDependencies": {
-    "@types/mapbox-gl": "^2.6.1",
-    "rollup": "^2.68.0",
-    "rollup-plugin-import-css": "^3.0.2",
+    "canvas": "^2.9.1",
+    "jsdom": "^19.0.0",
+    "rollup": "^2.70.1",
+    "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-uglify": "^6.0.4",
     "rollup-preset-solid": "^1.4.0",
-    "typescript": "^4.5.5"
-  }
-}
+    "solid-testing-library": "^0.3.0",
+    "typescript": "^4.6.3",
+    "vite": "^2.8.6",
+    "vite-plugin-solid": "^2.2.6",
+    "vitest": "^0.8.0"
+  },
+  "scripts": {
+    "build": "rollup -c",
+    "test": "vitest"
+  },
+  "readme": "![Banner](./docs/banner.png)\n\n# Solid Mapbox GL JS\n\n[![npm](https://badgen.net/npm/v/solid-map-gl?icon=npm&label)\n![downloads](https://badgen.net/npm/dt/solid-map-gl)](https://www.npmjs.com/package/solid-map-gl)\n[![licence](https://badgen.net/badge/license/MIT/blue)](./LICENSE)\n[![size](https://badgen.net/badge/color/113%20kB/blue?label=Unpacked%20Size)\n![treeshaking](https://badgen.net/badge/color/supported/green?label=tree%20shaking)](https://bundlephobia.com/package/solid-map-gl)\n![types](https://badgen.net/npm/types/solid-map-gl?icon=typescript&label)\n\n[Solid](https://www.solidjs.com/) Component Library for [Mapbox GL JS.](https://github.com/mapbox/mapbox-gl-js) Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the [Mapbox GL JS API.](https://docs.mapbox.com/mapbox-gl-js/api/)\n\n### [Examples & Playground](https://determined-mirzakhani-29bbc7.netlify.app/)\n<br>\n\n- [Installation](#installation)\n- [Components](#components)\n- [Usage](#usage)\n  - [Static Map](#static-map)\n  - [Interactive Map](#interactive-map)\n  - [Map with Source and Layer](#map-with-source-and-layer)\n  - [Map with GeoJSON Source](#map-with-geojson-source)\n- [Roadmap](#roadmap)\n\n<br>\n\n![Gallery](./docs/gallery.png)\n\n## Installation\n\n```shell\nyarn add solid-map-gl\n```\n\n```shell\nnpm install --save solid-map-gl\n```\n\n<!-- ### Optional Dependencies\n\nIf you want to use `LanguageControl` and `TrafficControl`:\n\n```shell\nyarn add @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic\n```\n\n```shell\nnpm install --save @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic\n``` -->\n\n## Components\n\n| Component                         | Description                                                                                                            |\n| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |\n| [MapGL](src/components/MapGL)     | Represents map on the page                                                                                             |\n| [Source](src/components/Source)   | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |\n| [Layer](src/components/Layer)     | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style                          |\n| [Sky](src/components/Sky)         | Specify the Sky Layer                                                                                                  |\n| [Fog](src/components/Fog)         | Specify the Fog Layer                                                                                                  |\n| [Terrain](src/components/Terrain) | Specify the Terrain Layer                                                                                              |\n| [Image](src/components/Image)     | Adds an image to the map style                                                                                         |\n| [Popup](src/components/Popup)     | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup)                                    |\n| [Marker](src/components/Marker)   | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                                  |\n| [Control](src/components/Control) | Represents the map's control                                                                                           |\n\n## Usage\n\nTo use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox [access token](https://www.mapbox.com/help/define-access-token/). Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your [API access tokens page](https://www.mapbox.com/studio/account/tokens/).\n\n### Static Map\n\nBy default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.\n\n```jsx\nimport MapGL from 'solid-map-gl'\n<MapGL\n  options={{\n    accessToken: MAPBOX_ACCESS_TOKEN,\n    style: 'mapbox://styles/mapbox/light-v10',\n  }}\n  viewport={{\n    center: [-122.41, 37.78],\n    zoom: 11,\n  }}>\n</MapGL>\n```\n\n### Interactive Map\n\nIn most cases, you will want the user to interact with the map. To do this, you need to provide `onViewportChange` handler, that will update the map's viewport state.\n\n```jsx\nimport { createSignal } from 'solid-js'\nimport MapGL from 'solid-map-gl'\nimport type { Viewport } from 'solid-map-gl'\n\nconst [viewport, setViewport] = createSignal({\n    center: [-122.41, 37.78],\n    zoom: 11\n} as Viewport);\n\n<MapGL\n    options={{\n        accessToken: MAPBOX_ACCESS_TOKEN,\n        style: 'mapbox://styles/mapbox/light-v10'\n    }}\n    viewport={viewport()}\n    onViewportChange={evt => setViewport(evt)}>\n</MapGL>\n```\n\n### Map with Source and Layer\n\n[Sources](https://docs.mapbox.com/mapbox-gl-js/api/sources/) specify the geographic features to be rendered on the map.\n\n[Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) specify the Sources styles. The type of layer is specified by the `\"type\"` property in the layers style object, and must be one of `background`, `fill`, `line`, `symbol`, `raster`, `circle`, `fill-extrusion`, `heatmap`, `hillshade`.\n\nExcept for layers of the `background` type, each layer needs to refer to a source. Either buy referencing the `id` in `sourceId` or by nesting the layer within the source component. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.\n\n```jsx\nimport MapGL, { Source, Layer } from 'solid-map-gl';\n\n<MapGL\n    options={{\n        accessToken: MAPBOX_ACCESS_TOKEN,\n        style: 'mapbox://styles/mapbox/light-v10'\n    }}>\n    <Source\n        source={{\n        type: 'vector',\n        url: 'mapbox://mapbox.mapbox-terrain-v2',\n    }}>\n        <Layer style={{\n            type: 'line',\n            'source-layer': 'contour'\n            paint: {\n                'line-color': '#877b59',\n                'line-width': 1,\n            }\n        }} />\n    </Source>\n</MapGL>\n```\n\n### Map with GeoJSON Source\n\nTo draw a GeoJSON on a map, add `Source` with the `type` property set to `geojson` and `data` property set to a URL or inline [GeoJSON](http://geojson.org/).\n\n```jsx\nimport { createSignal } from 'solid-js'\nimport MapGL, { Source, Layer } from 'solid-map-gl'\nimport type { Viewport } from 'solid-map-gl'\n\nconst [viewport, setViewport] = createSignal({\n  center: [-122.486052, 37.830348],\n  zoom: 15,\n})\n\nconst data = {\n  type: 'Feature',\n  geometry: {\n    type: 'LineString',\n    coordinates: [\n      [-122.48369693756104, 37.83381888486939],\n      [-122.48348236083984, 37.83317489144141],\n      [-122.48339653015138, 37.83270036637107],\n      [-122.48356819152832, 37.832056363179625],\n      [-122.48404026031496, 37.83114119107971],\n      [-122.48404026031496, 37.83049717427869],\n      [-122.48348236083984, 37.829920943955045],\n      [-122.48356819152832, 37.82954808664175],\n      [-122.48507022857666, 37.82944639795659],\n      [-122.48610019683838, 37.82880236636284],\n      [-122.48695850372314, 37.82931081282506],\n      [-122.48700141906738, 37.83080223556934],\n      [-122.48751640319824, 37.83168351665737],\n      [-122.48803138732912, 37.832158048267786],\n      [-122.48888969421387, 37.83297152392784],\n      [-122.48987674713133, 37.83263257682617],\n      [-122.49043464660643, 37.832937629287755],\n      [-122.49125003814696, 37.832429207817725],\n      [-122.49163627624512, 37.832564787218985],\n      [-122.49223709106445, 37.83337825839438],\n      [-122.49378204345702, 37.83368330777276],\n    ],\n  },\n}\n\n<MapGL\n  options={{\n    accessToken: MAPBOX_ACCESS_TOKEN,\n    style: 'mapbox://styles/mapbox/light-v10',\n  }}\n  viewport={viewport()}\n  onViewportChange={evt => setViewport(evt)}>\n  <Source\n    source={{\n      type: 'geojson',\n      data: { data },\n    }}>\n    <Layer\n      style={{\n        type: 'line',\n        layout: {\n          'line-join': 'round',\n          'line-cap': 'round',\n        },\n        paint: {\n          'line-color': '#888',\n          'line-width': 8,\n        },\n      }}\n    />\n  </Source>\n</MapGL>\n```\n\n### Custom Layers support\n\n[Custom layers](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) allow a user to render directly into the Map's GL context using the map's camera.\n\nHere is an example using [deck.gl.](https://github.com/uber/deck.gl)\n\n```jsx\nimport { createSignal } from 'solid-js'\nimport MapGL, { Source, Layer } from 'solid-map-gl'\nimport { MapboxLayer } from '@deck.gl/mapbox'\nimport { ScatterplotLayer } from '@deck.gl/layers'\nimport type { Viewport } from 'solid-map-gl'\n\nconst [viewport, setViewport] = createSignal({\n  center: [-74.5, 40],\n  zoom: 9,\n})\n\nconst myDeckLayer = new MapboxLayer({\n  id: 'my-scatterplot',\n  type: ScatterplotLayer,\n  data: [{ position: [-74.5, 40], size: 1000 }],\n  getPosition: d => d.position,\n  getRadius: d => d.size,\n  getColor: [255, 0, 0],\n})\n\n<MapGL\n  options={{\n    accessToken: MAPBOX_ACCESS_TOKEN,\n    style: 'mapbox://styles/mapbox/light-v10',\n  }}\n  viewport={viewport()}\n  onViewportChange={evt => setViewport(evt)}>\n  <Layer customLayer={myDeckLayer} />\n</MapGL>\n```\n## Roadmap\n\n- [x] Basic Mapbox GL Functionality\n- [x] Include Map Controls\n- [x] Include Fog, Sky, and Terrain\n- [x] Include Popup and Markers\n- [x] Minify bundle & reduce size\n- [x] Add basemap switching\n- [x] Include event handling\n- [x] Sync Maps\n- [ ] Add draw functionality\n"
+}