solid-map-gl 1.1.1 → 1.1.5

package/README.md

@@ -7,6 +7,10 @@
 ![types](https://badgen.net/npm/types/solid-map-gl)
 ![downloads](https://badgen.net/npm/dt/solid-map-gl)
 
+![size](https://badgen.net/bundlephobia/min/solid-map-gl)
+![zip](https://badgen.net/bundlephobia/minzip/solid-map-gl)
+![treeshaking](https://badgen.net/bundlephobia/tree-shaking/solid-map-gl)
+
 [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/)
 
 - [Installation](#installation)
@@ -17,7 +21,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 +74,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 +94,14 @@ import { createSignal } from 'solid-js'
 import MapGL, { Viewport } from 'solid-map-gl'
 
 const [viewport, setViewport] = createSignal({
-    center: [-122.41, 37.78]
-    zoom: 11,
+    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)}>
@@ -120,7 +122,7 @@ 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 +150,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 +184,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>
 ```
 
@@ -223,7 +227,7 @@ import { ScatterplotLayer } from '@deck.gl/layers'
 
 const [viewport, setViewport] = createSignal({
     center: [-74.5, 40],
-    zoom: 9,
+    zoom: 9
 })
 
 const myDeckLayer = new MapboxLayer({
@@ -232,13 +236,13 @@ const myDeckLayer = new MapboxLayer({
   data: [{ position: [-74.5, 40], size: 1000 }],
   getPosition: d => d.position,
   getRadius: d => d.size,
-  getColor: [255, 0, 0],
+  getColor: [255, 0, 0]
 })
 
 <MapGL
     options={{
         accessToken: { MAPBOX_ACCESS_TOKEN },
-        style: 'mapbox://styles/mapbox/light-v10',
+        style: 'mapbox://styles/mapbox/light-v10'
     }}
     viewport={viewport()}
     onViewportChange={evt => setViewport(evt)}>
@@ -248,10 +252,16 @@ const myDeckLayer = new MapboxLayer({
 
 ## 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,389 +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);
-const [pending, start] = useTransition();
-const MapContext = createContext();
-
-const useMap = () => useContext(MapContext);
-
-const MapGL = props => {
-  let map;
-  let mapRef;
-  onCleanup(() => map.remove());
-  onMount(() => {
-    map = new mapboxgl.Map({ ...props.options,
-      container: mapRef,
-      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
-      }
-    });
-  });
-  createEffect(() => props.onMouseMove && map.on('mousemove', event => props.onMouseMove(event.lngLat)));
-
-  const _onViewportChange = () => {
-    const viewport = {
-      center: map.getCenter(),
-      zoom: map.getZoom(),
-      pitch: map.getPitch(),
-      bearing: map.getBearing(),
-      padding: props.viewport.padding
-    };
-    props.onViewportChange(viewport);
-  };
-
-  createEffect(() => props.onViewportChange && map.on('dragend', _onViewportChange).on('moveend', _onViewportChange).on('zoomend', _onViewportChange).on('rotateend', _onViewportChange).on('pitchend', _onViewportChange).on('boxzoomend', _onViewportChange));
-  createEffect(async () => {
-    if (!props.viewport.bounds) return; // await map.once('idle')
-
-    map.fitBounds(props.viewport.bounds, {
-      padding: props.viewport.padding
-    });
-  });
-  let index = 0;
-  createEffect(() => {
-    if (props.triggerResize) {
-      index = 0;
-      window.requestAnimationFrame(function loop() {
-        if (index < 15) {
-          index++;
-          window.requestAnimationFrame(loop);
-          start(() => map.resize());
-        }
-      });
-    }
-  });
-  return createComponent(MapContext.Provider, {
-    value: () => map,
-
-    get children() {
-      const _el$ = _tmpl$$2.cloneNode(true);
-
-      const _ref$ = mapRef;
-      typeof _ref$ === "function" ? _ref$(_el$) : mapRef = _el$;
-
-      _el$.style.setProperty("height", "100%");
-
-      _el$.style.setProperty("width", "100%");
-
-      insert(_el$, () => props.children);
-
-      effect(_p$ => {
-        const _v$ = props.class || '',
-              _v$2 = props.classList;
-
-        _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
-        _p$._v$2 = classList(_el$, _v$2, _p$._v$2);
-        return _p$;
-      }, {
-        _v$: undefined,
-        _v$2: undefined
-      });
-
-      return _el$;
-    }
-
-  });
-};
-
-const SourceContext = createContext();
-
-const useSource = () => useContext(SourceContext);
-
-const SourceComponent = props => {
-  const map = useMap();
-  props.id = props.id || createUniqueId(); // Add Source
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    !map().getSource(props.id) && map().addSource(props.id, props.source);
-  }); // Remove Source
-
-  onCleanup(() => {
-    map().getStyle().layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
-    map().getSource(props.id) && map().removeSource(props.id);
-  }); // Update GeoJSON Data
-
-  createEffect(async () => {
-    if (props.source.type !== 'geojson' && !props.source.data) return;
-    map().getSource(props.id) && map().getSource(props.id).setData(props.source.data);
-  });
-  return createComponent(SourceContext.Provider, {
-    get value() {
-      return {
-        source: props.id
-      };
-    },
-
-    get children() {
-      return props.children;
-    }
-
-  });
-};
-
-const diff = (newProps = {}, prevProps = {}) => {
-  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
-  return [...keys].reduce((acc, key) => {
-    const value = newProps[key];
-
-    if (value !== prevProps[key]) {
-      acc.push([key, value]);
-    }
-
-    return acc;
-  }, []);
-};
-
-const Layer = props => {
-  const map = useMap();
-  const source = useSource();
-  props.id = props.id || createUniqueId(); // Add Layer
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    if (map().getLayer(props.id)) return;
-    map().addLayer(props.layer || { ...props.style,
-      id: props.id,
-      source: source.source
-    }, props.beforeType ? map().getStyle().layers.find(l => l.type === props.beforeType).id : props.beforeId);
-  }); // Update Style
-
-  createEffect(prev => {
-    if (!props.style && 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) map().setLayerZoomRange(props.id, props.style.minzoom, props.style.maxzoom);
-    return props.style;
-  }, props.style); // Update Visibility
-
-  createEffect(async () => {
-    if (props.visible === undefined) return;
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', {
-      validate: false
-    });
-  }); // Update Filter
-
-  createEffect(async () => {
-    if (!props.filter) return;
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setFilter(props.id, props.filter);
-  }); // Update Feature State
-
-  createEffect(async () => {
-    if (!props.featureState?.id) return;
-    map().loaded() ? null : await map().once('render');
-    map().removeFeatureState({
-      source: source.source,
-      sourceLayer: props.style['source-layer']
-    });
-    map().setFeatureState({
-      source: source.source,
-      sourceLayer: props.style['source-layer'],
-      id: props.featureState.id
-    }, props.featureState.state);
-  });
-  return props.children;
-};
-
-const Fog = props => {
-  const map = useMap(); // Add Fog Layer
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setFog(props.style);
-  }); // Remove Fog Layer
-
-  onCleanup(() => map().setFog(null)); // Update Visibility
-
-  createEffect(async () => {
-    if (props.visible === undefined) return;
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setFog(props.visible ? props.style : null);
-  });
-  return props.children;
-};
-
-const Sky = props => {
-  const map = useMap();
-  const layerId = '_sky'; // Add Sky Layer
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    !map().getLayer(layerId) && map().addLayer({ ...props.style,
-      id: layerId
-    });
-  }); // Remove Sky Layer
-
-  onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId)); // Update Visibility
-
-  createEffect(async () => {
-    if (props.visible === undefined) return;
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setLayoutProperty(layerId, 'visibility', props.visible ? 'visible' : 'none');
-  });
-  return props.children;
-};
-
-const Terrain = props => {
-  const map = useMap();
-  const source = useSource(); // Add Terrain Layer
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setTerrain({ ...props.style,
-      source: source.source
-    });
-  }); // Remove Terrain Layer
-
-  onCleanup(() => map().setTerrain(null)); // Update Visibility
-
-  createEffect(async () => {
-    if (props.visible === undefined) return;
-    !map().isStyleLoaded() && (await map().once('styledata'));
-    map().setTerrain(props.visible ? props.style : null);
-  });
-  return props.children;
-};
-
-const Control = props => {
-  const map = useMap();
-  const [control, setControl] = createSignal(null); // Add Control
-
-  onMount(async () => {
-    let control;
-
-    switch (props.type) {
-      case 'navigation':
-        control = new mapboxgl.NavigationControl(props.options);
-        break;
-
-      case 'scale':
-        control = new mapboxgl.ScaleControl(props.options);
-        break;
-
-      case 'attribution':
-        control = new mapboxgl.AttributionControl(props.options);
-        break;
-
-      case 'fullscreen':
-        control = new mapboxgl.FullscreenControl(props.options);
-        break;
-
-      case 'geolocate':
-        control = new mapboxgl.GeolocateControl(props.options);
-        break;
-      // case 'language':
-      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))
-      //     .default
-      //   control = new MapboxLanguage(props.options)
-      //   break
-      // case 'traffic':
-      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))
-      //     .default
-      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')
-      //   control = new MapboxTraffic(props.options)
-      //   break
-    }
-
-    control && map().addControl(control, props.position);
-    setControl(control);
-  });
-  onCleanup(() => map().removeControl(control()));
-  return props.children;
-};
-
-const _tmpl$$1 = template(`<div></div>`, 2);
-
-const Marker = props => {
-  const map = useMap();
-  let marker = null; // Add Marker
-
-  onMount(async () => {
-    marker = new mapboxgl.Marker(props.options).setLngLat(props.lnglat).setPopup(props.children ? new mapboxgl.Popup().setDOMContent((() => {
-      const _el$ = _tmpl$$1.cloneNode(true);
-
-      insert(_el$, () => props.children);
-
-      return _el$;
-    })()) : null).addTo(map());
-  }); // Remove Marker
-
-  onCleanup(() => marker.remove()); // Update Position
-
-  createEffect(() => marker.setLngLat(props.lnglat));
-  return [];
-};
-
-const _tmpl$ = template(`<div></div>`, 2);
-
-const Popup = props => {
-  const map = useMap();
-  let popup = null; // Add Popup
-
-  onMount(async () => {
-    popup = new mapboxgl.Popup(props.options).setLngLat(props.lnglat).setDOMContent((() => {
-      const _el$ = _tmpl$.cloneNode(true);
-
-      insert(_el$, () => props.children);
-
-      return _el$;
-    })()).addTo(map());
-  }); // Remove Popup
-
-  onCleanup(() => popup.remove()); // Update Position
-
-  createEffect(() => popup.setLngLat(props.lnglat)); // Update Content
-
-  createEffect(() => popup.setDOMContent((() => {
-    const _el$2 = _tmpl$.cloneNode(true);
-
-    insert(_el$2, () => props.children);
-
-    return _el$2;
-  })()));
-  return [];
-};
-
-const Image = props => {
-  const map = useMap(); // Add Image
-
-  onMount(async () => {
-    !map().isStyleLoaded() && (await map().once('styledata'));
-
-    if (props.url) {
-      map().loadImage(props.url, (error, image) => {
-        if (error) throw error;
-        !map().hasImage(props.id) && map().addImage(props.id, image);
-      });
-    } else {
-      !map().hasImage(props.id) && map().addImage(props.id, props.image, props.options);
-    }
-  }); // Remove Image
-
-  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id)); // Update Image
-
-  createEffect(async () => {
-    if (props.image && props.url) return;
-
-    if (props.url) {
-      map().loadImage(props.url, (error, image) => {
-        if (error) throw error;
-        !map().hasImage(props.id) && map().updateImage(props.id, image);
-      });
-    } else {
-      map().hasImage(props.id) && map().updateImage(props.id, props.image);
-    }
-  });
-  return [];
-};
-
-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),[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{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(async e=>{if(o.style&&a().getSource(t.id)&&a().getLayer(o.id))return a().isSourceLoaded(t.id)||await a().once("data"),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().getSource(t.id)&&a().getLayer(o.id)&&(a().isSourceLoaded(t.id)||await a().once("data"),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: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?: any\n  viewport?: Viewport\n  options?: MapboxOptions\n  children?: any[] | any\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    // await map.once('idle')\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\ntype KV = {\n  string?: any\n}\n\nconst diff = (newProps: KV = {}, prevProps: KV = {}) => {\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: any) => {\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?.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","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","keys","Set","Object","reduce","acc","key","value","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","prev","paint","setPaintProperty","layout","setLayoutProperty","minzoom","maxzoom","max","setLayerZoomRange","visible","undefined","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\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  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={{ 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(async (prev: StyleSpecification) => {\n    if (\n      !props.style ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    !map().isSourceLoaded(source.id) && (await map().once('data'))\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 (\n      props.visible === undefined ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    !map().isSourceLoaded(source.id) && (await map().once('data'))\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.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":["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","Provider","value","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","push","Layer","getLayer","addLayer","style","beforeType","find","l","beforeId","prev","isSourceLoaded","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":"8QA0BM,CAACA,QAASC,OAASC,gBAEnBC,WAAaC,gBACbC,OAAS,IAAMC,WAAWH,YAE1BI,MAWDC,QACCC,EACAC,EAEJC,UAAU,IAAMF,EAAIG,UAEpBC,QAAQ,KACNJ,EAAM,IAAIK,SAASC,IAAI,IAClBP,EAAMQ,QACTC,UAAWP,EACXQ,OAAQV,EAAMW,SAASD,OACvBE,OAAQZ,EAAMW,SAASC,OACvBC,KAAMb,EAAMW,SAASE,MAAQ,KAC7BC,MAAOd,EAAMW,SAASG,OAAS,KAC/BC,QAASf,EAAMW,SAASI,SAAW,KACnCC,iBAAkB,CAAEC,QAASjB,EAAMW,SAASM,aAIhDC,aACE,IACElB,EAAMmB,aACNlB,EAAImB,GAAG,YAAaC,GAASrB,EAAMmB,YAAYE,EAAMC,gBAGnDC,EAAoB,SAClBZ,EAAqB,CACzBC,OAAQX,EAAIuB,YACZX,KAAMZ,EAAIwB,UACVX,MAAOb,EAAIyB,WACXX,QAASd,EAAI0B,aACbV,QAASjB,EAAMW,SAASM,SAE1BjB,EAAM4B,iBAAiBjB,IAGzBO,aACE,IACElB,EAAM4B,kBACN3B,EACGmB,GAAG,UAAWG,GACdH,GAAG,UAAWG,GACdH,GAAG,UAAWG,GACdH,GAAG,YAAaG,GAChBH,GAAG,WAAYG,GACfH,GAAG,aAAcG,IAGxBL,aAAaW,UACN7B,EAAMW,SAASD,QAEpBT,EAAI6B,UAAU9B,EAAMW,SAASD,OAAQ,CACnCO,QAASjB,EAAMW,SAASM,gBAIxBc,EAAQ,SAEZb,aAAa,KACPlB,EAAMgC,gBACRD,EAAQ,EACRE,OAAOC,sBAAsB,SAASC,IAChCJ,EAAQ,KACVA,IACAE,OAAOC,sBAAsBC,GAC7B1C,MAAM,IAAMQ,EAAImC,gCAOrBzC,WAAW0C,UAASC,MAAO,IAAMrC,kDAEzBC,kCAAAA,0FAIJF,EAAMuC,2BAHAvC,EAAMwC,OAAS,KACXxC,EAAMyC,kHCtGnBC,cAAgB9C,gBAEhB+C,UAAY,IAAc7C,WAAW4C,eAErCE,gBAGD5C,UACGC,EAAiBJ,gBACvBG,EAAM6C,GAAK7C,EAAM6C,IAAMC,iBAEvBzC,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC3C/C,IAAMgD,UAAUjD,EAAM6C,KAAO5C,IAAMiD,UAAUlD,EAAM6C,GAAI7C,EAAMmD,UAIhEhD,UAAU,KACRF,IACGmD,WACAC,OAAOC,QACNC,GAASA,EAAMJ,SAAWnD,EAAM6C,IAAM5C,IAAMuD,YAAYD,EAAMV,KAElE5C,IAAMgD,UAAUjD,EAAM6C,KAAO5C,IAAMwD,aAAazD,EAAM6C,MAIxD3B,aAAaW,WACe,YAAtB7B,EAAMmD,OAAOO,MAAuB1D,EAAMmD,OAAOQ,OAErD1D,IAAMgD,UAAUjD,EAAM6C,KACpB5C,IAAMgD,UAAUjD,EAAM6C,IAAIe,QAAQ5D,EAAMmD,OAAOQ,wBAIhDjB,cAAcL,4BAAgB,CAAEQ,GAAI7C,EAAM6C,2BACxC7C,EAAMuC,aCzCPsB,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,MAoBDvE,UACGC,EAAiBJ,SACjBsD,EAA8BR,mBACpC3C,EAAM6C,GAAK7C,EAAM6C,IAAMC,iBAEvBzC,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAExC/C,IAAMuE,SAASxE,EAAM6C,KAEzB5C,IAAMwE,SACJzE,EAAMuD,OAAS,IACVvD,EAAM0E,MACT7B,GAAI7C,EAAM6C,GACVM,OAAQA,EAAON,IAEjB7C,EAAM2E,WACF1E,IACGmD,WACAC,OAAOuB,KAAKC,GAAKA,EAAEnB,OAAS1D,EAAM2E,YAAY9B,GACjD7C,EAAM8E,YAKd5D,aAAoB6D,MAAAA,OAEf/E,EAAM0E,OACNzE,IAAMgD,UAAUE,EAAON,KACvB5C,IAAMuE,SAASxE,EAAM6C,WAIvB5C,IAAM+E,eAAe7B,EAAON,WAAc5C,IAAM+C,KAAK,QAEtDa,KAAK7D,EAAM0E,MAAMO,MAAOF,EAAKE,OAAO3B,QAAQ,CAAA,CAAEe,EAAK/B,KACjDrC,IAAMiF,iBAAiBlF,EAAM6C,GAAIwB,EAAK/B,IAGxCuB,KAAK7D,EAAM0E,MAAMS,OAAQJ,EAAKI,QAAQ7B,QAAQ,CAAA,CAAEe,EAAK/B,KACnDrC,IAAMmF,kBAAkBpF,EAAM6C,GAAIwB,EAAK/B,IAIvCtC,EAAM0E,MAAMW,UAAYN,EAAKM,SAC7BrF,EAAM0E,MAAMY,UAAYP,EAAKQ,KAE7BtF,IAAMuF,kBACJxF,EAAM6C,GACN7C,EAAM0E,MAAMW,QACZrF,EAAM0E,MAAMY,SAGTtF,EAAM0E,OACZ1E,EAAM0E,OAGTxD,aAAaW,eAES4D,IAAlBzF,EAAM0F,SACLzF,IAAMgD,UAAUE,EAAON,KACvB5C,IAAMuE,SAASxE,EAAM6C,MAIvB5C,IAAM+E,eAAe7B,EAAON,WAAc5C,IAAM+C,KAAK,QACtD/C,IAAMmF,kBACJpF,EAAM6C,GACN,aACA7C,EAAM0F,QAAU,UAAY,OAC5B,CAAEC,UAAU,OAKhBzE,aAAaW,UACN7B,EAAM4F,SAEV3F,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAM4F,UAAU7F,EAAM6C,GAAI7C,EAAM4F,WAIlC1E,aAAaW,UACN7B,EAAM8F,cAAiB9F,EAAM8F,aAAajD,KAE/C5C,IAAM8F,gBAAwB9F,IAAM+C,KAAK,UAEzC/C,IAAM+F,mBAAmB,CACvB7C,OAAQA,EAAON,GACfoD,YAAajG,EAAM0E,MAAM,kBAE3BzE,IAAMiG,gBACJ,CACE/C,OAAQA,EAAON,GACfoD,YAAajG,EAAM0E,MAAM,gBACzB7B,GAAI7C,EAAM8F,aAAajD,IAEzB7C,EAAM8F,aAAaK,UAIhBnG,EAAMuC,UC9IT6D,IAGDpG,UACGC,EAAiBJ,gBAEvBQ,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAMoG,OAAOrG,EAAM0E,SAGrBvE,UAAU,IAAMF,IAAMoG,OAAO,OAG7BnF,aAAaW,eACW4D,IAAlBzF,EAAM0F,UAETzF,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAMoG,OAAOrG,EAAM0F,QAAU1F,EAAM0E,MAAQ,SAGtC1E,EAAMuC,UCrBT+D,IAGDtG,UACGC,EAAiBJ,SACjB0G,EAAU,cAEhBlG,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC3C/C,IAAMuE,SAAS+B,IAAYtG,IAAMwE,SAAS,IAAKzE,EAAM0E,MAAO7B,GAAI0D,MAInEpG,UAAU,IAAMF,IAAMuE,SAAS+B,IAAYtG,IAAMuD,YAAY+C,IAG7DrF,aAAaW,eACW4D,IAAlBzF,EAAM0F,UAETzF,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAMmF,kBACJmB,EACA,aACAvG,EAAM0F,QAAU,UAAY,WAIzB1F,EAAMuC,UCvBTiE,QAGDxG,UACGC,EAAiBJ,SACjBsD,EAA8BR,mBAGpCtC,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAMwG,WAAW,IAAKzG,EAAM0E,MAAOvB,OAAQA,EAAON,OAIpD1C,UAAU,IAAMF,IAAMwG,WAAW,OAGjCvF,aAAaW,eACW4D,IAAlBzF,EAAM0F,UAETzF,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aAC5C/C,IAAMwG,WAAWzG,EAAM0F,QAAU1F,EAAM0E,MAAQ,SAG1C1E,EAAMuC,UCvBTmE,QAgBD1G,UACGC,EAAiBJ,SACjB,CAAC8G,EAASC,GAAcC,aAAa,aAE3CxG,QAAQwB,cACF8E,SAEI3G,EAAM0D,UACP,aACHiD,EAAU,IAAIrG,SAASwG,kBAAkB9G,EAAMQ,mBAE5C,QACHmG,EAAU,IAAIrG,SAASyG,aAAa/G,EAAMQ,mBAEvC,cACHmG,EAAU,IAAIrG,SAAS0G,mBAAmBhH,EAAMQ,mBAE7C,aACHmG,EAAU,IAAIrG,SAAS2G,kBAAkBjH,EAAMQ,mBAE5C,YACHmG,EAAU,IAAIrG,SAAS4G,iBAAiBlH,EAAMQ,SAiBlDmG,GAAW1G,IAAMkH,WAAWR,EAAS3G,EAAMoH,UAC3CR,EAAWD,KAGbxG,UAAU,IAAMF,IAAMoH,cAAcV,MAE7B3G,EAAMuC,6CC/DT+E,OAGDtH,UACGC,EAAiBJ,aACnB0H,EAAS,YAGblH,QAAQwB,gBACN0F,EAAS,IAAIjH,SAASgH,OAAOtH,EAAMQ,SAChCgH,UAAUxH,EAAMyH,QAChBC,SACC1H,EAAMuC,UACF,IAAIjC,SAASqH,OAAQC,qDAAoB5H,EAAMuC,cAC/C,MAELsF,MAAM5H,OAGXE,UAAU,IAAMoH,EAAOnH,UAGvBc,aAAa,IAAMqG,EAAOC,UAAUxH,EAAMyH,8CCtBtCE,MAGD3H,UACGC,EAAiBJ,aACnBiI,EAAQ,YAGZzH,QAAQwB,gBACNiG,EAAQ,IAAIxH,SAASqH,MAAM3H,EAAMQ,SAC9BgH,UAAUxH,EAAMyH,QAChBG,mDAAoB5H,EAAMuC,cAC1BsF,MAAM5H,OAGXE,UAAU,IAAM2H,EAAM1H,UAGtBc,aAAa,IAAM4G,EAAMN,UAAUxH,EAAMyH,SAGzCvG,aAAa,IAAM4G,EAAMF,mEAAoB5H,EAAMuC,sBCpB/CwF,MAUD/H,UACGC,EAAiBJ,gBAEvBQ,QAAQwB,UACL5B,IAAM8C,uBAA0B9C,IAAM+C,KAAK,aACxChD,EAAMgI,IACR/H,IAAMgI,UAAUjI,EAAMgI,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChBjI,IAAMmI,SAASpI,EAAM6C,KAAO5C,IAAMoI,SAASrI,EAAM6C,GAAIsF,KAGvDlI,IAAMmI,SAASpI,EAAM6C,KACpB5C,IAAMoI,SAASrI,EAAM6C,GAAI7C,EAAMmI,MAAOnI,EAAMQ,WAIlDL,UAAU,IAAMF,IAAMmI,SAASpI,EAAM6C,KAAO5C,IAAMqI,YAAYtI,EAAM6C,KAGpE3B,aAAaW,UACP7B,EAAMmI,OAASnI,EAAMgI,MAErBhI,EAAMgI,IACR/H,IAAMgI,UAAUjI,EAAMgI,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChBjI,IAAMmI,SAASpI,EAAM6C,KAAO5C,IAAMsI,YAAYvI,EAAM6C,GAAIsF,KAG3DlI,IAAMmI,SAASpI,EAAM6C,KAAO5C,IAAMsI,YAAYvI,EAAM6C,GAAI7C,EAAMmI"}

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()
@@ -31,9 +31,12 @@ const Layer = props => {
             : props.beforeId);
     });
     // Update Style
-    createEffect((prev) => {
-        if (!props.style && map().getLayer(props.id))
+    createEffect(async (prev) => {
+        if (!props.style ||
+            !map().getSource(source.id) ||
+            !map().getLayer(props.id))
             return;
+        !map().isSourceLoaded(source.id) && (await map().once('data'));
         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 ||
@@ -43,9 +46,11 @@ const Layer = props => {
     }, props.style);
     // Update Visibility
     createEffect(async () => {
-        if (props.visible === undefined)
+        if (props.visible === undefined ||
+            !map().getSource(source.id) ||
+            !map().getLayer(props.id))
             return;
-        !map().isStyleLoaded() && (await map().once('styledata'));
+        !map().isSourceLoaded(source.id) && (await map().once('data'));
         map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', { validate: false });
     });
     // Update Filter
@@ -57,15 +62,15 @@ const Layer = props => {
     });
     // Update Feature State
     createEffect(async () => {
-        if (!props.featureState?.id)
+        if (!props.featureState || !props.featureState.id)
             return;
         map().loaded() ? null : await map().once('render');
         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

@@ -43,7 +43,6 @@ const MapGL = props => {
     createEffect(async () => {
         if (!props.viewport.bounds)
             return;
-        // await map.once('idle')
         map.fitBounds(props.viewport.bounds, {
             padding: props.viewport.padding,
         });

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

@@ -15,10 +15,12 @@ export declare type Viewport = {
 declare const useMap: () => MapboxMap;
 declare const MapGL: Component<{
     class?: string;
-    classList?: any;
+    classList?: {
+        [k: string]: boolean | undefined;
+    };
     viewport?: Viewport;
     options?: MapboxOptions;
-    children?: any[] | any;
+    children?: Element[];
     triggerResize?: boolean;
     onMouseMove?: (event: MapMouseEvent) => void;
     onViewportChange?: (viewport: Viewport) => void;

package/package.json

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