solid-map-gl 1.1.3 → 1.1.7

package/README.md

@@ -2,10 +2,11 @@
 
 # Solid Mapbox GL JS
 
-![npm-version](https://badgen.net/npm/v/solid-map-gl)
-![licence](https://badgen.net/badge/license/MIT/blue)
-![types](https://badgen.net/npm/types/solid-map-gl)
-![downloads](https://badgen.net/npm/dt/solid-map-gl)
+[![npm](https://badgen.net/npm/v/solid-map-gl)
+![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@1.1.6)
 
 [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/)
 
@@ -17,7 +18,7 @@
   - [Map with Source and Layer](#map-with-source-and-layer)
   - [Map with GeoJSON Source](#map-with-geojson-source)
 - [Examples](#examples)
-- [Changelog](#changelog)
+- [Roadmap](#roadmap)
 
 <br>
 
@@ -70,17 +71,15 @@ By default, `MapGL` component renders in a static mode. That means that the user
 
 ```jsx
 import MapGL from 'solid-map-gl'
-
-<MapGL
-    options={{
-        accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
-    }}
-    viewport={{
-        center: [-122.41, 37.78]
-        zoom: 11,
-    }}>
-</MapGL>
+;<MapGL
+  options={{
+    accessToken: { MAPBOX_ACCESS_TOKEN },
+    style: 'mapbox://styles/mapbox/light-v10',
+  }}
+  viewport={{
+    center: [-122.41, 37.78],
+    zoom: 11,
+  }}></MapGL>
 ```
 
 ### Interactive Map
@@ -92,14 +91,14 @@ import { createSignal } from 'solid-js'
 import MapGL, { Viewport } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
-    center: [-122.41, 37.78]
-    zoom: 11,
-} as Viewport)
+    center: [-122.41, 37.78],
+    zoom: 11
+} as Viewport);
 
 <MapGL
     options={{
         accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
+        style: 'mapbox://styles/mapbox/light-v10'
     }}
     viewport={viewport()}
     onViewportChange={evt => setViewport(evt)}>
@@ -115,12 +114,12 @@ const [viewport, setViewport] = createSignal({
 Except 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.
 
 ```jsx
-import MapGL, { Source, Layer } from 'solid-map-gl'
+import MapGL, { Source, Layer } from 'solid-map-gl';
 
 <MapGL
     options={{
         accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
+        style: 'mapbox://styles/mapbox/light-v10'
     }}>
     <Source
         source={{
@@ -148,8 +147,8 @@ import { createSignal } from 'solid-js'
 import MapGL, { Source, Layer } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
-    center: [-122.486052, 37.830348],
-    zoom: 15,
+  center: [-122.486052, 37.830348],
+  zoom: 15,
 })
 
 const data = {
@@ -182,30 +181,32 @@ const data = {
   },
 }
 
-<MapGL
-    options={{
-        accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
-    }}
-    viewport={viewport()}
-    onViewportChange={evt => setViewport(evt)}>
-    <Source
-        source={{
-            type: 'geojson',
-            data: {data}
+;<MapGL
+  options={{
+    accessToken: { MAPBOX_ACCESS_TOKEN },
+    style: 'mapbox://styles/mapbox/light-v10',
+  }}
+  viewport={viewport()}
+  onViewportChange={evt => setViewport(evt)}>
+  <Source
+    source={{
+      type: 'geojson',
+      data: { data },
     }}>
-        <Layer style={{
-            type: 'line',
-            layout: {
-                'line-join': 'round',
-                'line-cap': 'round',
-            }
-            paint: {
-                'line-color': '#888',
-                'line-width': 8,
-            }
-        }} />
-    </Source>
+    <Layer
+      style={{
+        type: 'line',
+        layout: {
+          'line-join': 'round',
+          'line-cap': 'round',
+        },
+        paint: {
+          'line-color': '#888',
+          'line-width': 8,
+        },
+      }}
+    />
+  </Source>
 </MapGL>
 ```
 
@@ -222,8 +223,8 @@ import { MapboxLayer } from '@deck.gl/mapbox'
 import { ScatterplotLayer } from '@deck.gl/layers'
 
 const [viewport, setViewport] = createSignal({
-    center: [-74.5, 40],
-    zoom: 9,
+  center: [-74.5, 40],
+  zoom: 9,
 })
 
 const myDeckLayer = new MapboxLayer({
@@ -235,23 +236,29 @@ const myDeckLayer = new MapboxLayer({
   getColor: [255, 0, 0],
 })
 
-<MapGL
-    options={{
-        accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
-    }}
-    viewport={viewport()}
-    onViewportChange={evt => setViewport(evt)}>
-        <Layer customLayer={myDeckLayer} />
+;<MapGL
+  options={{
+    accessToken: { MAPBOX_ACCESS_TOKEN },
+    style: 'mapbox://styles/mapbox/light-v10',
+  }}
+  viewport={viewport()}
+  onViewportChange={evt => setViewport(evt)}>
+  <Layer customLayer={myDeckLayer} />
 </MapGL>
 ```
 
 ## Examples
 
-### Coming Soon
+#### Coming Soon
+
+<br>
 
-## Changelog
+## Roadmap
 
-- 1.0.0 - Initial release
-- 1.1.0 - Bug fixing
-- 1.2.0 - Bug fixing
+- [x] Basic Mapbox GL Functionality
+- [x] Include Map Controls
+- [x] Include Fog, Sky, and Terrain
+- [x] Include Popup and Markers
+- [x] Minify bundle & reduce size
+- [ ] Add basemap switching
+- [ ] Add edit functionality

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{template,createComponent,insert,effect,classList}from"solid-js/web";import{useTransition,createContext,onCleanup,onMount,createEffect,useContext,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const _tmpl$$2=template("<main></main>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{let t,o;onCleanup(()=>t.remove()),onMount(()=>{t=new mapboxgl.Map({...n.options,container:o,bounds:n.viewport.bounds,center:n.viewport.center,zoom:n.viewport.zoom||null,pitch:n.viewport.pitch||null,bearing:n.viewport.bearing||null,fitBoundsOptions:{padding:n.viewport.padding}})}),createEffect(()=>n.onMouseMove&&t.on("mousemove",e=>n.onMouseMove(e.lngLat)));const e=()=>{var e={center:t.getCenter(),zoom:t.getZoom(),pitch:t.getPitch(),bearing:t.getBearing(),padding:n.viewport.padding};n.onViewportChange(e)};createEffect(()=>n.onViewportChange&&t.on("dragend",e).on("moveend",e).on("zoomend",e).on("rotateend",e).on("pitchend",e).on("boxzoomend",e)),createEffect(async()=>{n.viewport.bounds&&t.fitBounds(n.viewport.bounds,{padding:n.viewport.padding})});let a=0;return createEffect(()=>{n.triggerResize&&(a=0,window.requestAnimationFrame(function e(){a<15&&(a++,window.requestAnimationFrame(e),start(()=>t.resize()))}))}),createComponent(MapContext.Provider,{value:()=>t,get children(){const a=_tmpl$$2.cloneNode(!0),e=o;return"function"==typeof e?e(a):o=a,a.style.setProperty("height","100%"),a.style.setProperty("width","100%"),insert(a,()=>n.children),effect(e=>{var t=n.class||"",o=n.classList;return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),a}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{source:t.id}},get children(){return t.children}})},diff=(a={},n={})=>{return[...new Set([...Object.keys(a),...Object.keys(n)])].reduce((e,t)=>{var o=a[t];return o!==n[t]&&e.push([t,o]),e},[])},Layer=o=>{const a=useMap(),e=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(o.id)||a().addLayer(o.layer||{...o.style,id:o.id,source:e.source},o.beforeType?a().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style||!a().getLayer(o.id))return diff(o.style.paint,e.paint).forEach(([e,t])=>a().setPaintProperty(o.id,e,t)),diff(o.style.layout,e.layout).forEach(([e,t])=>a().setLayoutProperty(o.id,e,t)),o.style.minzoom===e.minzoom&&o.style.maxzoom===e.max||a().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style},o.style),createEffect(async()=>{void 0!==o.visible&&(a().isStyleLoaded()||await a().once("styledata"),a().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}))}),createEffect(async()=>{o.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(a().loaded()||await a().once("render"),a().removeFeatureState({source:e.source,sourceLayer:o.style["source-layer"]}),a().setFeatureState({source:e.source,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.source})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,a]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options);break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),a(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),createEffect(()=>a.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const a=useMap();return onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().addImage(o.id,t)}):a().hasImage(o.id)||a().addImage(o.id,o.image,o.options)}),onCleanup(()=>a().hasImage(o.id)&&a().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().updateImage(o.id,t)}):a().hasImage(o.id)&&a().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default};
+import{template,createComponent,insert,effect,classList}from"solid-js/web";import{useTransition,createContext,onCleanup,onMount,createEffect,useContext,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const _tmpl$$2=template("<main></main>",2);var Type;!function(e){e.flyTo="flyTo",e.easeTo="easeTo",e.jumpTo="jumpTo"}(Type=Type||{});const[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{let a,t;onCleanup(()=>a.remove()),onMount(()=>{a=new mapboxgl.Map({...n.options,container:t,bounds:n.viewport.bounds,center:n.viewport.center,zoom:n.viewport.zoom||null,pitch:n.viewport.pitch||null,bearing:n.viewport.bearing||null,fitBoundsOptions:{padding:n.viewport.padding}})}),createEffect(()=>n.onMouseMove&&a.on("mousemove",e=>n.onMouseMove(e.lngLat)));const e=e=>{e.isInternal||(e={center:a.getCenter(),zoom:a.getZoom(),pitch:a.getPitch(),bearing:a.getBearing(),padding:n.viewport.padding,bounds:n.viewport.bounds},n.onViewportChange(e))};createEffect(()=>n.onViewportChange&&a.on("dragend",e).on("moveend",e).on("zoomend",e).on("rotateend",e).on("pitchend",e).on("boxzoomend",e)),createEffect(e=>{return n.viewport.bounds!=e&&(e=a.cameraForBounds(n.viewport.bounds,{padding:n.viewport.padding}),n.onViewportChange({...n.viewport,...e})),n.viewport.bounds},n.viewport.bounds),createEffect(async e=>{var t=n.viewport,o={...t.zoom!=e.zoom&&{zoom:t.zoom},...t.padding!=e.padding&&{padding:t.padding},...t.bearing!=e.bearing&&{bearing:t.bearing},...t.pitch!=e.pitch&&{pitch:t.pitch},...t.center!=e.center&&{center:t.center.lng?[t.center.lng,t.center.lat]:t.center}};if(Object.keys(o).length)switch(a.stop(),n.transitionType){case"easeTo":a.easeTo(o,{isInternal:!0});case"jumpTo":a.jumpTo(o,{isInternal:!0});default:a.flyTo(o,{isInternal:!0})}return t},n.viewport);let o=0;return createEffect(()=>{n.triggerResize&&(o=0,window.requestAnimationFrame(function e(){o<15&&(o++,window.requestAnimationFrame(e),start(()=>a.resize()))}))}),createComponent(MapContext.Provider,{value:()=>a,get children(){const a=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(a):t=a,a.style.setProperty("height","100%"),a.style.setProperty("width","100%"),insert(a,()=>n.children),effect(e=>{var t=n.class||"",o=n.classList;return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),a}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{id:t.id}},get children(){return t.children}})},diff=(a={},n={})=>{return[...new Set([...Object.keys(a),...Object.keys(n)])].reduce((e,t)=>{var o=a[t];return o!==n[t]&&e.push([t,o]),e},[])},Layer=o=>{const a=useMap(),t=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(o.id)||a().addLayer(o.layer||{...o.style,id:o.id,source:t.id},o.beforeType?a().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style&&a().getSource(t.id)&&a().getLayer(o.id))return o.style.layout!==e?.layout&&diff(o.style.layout,e?.layout).forEach(([e,t])=>a().setLayoutProperty(o.id,e,t,{validate:!1})),o.style.paint!==e?.paint&&diff(o.style.paint,e?.paint).forEach(([e,t])=>a().setPaintProperty(o.id,e,t,{validate:!1})),o.style.minzoom===e?.minzoom&&o.style.maxzoom===e?.maxzoom||a().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style.filter!==e?.filter&&a().setFilter(o.id,o.style.filter,{validate:!1}),o.style},o.style),createEffect(e=>{if(void 0!==o.visible&&o.visible!==e&&a().getSource(t.id)&&a().getLayer(o.id))return a().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}),o.visible},o.visible),createEffect(async()=>{o.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(a().isStyleLoaded()||await a().once("styledata"),a().removeFeatureState({source:t.id,sourceLayer:o.style["source-layer"]}),a().setFeatureState({source:t.id,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.id})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,a]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options);break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),a(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),createEffect(()=>a.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const a=useMap();return onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().addImage(o.id,t)}):a().hasImage(o.id)||a().addImage(o.id,o.image,o.options)}),onCleanup(()=>a().hasImage(o.id)&&a().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().updateImage(o.id,t)}):a().hasImage(o.id)&&a().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default};
 //# sourceMappingURL=index.js.map

package/dist/esm/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n} from 'solid-js'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\n\nexport type Viewport = {\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: number\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  class?: string\n  classList?: {\n    [k: string]: boolean | undefined\n  }\n  viewport?: Viewport\n  options?: MapboxOptions\n  children?: Component[] | Component\n  triggerResize?: boolean\n  onMouseMove?: (event: MapMouseEvent) => void\n  onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLElement\n\n  onCleanup(() => map.remove())\n\n  onMount(() => {\n    map = new mapboxgl.Map({\n      ...props.options,\n      container: mapRef,\n      bounds: props.viewport.bounds,\n      center: props.viewport.center,\n      zoom: props.viewport.zoom || null,\n      pitch: props.viewport.pitch || null,\n      bearing: props.viewport.bearing || null,\n      fitBoundsOptions: { padding: props.viewport.padding },\n    } as MapboxOptions)\n  })\n\n  createEffect(\n    () =>\n      props.onMouseMove &&\n      map.on('mousemove', event => props.onMouseMove(event.lngLat))\n  )\n\n  const _onViewportChange = () => {\n    const viewport: Viewport = {\n      center: map.getCenter(),\n      zoom: map.getZoom(),\n      pitch: map.getPitch(),\n      bearing: map.getBearing(),\n      padding: props.viewport.padding,\n    }\n    props.onViewportChange(viewport)\n  }\n\n  createEffect(\n    () =>\n      props.onViewportChange &&\n      map\n        .on('dragend', _onViewportChange)\n        .on('moveend', _onViewportChange)\n        .on('zoomend', _onViewportChange)\n        .on('rotateend', _onViewportChange)\n        .on('pitchend', _onViewportChange)\n        .on('boxzoomend', _onViewportChange)\n  )\n\n  createEffect(async () => {\n    if (!props.viewport.bounds) return\n\n    map.fitBounds(props.viewport.bounds, {\n      padding: props.viewport.padding,\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      <main\n        ref={mapRef}\n        class={props.class || ''}\n        classList={props.classList}\n        style={{ height: '100%', width: '100%' }}>\n        {props.children}\n      </main>\n    </MapContext.Provider>\n  )\n}\n\nexport { MapGL as default, useMap }\n","import {\n  onMount,\n  onCleanup,\n  createEffect,\n  Component,\n  createContext,\n  useContext,\n  createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  Source,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n  id?: string\n  source: SourceSpecification\n}> = props => {\n  const map: MapboxMap = useMap()\n  props.id = props.id || createUniqueId()\n  // Add Source\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getSource(props.id) && map().addSource(props.id, props.source)\n  })\n\n  // Remove Source\n  onCleanup(() => {\n    map()\n      .getStyle()\n      .layers.forEach(\n        layer => layer.source === props.id && map().removeLayer(layer.id)\n      )\n    map().getSource(props.id) && map().removeSource(props.id)\n  })\n\n  // Update GeoJSON Data\n  createEffect(async () => {\n    if (props.source.type !== 'geojson' && !props.source.data) return\n\n    map().getSource(props.id) &&\n      map().getSource(props.id).setData(props.source.data)\n  })\n\n  return (\n    <SourceContext.Provider value={{ source: props.id }}>\n      {props.children}\n    </SourceContext.Provider>\n  )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  FilterSpecification,\n  StyleSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n  newProps: StyleSpecification = {},\n  prevProps: StyleSpecification = {}\n) => {\n  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n  return [...keys].reduce((acc, key: string) => {\n    const value = newProps[key]\n    if (value !== prevProps[key]) {\n      acc.push([key, value])\n    }\n    return acc\n  }, [])\n}\n\nconst Layer: Component<{\n  id?: string\n  style?: StyleSpecification\n  layer?: CustomLayerInterface\n  filter?: FilterSpecification\n  visible?: boolean\n  sourceId?: string\n  beforeType?:\n    | 'background'\n    | 'fill'\n    | 'line'\n    | 'symbol'\n    | 'raster'\n    | 'circle'\n    | 'fill-extrusion'\n    | 'heatmap'\n    | 'hillshade'\n    | 'sky'\n  beforeId?: string\n  featureState?: { id: number | string; state: object }\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n  props.id = props.id || createUniqueId()\n  // Add Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    if (map().getLayer(props.id)) return\n\n    map().addLayer(\n      props.layer || {\n        ...props.style,\n        id: props.id,\n        source: source.source,\n      },\n      props.beforeType\n        ? map()\n            .getStyle()\n            .layers.find(l => l.type === props.beforeType).id\n        : props.beforeId\n    )\n  })\n\n  // Update Style\n  createEffect((prev: StyleSpecification) => {\n    if (!props.style && map().getLayer(props.id)) return\n\n    diff(props.style.paint, prev.paint).forEach(([key, value]) =>\n      map().setPaintProperty(props.id, key, value)\n    )\n\n    diff(props.style.layout, prev.layout).forEach(([key, value]) =>\n      map().setLayoutProperty(props.id, key, value)\n    )\n\n    if (\n      props.style.minzoom !== prev.minzoom ||\n      props.style.maxzoom !== prev.max\n    )\n      map().setLayerZoomRange(\n        props.id,\n        props.style.minzoom,\n        props.style.maxzoom\n      )\n\n    return props.style\n  }, props.style)\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      props.id,\n      'visibility',\n      props.visible ? 'visible' : 'none',\n      { validate: false }\n    )\n  })\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().loaded() ? null : await map().once('render')\n\n    map().removeFeatureState({\n      source: source.source,\n      sourceLayer: props.style['source-layer'],\n    })\n    map().setFeatureState(\n      {\n        source: source.source,\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.source })\n  })\n\n  // Remove Terrain Layer\n  onCleanup(() => map().setTerrain(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n  type:\n    | 'navigation'\n    | 'scale'\n    | 'attribution'\n    | 'fullscreen'\n    | 'geolocate'\n    | 'language'\n    | 'traffic'\n  options?:\n    | NavigationOptions\n    | ScaleOptions\n    | AttributionOptions\n    | FullscreenOptions\n    | GeolocateOptions\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n  const map: MapboxMap = useMap()\n  const [control, setControl] = createSignal(null)\n  // Add Control\n  onMount(async () => {\n    let control\n\n    switch (props.type) {\n      case 'navigation':\n        control = new mapboxgl.NavigationControl(props.options)\n        break\n      case 'scale':\n        control = new mapboxgl.ScaleControl(props.options)\n        break\n      case 'attribution':\n        control = new mapboxgl.AttributionControl(props.options)\n        break\n      case 'fullscreen':\n        control = new mapboxgl.FullscreenControl(props.options)\n        break\n      case 'geolocate':\n        control = new mapboxgl.GeolocateControl(props.options)\n        break\n      // case 'language':\n      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n      //     .default\n      //   control = new MapboxLanguage(props.options)\n      //   break\n      // case 'traffic':\n      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n      //     .default\n      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n      //   control = new MapboxTraffic(props.options)\n      //   break\n    }\n    control && map().addControl(control, props.position)\n    setControl(control)\n  })\n\n  onCleanup(() => map().removeControl(control()))\n\n  return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n  options?: MarkerSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let marker = null\n\n  // Add Marker\n  onMount(async () => {\n    marker = new mapboxgl.Marker(props.options)\n      .setLngLat(props.lnglat)\n      .setPopup(\n        props.children\n          ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n          : null\n      )\n      .addTo(map())\n  })\n  // Remove Marker\n  onCleanup(() => marker.remove())\n\n  // Update Position\n  createEffect(() => marker.setLngLat(props.lnglat))\n\n  return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n  options?: PopupSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let popup = null\n\n  // Add Popup\n  onMount(async () => {\n    popup = new mapboxgl.Popup(props.options)\n      .setLngLat(props.lnglat)\n      .setDOMContent(<div>{props.children}</div>)\n      .addTo(map())\n  })\n  // Remove Popup\n  onCleanup(() => popup.remove())\n\n  // Update Position\n  createEffect(() => popup.setLngLat(props.lnglat))\n\n  // Update Content\n  createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n  return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  StyleImageInterface,\n  StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n  id: string\n  url?: string\n  image?:\n    | HTMLImageElement\n    | ImageBitmap\n    | ImageData\n    | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n    | StyleImageInterface\n  options?: StyleImageMetadata\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Image\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().addImage(props.id, image)\n      })\n    } else {\n      !map().hasImage(props.id) &&\n        map().addImage(props.id, props.image, props.options)\n    }\n  })\n  // Remove Image\n  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n  // Update Image\n  createEffect(async () => {\n    if (props.image && props.url) return\n\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().updateImage(props.id, image)\n      })\n    } else {\n      map().hasImage(props.id) && map().updateImage(props.id, props.image)\n    }\n  })\n\n  return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","createEffect","onMouseMove","on","event","lngLat","_onViewportChange","getCenter","getZoom","getPitch","getBearing","onViewportChange","async","fitBounds","index","triggerResize","window","requestAnimationFrame","loop","resize","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","Object","keys","reduce","acc","key","value","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","prev","paint","setPaintProperty","layout","setLayoutProperty","minzoom","maxzoom","max","setLayerZoomRange","undefined","visible","validate","filter","setFilter","featureState","loaded","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["import {\n  createEffect,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n} from 'solid-js'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\n\nexport type Viewport = {\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: number\n}\n\nenum Type {\n  flyTo = 'flyTo',\n  easeTo = 'easeTo',\n  jumpTo = 'jumpTo',\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  class?: string\n  classList?: {\n    [k: string]: boolean | undefined\n  }\n  viewport?: Viewport\n  options?: MapboxOptions\n  children?: Element[]\n  triggerResize?: boolean\n  transitionType?: Type\n  onMouseMove?: (event: MapMouseEvent) => void\n  onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLElement\n\n  onCleanup(() => map.remove())\n\n  onMount(() => {\n    map = new mapboxgl.Map({\n      ...props.options,\n      container: mapRef,\n      bounds: props.viewport.bounds,\n      center: props.viewport.center,\n      zoom: props.viewport.zoom || null,\n      pitch: props.viewport.pitch || null,\n      bearing: props.viewport.bearing || null,\n      fitBoundsOptions: { padding: props.viewport.padding },\n    } as MapboxOptions)\n  })\n\n  createEffect(\n    () =>\n      props.onMouseMove &&\n      map.on('mousemove', event => props.onMouseMove(event.lngLat))\n  )\n\n  const _onViewportChange = evt => {\n    if (evt.isInternal) return\n    const viewport: Viewport = {\n      center: map.getCenter(),\n      zoom: map.getZoom(),\n      pitch: map.getPitch(),\n      bearing: map.getBearing(),\n      padding: props.viewport.padding,\n      bounds: props.viewport.bounds,\n    }\n    props.onViewportChange(viewport)\n  }\n\n  createEffect(\n    () =>\n      props.onViewportChange &&\n      map\n        .on('dragend', _onViewportChange)\n        .on('moveend', _onViewportChange)\n        .on('zoomend', _onViewportChange)\n        .on('rotateend', _onViewportChange)\n        .on('pitchend', _onViewportChange)\n        .on('boxzoomend', _onViewportChange)\n  )\n\n  createEffect(prev => {\n    if (props.viewport.bounds != prev) {\n      const camera = map.cameraForBounds(props.viewport.bounds, {\n        padding: props.viewport.padding,\n      })\n      props.onViewportChange({\n        ...props.viewport,\n        ...camera,\n      })\n    }\n    return props.viewport.bounds\n  }, props.viewport.bounds)\n\n  createEffect(async (prev: Viewport) => {\n    const vp: Viewport = props.viewport\n    const nvp: Viewport = {\n      ...(vp.zoom != prev.zoom && { zoom: vp.zoom }),\n      ...(vp.padding != prev.padding && { padding: vp.padding }),\n      ...(vp.bearing != prev.bearing && { bearing: vp.bearing }),\n      ...(vp.pitch != prev.pitch && { pitch: vp.pitch }),\n      ...(vp.center != prev.center && {\n        center: vp.center.lng ? [vp.center.lng, vp.center.lat] : vp.center,\n      }),\n    }\n    if (Object.keys(nvp).length) {\n      map.stop()\n      switch (props.transitionType) {\n        case 'easeTo':\n          map.easeTo(nvp, { isInternal: true })\n        case 'jumpTo':\n          map.jumpTo(nvp, { isInternal: true })\n        default:\n          map.flyTo(nvp, { isInternal: true })\n      }\n    }\n    return vp\n  }, props.viewport)\n\n  let index = 0\n\n  createEffect(() => {\n    if (props.triggerResize) {\n      index = 0\n      window.requestAnimationFrame(function loop() {\n        if (index < 15) {\n          index++\n          window.requestAnimationFrame(loop)\n          start(() => map.resize())\n        }\n      })\n    }\n  })\n\n  return (\n    <MapContext.Provider value={() => map}>\n      <main\n        ref={mapRef}\n        class={props.class || ''}\n        classList={props.classList}\n        style={{ height: '100%', width: '100%' }}>\n        {props.children}\n      </main>\n    </MapContext.Provider>\n  )\n}\n\nexport { MapGL as default, useMap }\n","import {\n  onMount,\n  onCleanup,\n  createEffect,\n  Component,\n  createContext,\n  useContext,\n  createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  Source,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n  id?: string\n  source: SourceSpecification\n}> = props => {\n  const map: MapboxMap = useMap()\n  props.id = props.id || createUniqueId()\n  // Add Source\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getSource(props.id) && map().addSource(props.id, props.source)\n  })\n\n  // Remove Source\n  onCleanup(() => {\n    map()\n      .getStyle()\n      .layers.forEach(\n        layer => layer.source === props.id && map().removeLayer(layer.id)\n      )\n    map().getSource(props.id) && map().removeSource(props.id)\n  })\n\n  // Update GeoJSON Data\n  createEffect(async () => {\n    if (props.source.type !== 'geojson' && !props.source.data) return\n\n    map().getSource(props.id) &&\n      map().getSource(props.id).setData(props.source.data)\n  })\n\n  return (\n    <SourceContext.Provider value={{ id: props.id }}>\n      {props.children}\n    </SourceContext.Provider>\n  )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  FilterSpecification,\n  StyleSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n  newProps: StyleSpecification = {},\n  prevProps: StyleSpecification = {}\n) => {\n  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n  return [...keys].reduce((acc, key: string) => {\n    const value = newProps[key]\n    if (value !== prevProps[key]) {\n      acc.push([key, value])\n    }\n    return acc\n  }, [])\n}\n\nconst Layer: Component<{\n  id?: string\n  style?: StyleSpecification\n  layer?: CustomLayerInterface\n  filter?: FilterSpecification\n  visible?: boolean\n  sourceId?: string\n  beforeType?:\n    | 'background'\n    | 'fill'\n    | 'line'\n    | 'symbol'\n    | 'raster'\n    | 'circle'\n    | 'fill-extrusion'\n    | 'heatmap'\n    | 'hillshade'\n    | 'sky'\n  beforeId?: string\n  featureState?: { id: number | string; state: object }\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n  props.id = props.id || createUniqueId()\n  // Add Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    if (map().getLayer(props.id)) return\n\n    map().addLayer(\n      props.layer || {\n        ...props.style,\n        id: props.id,\n        source: source.id,\n      },\n      props.beforeType\n        ? map()\n            .getStyle()\n            .layers.find(l => l.type === props.beforeType).id\n        : props.beforeId\n    )\n  })\n\n  // Update Style\n  createEffect((prev: StyleSpecification) => {\n    if (\n      !props.style ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    if (props.style.layout !== prev?.layout)\n      diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n        map().setLayoutProperty(props.id, key, value, { validate: false })\n      )\n\n    if (props.style.paint !== prev?.paint)\n      diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n        map().setPaintProperty(props.id, key, value, { validate: false })\n      )\n\n    if (\n      props.style.minzoom !== prev?.minzoom ||\n      props.style.maxzoom !== prev?.maxzoom\n    )\n      map().setLayerZoomRange(\n        props.id,\n        props.style.minzoom,\n        props.style.maxzoom\n      )\n\n    if (props.style.filter !== prev?.filter)\n      map().setFilter(props.id, props.style.filter, { validate: false })\n\n    return props.style\n  }, props.style)\n\n  // Update Visibility\n  createEffect((prev: boolean) => {\n    if (\n      props.visible === undefined ||\n      props.visible === prev ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    map().setLayoutProperty(\n      props.id,\n      'visibility',\n      props.visible ? 'visible' : 'none',\n      { validate: false }\n    )\n    return props.visible\n  }, props.visible)\n\n  // Update Filter\n  createEffect(async () => {\n    if (!props.filter) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFilter(props.id, props.filter)\n  })\n\n  // Update Feature State\n  createEffect(async () => {\n    if (!props.featureState || !props.featureState.id) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    map().removeFeatureState({\n      source: source.id,\n      sourceLayer: props.style['source-layer'],\n    })\n    map().setFeatureState(\n      {\n        source: source.id,\n        sourceLayer: props.style['source-layer'],\n        id: props.featureState.id,\n      },\n      props.featureState.state\n    )\n  })\n\n  return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n  style: FogSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Fog Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.style)\n  })\n  // Remove Fog Layer\n  onCleanup(() => map().setFog(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n  style: StyleSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const layerId = '_sky'\n  // Add Sky Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n  })\n\n  // Remove Sky Layer\n  onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setLayoutProperty(\n      layerId,\n      'visibility',\n      props.visible ? 'visible' : 'none'\n    )\n  })\n\n  return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  TerrainSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n  style: TerrainSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n\n  // Add Terrain Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain({ ...props.style, source: source.id })\n  })\n\n  // Remove Terrain Layer\n  onCleanup(() => map().setTerrain(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n  type:\n    | 'navigation'\n    | 'scale'\n    | 'attribution'\n    | 'fullscreen'\n    | 'geolocate'\n    | 'language'\n    | 'traffic'\n  options?:\n    | NavigationOptions\n    | ScaleOptions\n    | AttributionOptions\n    | FullscreenOptions\n    | GeolocateOptions\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n  const map: MapboxMap = useMap()\n  const [control, setControl] = createSignal(null)\n  // Add Control\n  onMount(async () => {\n    let control\n\n    switch (props.type) {\n      case 'navigation':\n        control = new mapboxgl.NavigationControl(props.options)\n        break\n      case 'scale':\n        control = new mapboxgl.ScaleControl(props.options)\n        break\n      case 'attribution':\n        control = new mapboxgl.AttributionControl(props.options)\n        break\n      case 'fullscreen':\n        control = new mapboxgl.FullscreenControl(props.options)\n        break\n      case 'geolocate':\n        control = new mapboxgl.GeolocateControl(props.options)\n        break\n      // case 'language':\n      //   // @ts-ignore\n      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n      //     .default\n      //   control = new MapboxLanguage(props.options)\n      //   break\n      // case 'traffic':\n      //   // @ts-ignore\n      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n      //     .default\n      //   // @ts-ignore\n      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n      //   control = new MapboxTraffic(props.options)\n      //   break\n    }\n    control && map().addControl(control, props.position)\n    setControl(control)\n  })\n\n  onCleanup(() => map().removeControl(control()))\n\n  return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n  options?: MarkerSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let marker = null\n\n  // Add Marker\n  onMount(async () => {\n    marker = new mapboxgl.Marker(props.options)\n      .setLngLat(props.lnglat)\n      .setPopup(\n        props.children\n          ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n          : null\n      )\n      .addTo(map())\n  })\n  // Remove Marker\n  onCleanup(() => marker.remove())\n\n  // Update Position\n  createEffect(() => marker.setLngLat(props.lnglat))\n\n  return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n  options?: PopupSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let popup = null\n\n  // Add Popup\n  onMount(async () => {\n    popup = new mapboxgl.Popup(props.options)\n      .setLngLat(props.lnglat)\n      .setDOMContent(<div>{props.children}</div>)\n      .addTo(map())\n  })\n  // Remove Popup\n  onCleanup(() => popup.remove())\n\n  // Update Position\n  createEffect(() => popup.setLngLat(props.lnglat))\n\n  // Update Content\n  createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n  return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  StyleImageInterface,\n  StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n  id: string\n  url?: string\n  image?:\n    | HTMLImageElement\n    | ImageBitmap\n    | ImageData\n    | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n    | StyleImageInterface\n  options?: StyleImageMetadata\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Image\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().addImage(props.id, image)\n      })\n    } else {\n      !map().hasImage(props.id) &&\n        map().addImage(props.id, props.image, props.options)\n    }\n  })\n  // Remove Image\n  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n  // Update Image\n  createEffect(async () => {\n    if (props.image && props.url) return\n\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().updateImage(props.id, image)\n      })\n    } else {\n      map().hasImage(props.id) && map().updateImage(props.id, props.image)\n    }\n  })\n\n  return <></>\n}\n\nexport default Image\n"],"names":["Type","pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","createEffect","onMouseMove","on","event","lngLat","_onViewportChange","evt","isInternal","getCenter","getZoom","getPitch","getBearing","onViewportChange","prev","camera","cameraForBounds","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","filter","setFilter","undefined","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}

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

@@ -24,13 +24,16 @@ const Control = props => {
                 control = new mapboxgl.GeolocateControl(props.options);
                 break;
             // case 'language':
+            //   // @ts-ignore
             //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))
             //     .default
             //   control = new MapboxLanguage(props.options)
             //   break
             // case 'traffic':
+            //   // @ts-ignore
             //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))
             //     .default
+            //   // @ts-ignore
             //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')
             //   control = new MapboxTraffic(props.options)
             //   break

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

@@ -23,7 +23,7 @@ const Layer = props => {
         map().addLayer(props.layer || {
             ...props.style,
             id: props.id,
-            source: source.source,
+            source: source.id,
         }, props.beforeType
             ? map()
                 .getStyle()
@@ -32,22 +32,31 @@ const Layer = props => {
     });
     // Update Style
     createEffect((prev) => {
-        if (!props.style && map().getLayer(props.id))
+        if (!props.style ||
+            !map().getSource(source.id) ||
+            !map().getLayer(props.id))
             return;
-        diff(props.style.paint, prev.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value));
-        diff(props.style.layout, prev.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value));
-        if (props.style.minzoom !== prev.minzoom ||
-            props.style.maxzoom !== prev.max)
+        if (props.style.layout !== prev?.layout)
+            diff(props.style.layout, prev?.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value, { validate: false }));
+        if (props.style.paint !== prev?.paint)
+            diff(props.style.paint, prev?.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value, { validate: false }));
+        if (props.style.minzoom !== prev?.minzoom ||
+            props.style.maxzoom !== prev?.maxzoom)
             map().setLayerZoomRange(props.id, props.style.minzoom, props.style.maxzoom);
+        if (props.style.filter !== prev?.filter)
+            map().setFilter(props.id, props.style.filter, { validate: false });
         return props.style;
     }, props.style);
     // Update Visibility
-    createEffect(async () => {
-        if (props.visible === undefined)
+    createEffect((prev) => {
+        if (props.visible === undefined ||
+            props.visible === prev ||
+            !map().getSource(source.id) ||
+            !map().getLayer(props.id))
             return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
         map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
-    });
+        return props.visible;
+    }, props.visible);
     // Update Filter
     createEffect(async () => {
         if (!props.filter)
@@ -59,13 +68,13 @@ const Layer = props => {
     createEffect(async () => {
         if (!props.featureState || !props.featureState.id)
             return;
-        map().loaded() ? null : await map().once('render');
+        !map().isStyleLoaded() && (await map().once('styledata'));
         map().removeFeatureState({
-            source: source.source,
+            source: source.id,
             sourceLayer: props.style['source-layer'],
         });
         map().setFeatureState({
-            source: source.source,
+            source: source.id,
             sourceLayer: props.style['source-layer'],
             id: props.featureState.id,
         }, props.featureState.state);

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

@@ -1,6 +1,12 @@
 import { createEffect, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
+var Type;
+(function (Type) {
+    Type["flyTo"] = "flyTo";
+    Type["easeTo"] = "easeTo";
+    Type["jumpTo"] = "jumpTo";
+})(Type || (Type = {}));
 const [pending, start] = useTransition();
 const MapContext = createContext();
 const useMap = () => useContext(MapContext);
@@ -22,13 +28,16 @@ const MapGL = props => {
     });
     createEffect(() => props.onMouseMove &&
         map.on('mousemove', event => props.onMouseMove(event.lngLat)));
-    const _onViewportChange = () => {
+    const _onViewportChange = evt => {
+        if (evt.isInternal)
+            return;
         const viewport = {
             center: map.getCenter(),
             zoom: map.getZoom(),
             pitch: map.getPitch(),
             bearing: map.getBearing(),
             padding: props.viewport.padding,
+            bounds: props.viewport.bounds,
         };
         props.onViewportChange(viewport);
     };
@@ -40,13 +49,42 @@ const MapGL = props => {
             .on('rotateend', _onViewportChange)
             .on('pitchend', _onViewportChange)
             .on('boxzoomend', _onViewportChange));
-    createEffect(async () => {
-        if (!props.viewport.bounds)
-            return;
-        map.fitBounds(props.viewport.bounds, {
-            padding: props.viewport.padding,
-        });
-    });
+    createEffect(prev => {
+        if (props.viewport.bounds != prev) {
+            const camera = map.cameraForBounds(props.viewport.bounds, {
+                padding: props.viewport.padding,
+            });
+            props.onViewportChange({
+                ...props.viewport,
+                ...camera,
+            });
+        }
+        return props.viewport.bounds;
+    }, props.viewport.bounds);
+    createEffect(async (prev) => {
+        const vp = props.viewport;
+        const nvp = {
+            ...(vp.zoom != prev.zoom && { zoom: vp.zoom }),
+            ...(vp.padding != prev.padding && { padding: vp.padding }),
+            ...(vp.bearing != prev.bearing && { bearing: vp.bearing }),
+            ...(vp.pitch != prev.pitch && { pitch: vp.pitch }),
+            ...(vp.center != prev.center && {
+                center: vp.center.lng ? [vp.center.lng, vp.center.lat] : vp.center,
+            }),
+        };
+        if (Object.keys(nvp).length) {
+            map.stop();
+            switch (props.transitionType) {
+                case 'easeTo':
+                    map.easeTo(nvp, { isInternal: true });
+                case 'jumpTo':
+                    map.jumpTo(nvp, { isInternal: true });
+                default:
+                    map.flyTo(nvp, { isInternal: true });
+            }
+        }
+        return vp;
+    }, props.viewport);
     let index = 0;
     createEffect(() => {
         if (props.triggerResize) {

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

@@ -24,7 +24,7 @@ const SourceComponent = props => {
         map().getSource(props.id) &&
             map().getSource(props.id).setData(props.source.data);
     });
-    return (<SourceContext.Provider value={{ source: props.id }}>
+    return (<SourceContext.Provider value={{ id: props.id }}>
       {props.children}
     </SourceContext.Provider>);
 };

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

@@ -7,7 +7,7 @@ const Terrain = props => {
     // Add Terrain Layer
     onMount(async () => {
         !map().isStyleLoaded() && (await map().once('styledata'));
-        map().setTerrain({ ...props.style, source: source.source });
+        map().setTerrain({ ...props.style, source: source.id });
     });
     // Remove Terrain Layer
     onCleanup(() => map().setTerrain(null));

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

@@ -12,6 +12,11 @@ export declare type Viewport = {
     bearing?: number;
     padding?: number;
 };
+declare enum Type {
+    flyTo = "flyTo",
+    easeTo = "easeTo",
+    jumpTo = "jumpTo"
+}
 declare const useMap: () => MapboxMap;
 declare const MapGL: Component<{
     class?: string;
@@ -20,8 +25,9 @@ declare const MapGL: Component<{
     };
     viewport?: Viewport;
     options?: MapboxOptions;
-    children?: Component[] | Component;
+    children?: Element[];
     triggerResize?: boolean;
+    transitionType?: Type;
     onMouseMove?: (event: MapMouseEvent) => void;
     onViewportChange?: (viewport: Viewport) => void;
 }>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.3",
+  "version": "1.1.7",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "author": "kaihuebner",
@@ -33,16 +33,20 @@
     "solidjs"
   ],
   "homepage": "https://github.com/gishub4/solid-map-gl#readme",
+  "browserList": [
+    "defaults",
+    "not ie 11"
+  ],
   "dependencies": {
     "mapbox-gl": "^2.6.1",
-    "solid-js": "^1.2.6"
+    "solid-js": "^1.3.3"
   },
   "devDependencies": {
     "@types/mapbox-gl": "^2.4.2",
-    "rollup": "^2.59.0",
+    "rollup": "^2.65.0",
     "rollup-plugin-import-css": "^3.0.2",
     "rollup-plugin-uglify": "^6.0.4",
-    "rollup-preset-solid": "^1.0.1",
-    "typescript": "^4.4.4"
+    "rollup-preset-solid": "^1.1.0",
+    "typescript": "^4.5.5"
   }
 }