solid-map-gl 1.1.10 → 1.1.11

package/dist/esm/index.js

@@ -1,2 +1,2 @@
-import{template,createComponent,memo,effect,classList,insert}from"solid-js/web";import{useTransition,createContext,useContext,onCleanup,onMount,createEffect,createMemo,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const _tmpl$$2=template("<main></main>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=n=>{let a,t;onCleanup(()=>a.remove()),onMount(()=>{a=new mapboxgl.Map({...n.options,container:t,interactive:n.onViewportChange,bounds:n.viewport.bounds,center:n.viewport.center,zoom:n.viewport.zoom||null,pitch:n.viewport.pitch||null,bearing:n.viewport.bearing||null,fitBoundsOptions:{padding:n.viewport.padding}}),a.container=void 0}),createEffect(()=>a.on("mousemove",e=>n.onMouseMove(e.lngLat))),createMemo(()=>a&&a.setStyle(n.options.style));const e=e=>{e.isInternal||(e={center:a.getCenter(),zoom:a.getZoom(),pitch:a.getPitch(),bearing:a.getBearing(),padding:n.viewport.padding,bounds:n.viewport.bounds},n.onViewportChange(e))};createEffect(()=>n.onViewportChange&&a.on("dragend",e).on("moveend",e).on("zoomend",e).on("rotateend",e).on("pitchend",e).on("boxzoomend",e)),createMemo(()=>{var e;a&&(e=a.cameraForBounds(n.viewport.bounds,{padding:n.viewport.padding}),n.onViewportChange({...n.viewport,...e}))}),createEffect(async e=>{var t=n.viewport,o={...t.zoom!=e.zoom&&{zoom:t.zoom},...t.padding!=e.padding&&{padding:t.padding},...t.bearing!=e.bearing&&{bearing:t.bearing},...t.pitch!=e.pitch&&{pitch:t.pitch},...t.center!=e.center&&{center:t.center.lng?[t.center.lng,t.center.lat]:t.center}};if(Object.keys(o).length)switch(a.stop(),n.transitionType){case"easeTo":a.easeTo(o,{isInternal:!0});case"jumpTo":a.jumpTo(o,{isInternal:!0});default:a.flyTo(o,{isInternal:!0})}return t},n.viewport);let o=0;return createEffect(()=>{n.triggerResize&&(o=0,window.requestAnimationFrame(function e(){o<15&&(o++,window.requestAnimationFrame(e),start(()=>a.resize()))}))}),createComponent(MapContext.Provider,{value:()=>a,get children(){return[memo(()=>n.children),(()=>{const a=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(a):t=a,a.style.setProperty("height","100%"),a.style.setProperty("width","100%"),effect(e=>{var t=n.class||"",o=n.classList;return t!==e._v$&&(a.className=e._v$=t),e._v$2=classList(a,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),a})()]}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{id:t.id}},get children(){return t.children}})},diff=(a={},n={})=>{return[...new Set([...Object.keys(a),...Object.keys(n)])].reduce((e,t)=>{var o=a[t];return o!==n[t]&&e.push([t,o]),e},[])},Layer=o=>{const a=useMap(),t=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),a().getLayer(o.id)||a().addLayer(o.layer||{...o.style,id:o.id,source:t.id},o.beforeType?a().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style&&a().getSource(t.id)&&a().getLayer(o.id))return o.style.layout!==(null==e?void 0:e.layout)&&diff(o.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>a().setLayoutProperty(o.id,e,t,{validate:!1})),o.style.paint!==(null==e?void 0:e.paint)&&diff(o.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>a().setPaintProperty(o.id,e,t,{validate:!1})),o.style.minzoom===(null==e?void 0:e.minzoom)&&o.style.maxzoom===(null==e?void 0:e.maxzoom)||a().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style.filter!==(null==e?void 0:e.filter)&&a().setFilter(o.id,o.style.filter,{validate:!1}),o.style},o.style),createEffect(e=>{if(void 0!==o.visible&&o.visible!==e&&a().getSource(t.id)&&a().getLayer(o.id))return a().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}),o.visible},o.visible),createEffect(async()=>{o.filter&&(a().isStyleLoaded()||await a().once("styledata"),a().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(a().isStyleLoaded()||await a().once("styledata"),a().removeFeatureState({source:t.id,sourceLayer:o.style["source-layer"]}),a().setFeatureState({source:t.id,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.id})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,a]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options||{container:o().container});break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),a(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let a=null;return onMount(async()=>{var e;a=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>a.remove()),createEffect(()=>a.setLngLat(t.lnglat)),createEffect(()=>a.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const a=useMap();return onMount(async()=>{a().isStyleLoaded()||await a().once("styledata"),o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().addImage(o.id,t)}):a().hasImage(o.id)||a().addImage(o.id,o.image,o.options)}),onCleanup(()=>a().hasImage(o.id)&&a().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?a().loadImage(o.url,(e,t)=>{if(e)throw e;a().hasImage(o.id)||a().updateImage(o.id,t)}):a().hasImage(o.id)&&a().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default,useMap};
+import{template,createComponent,memo,effect,classList,insert}from"solid-js/web";import{useTransition,createContext,useContext,onMount,onCleanup,createEffect,createUniqueId,createSignal}from"solid-js";import mapboxgl from"mapbox-gl";const events=["onResize","onRemove","onMouseDown","onMouseUp","onMouseOver","onMouseMove","onClick","onDblClick","onMouseEnter","onMouseLeave","onMouseOut","onContextMenu","onTouchStart","onTouchEnd","onTouchMove","onTouchCancel","onMoveStart","onMove","onMoveEnd","onDragStart","onDrag","onDragEnd","onZoomStart","onZoom","onZoomEnd","onRotateStart","onRotate","onRotateEnd","onPitchStart","onPitch","onPitchEnd","onBoxZoomStart","onBoxZoomEnd","onBoxZoomCancel","onWebglContextLost","onWebglContextRestored","onLoad","onError","onData","onStyleData","onSourceData","onDataLoading","onStyleDataLoading","onSourceDataLoading"],_tmpl$$2=template("<section></section>",2),[pending,start]=useTransition(),MapContext=createContext(),useMap=()=>useContext(MapContext),MapGL=a=>{let n,t,o=(onMount(()=>{n=new mapboxgl.Map({...a.options,container:t,interactive:a.onViewportChange,bounds:a.viewport.bounds,center:a.viewport.center,zoom:a.viewport.zoom||null,pitch:a.viewport.pitch||null,bearing:a.viewport.bearing||null,fitBoundsOptions:{padding:a.viewport.padding}})}),onCleanup(()=>n.remove()),createEffect(()=>events.forEach(t=>{a[t]&&n.on(t.slice(2).toLowerCase(),e=>a[t](e))})),createEffect(e=>e!==a.options.style&&n.setStyle(a.options.style),a.options.style),createEffect(()=>{a.onViewportChange&&["dragend","moveend","zoomend","pitchend","rotateend","boxzoomend"].forEach(e=>n.on(e,e=>{e.isInternal||(e={center:n.getCenter(),zoom:n.getZoom(),pitch:n.getPitch(),bearing:n.getBearing(),padding:a.viewport.padding,bounds:a.viewport.bounds},a.onViewportChange(e))}))}),createEffect(e=>{return a.viewport.bounds!=e&&(e=n.cameraForBounds(a.viewport.bounds,{padding:a.viewport.padding}),a.onViewportChange({...a.viewport,...e})),a.viewport.bounds},a.viewport.bounds),createEffect(async e=>{var t=a.viewport,o={...t.zoom!=e.zoom&&{zoom:t.zoom},...t.padding!=e.padding&&{padding:t.padding},...t.bearing!=e.bearing&&{bearing:t.bearing},...t.pitch!=e.pitch&&{pitch:t.pitch},...t.center!=e.center&&{center:t.center.lng?[t.center.lng,t.center.lat]:t.center}};if(Object.keys(o).length)switch(n.stop(),a.transitionType){case"easeTo":n.easeTo(o,{isInternal:!0});case"jumpTo":n.jumpTo(o,{isInternal:!0});default:n.flyTo(o,{isInternal:!0})}return t},a.viewport),0);return createEffect(()=>{a.triggerResize&&(o=0,window.requestAnimationFrame(function e(){o<15&&(o++,window.requestAnimationFrame(e),start(()=>n.resize()))}))}),createComponent(MapContext.Provider,{value:()=>n,get children(){return[memo(()=>a.children),(()=>{const n=_tmpl$$2.cloneNode(!0),e=t;return"function"==typeof e?e(n):t=n,n.style.setProperty("height","100%"),n.style.setProperty("width","100%"),effect(e=>{var t=a.class||"",o=a.classList;return t!==e._v$&&(n.className=e._v$=t),e._v$2=classList(n,o,e._v$2),e},{_v$:void 0,_v$2:void 0}),n})()]}})},SourceContext=createContext(),useSource=()=>useContext(SourceContext),SourceComponent=t=>{const o=useMap();return t.id=t.id||createUniqueId(),onMount(async()=>{o().isStyleLoaded()||await o().once("styledata"),o().getSource(t.id)||o().addSource(t.id,t.source)}),onCleanup(()=>{o().getStyle().layers.forEach(e=>e.source===t.id&&o().removeLayer(e.id)),o().getSource(t.id)&&o().removeSource(t.id)}),createEffect(async()=>{("geojson"===t.source.type||t.source.data)&&o().style&&o().getSource(t.id)&&o().getSource(t.id).setData(t.source.data)}),createComponent(SourceContext.Provider,{get value(){return{id:t.id}},get children(){return t.children}})},diff=(n={},a={})=>{return[...new Set([...Object.keys(n),...Object.keys(a)])].reduce((e,t)=>{var o=n[t];return o!==a[t]&&e.push([t,o]),e},[])},Layer=o=>{const n=useMap(),t=useSource();return o.id=o.id||createUniqueId(),onMount(async()=>{n().isStyleLoaded()||await n().once("styledata"),n().getLayer(o.id)||n().addLayer(o.layer||{...o.style,id:o.id,source:t.id},o.beforeType?n().getStyle().layers.find(e=>e.type===o.beforeType).id:o.beforeId)}),createEffect(e=>{if(o.style&&n().style&&n().getSource(t.id)&&n().getLayer(o.id))return o.style.layout!==(null==e?void 0:e.layout)&&diff(o.style.layout,null==e?void 0:e.layout).forEach(([e,t])=>n().setLayoutProperty(o.id,e,t,{validate:!1})),o.style.paint!==(null==e?void 0:e.paint)&&diff(o.style.paint,null==e?void 0:e.paint).forEach(([e,t])=>n().setPaintProperty(o.id,e,t,{validate:!1})),o.style.minzoom===(null==e?void 0:e.minzoom)&&o.style.maxzoom===(null==e?void 0:e.maxzoom)||n().setLayerZoomRange(o.id,o.style.minzoom,o.style.maxzoom),o.style.filter!==(null==e?void 0:e.filter)&&n().setFilter(o.id,o.style.filter,{validate:!1}),o.style},o.style),createEffect(e=>{if(void 0!==o.visible&&o.visible!==e&&n().getSource(t.id)&&n().getLayer(o.id))return n().setLayoutProperty(o.id,"visibility",o.visible?"visible":"none",{validate:!1}),o.visible},o.visible),createEffect(async()=>{o.filter&&(n().isStyleLoaded()||await n().once("styledata"),n().setFilter(o.id,o.filter))}),createEffect(async()=>{o.featureState&&o.featureState.id&&(n().isStyleLoaded()||await n().once("styledata"),n().removeFeatureState({source:t.id,sourceLayer:o.style["source-layer"]}),n().setFeatureState({source:t.id,sourceLayer:o.style["source-layer"],id:o.featureState.id},o.featureState.state))}),o.children},Fog=e=>{const t=useMap();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.style)}),onCleanup(()=>t().setFog(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setFog(e.visible?e.style:null))}),e.children},Sky=e=>{const t=useMap(),o="_sky";return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().getLayer(o)||t().addLayer({...e.style,id:o})}),onCleanup(()=>t().getLayer(o)&&t().removeLayer(o)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setLayoutProperty(o,"visibility",e.visible?"visible":"none"))}),e.children},Terrain=e=>{const t=useMap(),o=useSource();return onMount(async()=>{t().isStyleLoaded()||await t().once("styledata"),t().setTerrain({...e.style,source:o.id})}),onCleanup(()=>t().setTerrain(null)),createEffect(async()=>{void 0!==e.visible&&(t().isStyleLoaded()||await t().once("styledata"),t().setTerrain(e.visible?e.style:null))}),e.children},Control=t=>{const o=useMap(),[e,n]=createSignal(null);return onMount(async()=>{let e;switch(t.type){case"navigation":e=new mapboxgl.NavigationControl(t.options);break;case"scale":e=new mapboxgl.ScaleControl(t.options);break;case"attribution":e=new mapboxgl.AttributionControl(t.options);break;case"fullscreen":e=new mapboxgl.FullscreenControl(t.options||{container:o().container});break;case"geolocate":e=new mapboxgl.GeolocateControl(t.options)}e&&o().addControl(e,t.position),n(e)}),onCleanup(()=>o().removeControl(e())),t.children},_tmpl$$1=template("<div></div>",2),Marker=t=>{const o=useMap();let n=null;return onMount(async()=>{var e;n=new mapboxgl.Marker(t.options).setLngLat(t.lnglat).setPopup(t.children?(new mapboxgl.Popup).setDOMContent((e=_tmpl$$1.cloneNode(!0),insert(e,()=>t.children),e)):null).addTo(o())}),onCleanup(()=>n.remove()),createEffect(()=>n.setLngLat(t.lnglat)),[]},_tmpl$=template("<div></div>",2),Popup=t=>{const o=useMap();let n=null;return onMount(async()=>{var e;n=new mapboxgl.Popup(t.options).setLngLat(t.lnglat).setDOMContent((e=_tmpl$.cloneNode(!0),insert(e,()=>t.children),e)).addTo(o())}),onCleanup(()=>n.remove()),createEffect(()=>n.setLngLat(t.lnglat)),createEffect(()=>n.setDOMContent((()=>{var e=_tmpl$.cloneNode(!0);return insert(e,()=>t.children),e})())),[]},Image=o=>{const n=useMap();return onMount(async()=>{n().isStyleLoaded()||await n().once("styledata"),o.url?n().loadImage(o.url,(e,t)=>{if(e)throw e;n().hasImage(o.id)||n().addImage(o.id,t)}):n().hasImage(o.id)||n().addImage(o.id,o.image,o.options)}),onCleanup(()=>n().hasImage(o.id)&&n().removeImage(o.id)),createEffect(async()=>{o.image&&o.url||(o.url?n().loadImage(o.url,(e,t)=>{if(e)throw e;n().hasImage(o.id)||n().updateImage(o.id,t)}):n().style&&n().hasImage(o.id)&&n().updateImage(o.id,o.image))}),[]};export{Control,Fog,Image,Layer,Marker,Popup,Sky,SourceComponent as Source,Terrain,MapGL as default,useMap};
 //# 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  createMemo,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n} from 'solid-js'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\n\nexport type Viewport = {\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: number\n}\n\nexport type TransitionType = 'flyTo' | 'easeTo' | 'jumpTo'\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  class?: string\n  classList?: {\n    [k: string]: boolean | undefined\n  }\n  viewport?: Viewport\n  options?: MapboxOptions\n  children?: Element | Element[]\n  triggerResize?: boolean\n  transitionType?: TransitionType\n  onMouseMove?: (event: MapMouseEvent) => void\n  onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLDivElement\n  let containerRef: HTMLElement\n\n  onCleanup(() => map.remove())\n\n  onMount(() => {\n    map = new mapboxgl.Map({\n      ...props.options,\n      container: mapRef,\n      interactive: props.onViewportChange,\n      bounds: props.viewport.bounds,\n      center: props.viewport.center,\n      zoom: props.viewport.zoom || null,\n      pitch: props.viewport.pitch || null,\n      bearing: props.viewport.bearing || null,\n      fitBoundsOptions: { padding: props.viewport.padding },\n    } as MapboxOptions)\n\n    map.container = containerRef\n  })\n\n  createEffect(() => map.on('mousemove', evt => props.onMouseMove(evt.lngLat)))\n\n  createMemo(() => map && map.setStyle(props.options.style))\n\n  const _onViewportChange = evt => {\n    if (evt.isInternal) return\n    const viewport: Viewport = {\n      center: map.getCenter(),\n      zoom: map.getZoom(),\n      pitch: map.getPitch(),\n      bearing: map.getBearing(),\n      padding: props.viewport.padding,\n      bounds: props.viewport.bounds,\n    }\n    props.onViewportChange(viewport)\n  }\n\n  createEffect(\n    () =>\n      props.onViewportChange &&\n      map\n        .on('dragend', _onViewportChange)\n        .on('moveend', _onViewportChange)\n        .on('zoomend', _onViewportChange)\n        .on('rotateend', _onViewportChange)\n        .on('pitchend', _onViewportChange)\n        .on('boxzoomend', _onViewportChange)\n  )\n\n  createMemo(() => {\n    if (map) {\n      const camera = map.cameraForBounds(props.viewport.bounds, {\n        padding: props.viewport.padding,\n      })\n      props.onViewportChange({\n        ...props.viewport,\n        ...camera,\n      })\n    }\n  })\n\n  // createEffect(prev => {\n  //   if (props.viewport.bounds != prev) {\n  //     const camera = map.cameraForBounds(props.viewport.bounds, {\n  //       padding: props.viewport.padding,\n  //     })\n  //     props.onViewportChange({\n  //       ...props.viewport,\n  //       ...camera,\n  //     })\n  //   }\n  //   return props.viewport.bounds\n  // }, props.viewport.bounds)\n\n  createEffect(async (prev: Viewport) => {\n    const vp: Viewport = props.viewport\n    const nvp: Viewport = {\n      ...(vp.zoom != prev.zoom && { zoom: vp.zoom }),\n      ...(vp.padding != prev.padding && { padding: vp.padding }),\n      ...(vp.bearing != prev.bearing && { bearing: vp.bearing }),\n      ...(vp.pitch != prev.pitch && { pitch: vp.pitch }),\n      ...(vp.center != prev.center && {\n        center: vp.center.lng ? [vp.center.lng, vp.center.lat] : vp.center,\n      }),\n    }\n    if (Object.keys(nvp).length) {\n      map.stop()\n      switch (props.transitionType) {\n        case 'easeTo':\n          map.easeTo(nvp, { isInternal: true })\n        case 'jumpTo':\n          map.jumpTo(nvp, { isInternal: true })\n        default:\n          map.flyTo(nvp, { isInternal: true })\n      }\n    }\n    return vp\n  }, props.viewport)\n\n  let index = 0\n\n  createEffect(() => {\n    if (props.triggerResize) {\n      index = 0\n      window.requestAnimationFrame(function loop() {\n        if (index < 15) {\n          index++\n          window.requestAnimationFrame(loop)\n          start(() => map.resize())\n        }\n      })\n    }\n  })\n\n  return (\n    <MapContext.Provider value={() => map}>\n      {props.children}\n      <main\n        ref={mapRef}\n        class={props.class || ''}\n        classList={props.classList}\n        style={{ height: '100%', width: '100%' }}></main>\n    </MapContext.Provider>\n  )\n}\n\nexport { MapGL as default, useMap }\n","import {\n  onMount,\n  onCleanup,\n  createEffect,\n  Component,\n  createContext,\n  useContext,\n  createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  Source,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n  id?: string\n  source: SourceSpecification\n}> = props => {\n  const map: MapboxMap = useMap()\n  props.id = props.id || createUniqueId()\n  // Add Source\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getSource(props.id) && map().addSource(props.id, props.source)\n  })\n\n  // Remove Source\n  onCleanup(() => {\n    map()\n      .getStyle()\n      .layers.forEach(\n        layer => layer.source === props.id && map().removeLayer(layer.id)\n      )\n    map().getSource(props.id) && map().removeSource(props.id)\n  })\n\n  // Update GeoJSON Data\n  createEffect(async () => {\n    if (props.source.type !== 'geojson' && !props.source.data) return\n\n    map().getSource(props.id) &&\n      map().getSource(props.id).setData(props.source.data)\n  })\n\n  return (\n    <SourceContext.Provider value={{ id: props.id }}>\n      {props.children}\n    </SourceContext.Provider>\n  )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  FilterSpecification,\n  StyleSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n  newProps: StyleSpecification = {},\n  prevProps: StyleSpecification = {}\n) => {\n  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n  return [...keys].reduce((acc, key: string) => {\n    const value = newProps[key]\n    if (value !== prevProps[key]) {\n      acc.push([key, value])\n    }\n    return acc\n  }, [])\n}\n\nconst Layer: Component<{\n  id?: string\n  style?: StyleSpecification\n  layer?: CustomLayerInterface\n  filter?: FilterSpecification\n  visible?: boolean\n  sourceId?: string\n  beforeType?:\n    | 'background'\n    | 'fill'\n    | 'line'\n    | 'symbol'\n    | 'raster'\n    | 'circle'\n    | 'fill-extrusion'\n    | 'heatmap'\n    | 'hillshade'\n    | 'sky'\n  beforeId?: string\n  featureState?: { id: number | string; state: object }\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n  props.id = props.id || createUniqueId()\n  // Add Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    if (map().getLayer(props.id)) return\n\n    map().addLayer(\n      props.layer || {\n        ...props.style,\n        id: props.id,\n        source: source.id,\n      },\n      props.beforeType\n        ? map()\n            .getStyle()\n            .layers.find(l => l.type === props.beforeType).id\n        : props.beforeId\n    )\n  })\n\n  // Update Style\n  createEffect((prev: StyleSpecification) => {\n    if (\n      !props.style ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    if (props.style.layout !== prev?.layout)\n      diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n        map().setLayoutProperty(props.id, key, value, { validate: false })\n      )\n\n    if (props.style.paint !== prev?.paint)\n      diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n        map().setPaintProperty(props.id, key, value, { validate: false })\n      )\n\n    if (\n      props.style.minzoom !== prev?.minzoom ||\n      props.style.maxzoom !== prev?.maxzoom\n    )\n      map().setLayerZoomRange(\n        props.id,\n        props.style.minzoom,\n        props.style.maxzoom\n      )\n\n    if (props.style.filter !== prev?.filter)\n      map().setFilter(props.id, props.style.filter, { validate: false })\n\n    return props.style\n  }, props.style)\n\n  // Update Visibility\n  createEffect((prev: boolean) => {\n    if (\n      props.visible === undefined ||\n      props.visible === prev ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    map().setLayoutProperty(\n      props.id,\n      'visibility',\n      props.visible ? 'visible' : 'none',\n      { validate: false }\n    )\n    return props.visible\n  }, props.visible)\n\n  // Update Filter\n  createEffect(async () => {\n    if (!props.filter) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFilter(props.id, props.filter)\n  })\n\n  // Update Feature State\n  createEffect(async () => {\n    if (!props.featureState || !props.featureState.id) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    map().removeFeatureState({\n      source: source.id,\n      sourceLayer: props.style['source-layer'],\n    })\n    map().setFeatureState(\n      {\n        source: source.id,\n        sourceLayer: props.style['source-layer'],\n        id: props.featureState.id,\n      },\n      props.featureState.state\n    )\n  })\n\n  return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n  style: FogSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Fog Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.style)\n  })\n  // Remove Fog Layer\n  onCleanup(() => map().setFog(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n  style: StyleSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const layerId = '_sky'\n  // Add Sky Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n  })\n\n  // Remove Sky Layer\n  onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setLayoutProperty(\n      layerId,\n      'visibility',\n      props.visible ? 'visible' : 'none'\n    )\n  })\n\n  return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  TerrainSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n  style: TerrainSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n\n  // Add Terrain Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain({ ...props.style, source: source.id })\n  })\n\n  // Remove Terrain Layer\n  onCleanup(() => map().setTerrain(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n  type:\n    | 'navigation'\n    | 'scale'\n    | 'attribution'\n    | 'fullscreen'\n    | 'geolocate'\n    | 'language'\n    | 'traffic'\n  options?:\n    | NavigationOptions\n    | ScaleOptions\n    | AttributionOptions\n    | FullscreenOptions\n    | GeolocateOptions\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n  const map: MapboxMap = useMap()\n  const [control, setControl] = createSignal(null)\n  // Add Control\n  onMount(async () => {\n    let control\n\n    switch (props.type) {\n      case 'navigation':\n        control = new mapboxgl.NavigationControl(props.options)\n        break\n      case 'scale':\n        control = new mapboxgl.ScaleControl(props.options)\n        break\n      case 'attribution':\n        control = new mapboxgl.AttributionControl(props.options)\n        break\n      case 'fullscreen':\n        control = new mapboxgl.FullscreenControl(\n          props.options || { container: map().container }\n        )\n        break\n      case 'geolocate':\n        control = new mapboxgl.GeolocateControl(props.options)\n        break\n      // case 'language':\n      //   // @ts-ignore\n      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n      //     .default\n      //   control = new MapboxLanguage(props.options)\n      //   break\n      // case 'traffic':\n      //   // @ts-ignore\n      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n      //     .default\n      //   // @ts-ignore\n      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n      //   control = new MapboxTraffic(props.options)\n      //   break\n    }\n    control && map().addControl(control, props.position)\n    setControl(control)\n  })\n\n  onCleanup(() => map().removeControl(control()))\n\n  return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n  options?: MarkerSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let marker = null\n\n  // Add Marker\n  onMount(async () => {\n    marker = new mapboxgl.Marker(props.options)\n      .setLngLat(props.lnglat)\n      .setPopup(\n        props.children\n          ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n          : null\n      )\n      .addTo(map())\n  })\n  // Remove Marker\n  onCleanup(() => marker.remove())\n\n  // Update Position\n  createEffect(() => marker.setLngLat(props.lnglat))\n\n  return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n  options?: PopupSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let popup = null\n\n  // Add Popup\n  onMount(async () => {\n    popup = new mapboxgl.Popup(props.options)\n      .setLngLat(props.lnglat)\n      .setDOMContent(<div>{props.children}</div>)\n      .addTo(map())\n  })\n  // Remove Popup\n  onCleanup(() => popup.remove())\n\n  // Update Position\n  createEffect(() => popup.setLngLat(props.lnglat))\n\n  // Update Content\n  createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n  return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  StyleImageInterface,\n  StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n  id: string\n  url?: string\n  image?:\n    | HTMLImageElement\n    | ImageBitmap\n    | ImageData\n    | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n    | StyleImageInterface\n  options?: StyleImageMetadata\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Image\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().addImage(props.id, image)\n      })\n    } else {\n      !map().hasImage(props.id) &&\n        map().addImage(props.id, props.image, props.options)\n    }\n  })\n  // Remove Image\n  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n  // Update Image\n  createEffect(async () => {\n    if (props.image && props.url) return\n\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().updateImage(props.id, image)\n      })\n    } else {\n      map().hasImage(props.id) && map().updateImage(props.id, props.image)\n    }\n  })\n\n  return <></>\n}\n\nexport default Image\n"],"names":["pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","onCleanup","remove","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","containerRef","createEffect","on","evt","onMouseMove","lngLat","createMemo","setStyle","style","_onViewportChange","isInternal","getCenter","getZoom","getPitch","getBearing","camera","cameraForBounds","prev","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","index","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","forEach","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","beforeType","find","l","beforeId","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","filter","setFilter","undefined","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"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"}
+{"version":3,"file":"index.js","sources":["../../src/components/MapGL/events.ts","../../src/components/MapGL/index.tsx","../../src/components/Source/index.tsx","../../src/components/Layer/index.tsx","../../src/components/Fog/index.tsx","../../src/components/Sky/index.tsx","../../src/components/Terrain/index.tsx","../../src/components/Control/index.tsx","../../src/components/Marker/index.tsx","../../src/components/Popup/index.tsx","../../src/components/Image/index.tsx"],"sourcesContent":["const events = [\n  'onResize',\n  'onRemove',\n  'onMouseDown',\n  'onMouseUp',\n  'onMouseOver',\n  'onMouseMove',\n  'onClick',\n  'onDblClick',\n  'onMouseEnter',\n  'onMouseLeave',\n  'onMouseOut',\n  'onContextMenu',\n  'onTouchStart',\n  'onTouchEnd',\n  'onTouchMove',\n  'onTouchCancel',\n  'onMoveStart',\n  'onMove',\n  'onMoveEnd',\n  'onDragStart',\n  'onDrag',\n  'onDragEnd',\n  'onZoomStart',\n  'onZoom',\n  'onZoomEnd',\n  'onRotateStart',\n  'onRotate',\n  'onRotateEnd',\n  'onPitchStart',\n  'onPitch',\n  'onPitchEnd',\n  'onBoxZoomStart',\n  'onBoxZoomEnd',\n  'onBoxZoomCancel',\n  'onWebglContextLost',\n  'onWebglContextRestored',\n  'onLoad',\n  'onError',\n  'onData',\n  'onStyleData',\n  'onSourceData',\n  'onDataLoading',\n  'onStyleDataLoading',\n  'onSourceDataLoading',\n]\n\nexport { events as default }\n","import {\n  createEffect,\n  onMount,\n  onCleanup,\n  createContext,\n  useContext,\n  Component,\n  useTransition,\n} from 'solid-js'\nimport events from './events'\nimport mapboxgl from 'mapbox-gl'\nimport 'mapbox-gl/dist/mapbox-gl.css'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type MapboxOptions from 'mapbox-gl/src/ui/map'\nimport type MapMouseEvent from 'mapbox-gl/src/ui/events'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\nimport type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js'\nimport type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js'\n\nexport type Viewport = {\n  center?: LngLatLike\n  bounds?: LngLatBounds\n  zoom?: number\n  pitch?: number\n  bearing?: number\n  padding?: PaddingOptions\n}\n\nconst [pending, start] = useTransition()\n\nconst MapContext = createContext<MapboxMap>()\nconst useMap = () => useContext(MapContext)\n\nconst MapGL: Component<{\n  class?: string\n  classList?: {\n    [k: string]: boolean | undefined\n  }\n  viewport?: Viewport\n  options?: MapboxOptions\n  children?: Element | Element[]\n  triggerResize?: boolean\n  transitionType?: 'flyTo' | 'easeTo' | 'jumpTo'\n  onMouseMove?: (event: MapMouseEvent) => void\n  onViewportChange?: (viewport: Viewport) => void\n}> = props => {\n  let map: MapboxMap\n  let mapRef: HTMLDivElement\n\n  onMount(() => {\n    map = new mapboxgl.Map({\n      ...props.options,\n      container: mapRef,\n      interactive: props.onViewportChange,\n      bounds: props.viewport.bounds,\n      center: props.viewport.center,\n      zoom: props.viewport.zoom || null,\n      pitch: props.viewport.pitch || null,\n      bearing: props.viewport.bearing || null,\n      fitBoundsOptions: { padding: props.viewport.padding },\n    } as MapboxOptions)\n  })\n\n  onCleanup(() => map.remove())\n\n  // Hook up events\n  createEffect(() =>\n    events.forEach(item => {\n      props[item] && map.on(item.slice(2).toLowerCase(), e => props[item](e))\n    })\n  )\n\n  // Update map style\n  createEffect(\n    prev => prev !== props.options.style && map.setStyle(props.options.style),\n    props.options.style\n  )\n\n  // Update Viewport\n  createEffect(() => {\n    props.onViewportChange &&\n      [\n        'dragend',\n        'moveend',\n        'zoomend',\n        'pitchend',\n        'rotateend',\n        'boxzoomend',\n      ].forEach(item =>\n        map.on(item, evt => {\n          if (evt.isInternal) return\n          const viewport: Viewport = {\n            center: map.getCenter(),\n            zoom: map.getZoom(),\n            pitch: map.getPitch(),\n            bearing: map.getBearing(),\n            padding: props.viewport.padding,\n            bounds: props.viewport.bounds,\n          }\n          props.onViewportChange(viewport)\n        })\n      )\n  })\n\n  createEffect(prev => {\n    if (props.viewport.bounds != prev) {\n      const camera = map.cameraForBounds(props.viewport.bounds, {\n        padding: props.viewport.padding,\n      })\n      props.onViewportChange({\n        ...props.viewport,\n        ...camera,\n      })\n    }\n    return props.viewport.bounds\n  }, props.viewport.bounds)\n\n  createEffect(async (prev: Viewport) => {\n    const vp: Viewport = props.viewport\n    const nvp: Viewport = {\n      ...(vp.zoom != prev.zoom && { zoom: vp.zoom }),\n      ...(vp.padding != prev.padding && { padding: vp.padding }),\n      ...(vp.bearing != prev.bearing && { bearing: vp.bearing }),\n      ...(vp.pitch != prev.pitch && { pitch: vp.pitch }),\n      ...(vp.center != prev.center && {\n        center: vp.center.lng ? [vp.center.lng, vp.center.lat] : vp.center,\n      }),\n    }\n    if (Object.keys(nvp).length) {\n      map.stop()\n      switch (props.transitionType) {\n        case 'easeTo':\n          map.easeTo(nvp, { isInternal: true })\n        case 'jumpTo':\n          map.jumpTo(nvp, { isInternal: true })\n        default:\n          map.flyTo(nvp, { isInternal: true })\n      }\n    }\n    return vp\n  }, props.viewport)\n\n  let index = 0\n\n  createEffect(() => {\n    if (props.triggerResize) {\n      index = 0\n      window.requestAnimationFrame(function loop() {\n        if (index < 15) {\n          index++\n          window.requestAnimationFrame(loop)\n          start(() => map.resize())\n        }\n      })\n    }\n  })\n\n  return (\n    <MapContext.Provider value={() => map}>\n      {props.children}\n      <section\n        ref={mapRef}\n        class={props.class || ''}\n        classList={props.classList}\n        style={{ height: '100%', width: '100%' }}></section>\n    </MapContext.Provider>\n  )\n}\n\nexport { MapGL as default, useMap }\n","import {\n  onMount,\n  onCleanup,\n  createEffect,\n  Component,\n  createContext,\n  useContext,\n  createUniqueId,\n} from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  Source,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst SourceContext = createContext<Source>()\n\nconst useSource = (): Source => useContext(SourceContext)\n\nconst SourceComponent: Component<{\n  id?: string\n  source: SourceSpecification\n}> = props => {\n  const map: MapboxMap = useMap()\n  props.id = props.id || createUniqueId()\n  // Add Source\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getSource(props.id) && map().addSource(props.id, props.source)\n  })\n\n  // Remove Source\n  onCleanup(() => {\n    map()\n      .getStyle()\n      .layers.forEach(\n        layer => layer.source === props.id && map().removeLayer(layer.id)\n      )\n    map().getSource(props.id) && map().removeSource(props.id)\n  })\n\n  // Update GeoJSON Data\n  createEffect(async () => {\n    if (props.source.type !== 'geojson' && !props.source.data) return\n\n    map().style &&\n      map().getSource(props.id) &&\n      map().getSource(props.id).setData(props.source.data)\n  })\n\n  return (\n    <SourceContext.Provider value={{ id: props.id }}>\n      {props.children}\n    </SourceContext.Provider>\n  )\n}\n\nexport { SourceComponent as default, useSource }\n","import { onMount, createEffect, Component, createUniqueId } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  FilterSpecification,\n  StyleSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\nimport type { CustomLayerInterface } from 'mapbox-gl/src/style/style_layer/custom_style_layer'\n\nconst diff = (\n  newProps: StyleSpecification = {},\n  prevProps: StyleSpecification = {}\n) => {\n  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)])\n  return [...keys].reduce((acc, key: string) => {\n    const value = newProps[key]\n    if (value !== prevProps[key]) {\n      acc.push([key, value])\n    }\n    return acc\n  }, [])\n}\n\nconst Layer: Component<{\n  id?: string\n  style?: StyleSpecification\n  layer?: CustomLayerInterface\n  filter?: FilterSpecification\n  visible?: boolean\n  sourceId?: string\n  beforeType?:\n    | 'background'\n    | 'fill'\n    | 'line'\n    | 'symbol'\n    | 'raster'\n    | 'circle'\n    | 'fill-extrusion'\n    | 'heatmap'\n    | 'hillshade'\n    | 'sky'\n  beforeId?: string\n  featureState?: { id: number | string; state: object }\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n  props.id = props.id || createUniqueId()\n  // Add Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    if (map().getLayer(props.id)) return\n\n    map().addLayer(\n      props.layer || {\n        ...props.style,\n        id: props.id,\n        source: source.id,\n      },\n      props.beforeType\n        ? map()\n            .getStyle()\n            .layers.find(l => l.type === props.beforeType).id\n        : props.beforeId\n    )\n  })\n\n  // Update Style\n  createEffect((prev: StyleSpecification) => {\n    if (\n      !props.style ||\n      !map().style ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    if (props.style.layout !== prev?.layout)\n      diff(props.style.layout, prev?.layout).forEach(([key, value]) =>\n        map().setLayoutProperty(props.id, key, value, { validate: false })\n      )\n\n    if (props.style.paint !== prev?.paint)\n      diff(props.style.paint, prev?.paint).forEach(([key, value]) =>\n        map().setPaintProperty(props.id, key, value, { validate: false })\n      )\n\n    if (\n      props.style.minzoom !== prev?.minzoom ||\n      props.style.maxzoom !== prev?.maxzoom\n    )\n      map().setLayerZoomRange(\n        props.id,\n        props.style.minzoom,\n        props.style.maxzoom\n      )\n\n    if (props.style.filter !== prev?.filter)\n      map().setFilter(props.id, props.style.filter, { validate: false })\n\n    return props.style\n  }, props.style)\n\n  // Update Visibility\n  createEffect((prev: boolean) => {\n    if (\n      props.visible === undefined ||\n      props.visible === prev ||\n      !map().getSource(source.id) ||\n      !map().getLayer(props.id)\n    )\n      return\n\n    map().setLayoutProperty(\n      props.id,\n      'visibility',\n      props.visible ? 'visible' : 'none',\n      { validate: false }\n    )\n    return props.visible\n  }, props.visible)\n\n  // Update Filter\n  createEffect(async () => {\n    if (!props.filter) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFilter(props.id, props.filter)\n  })\n\n  // Update Feature State\n  createEffect(async () => {\n    if (!props.featureState || !props.featureState.id) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n\n    map().removeFeatureState({\n      source: source.id,\n      sourceLayer: props.style['source-layer'],\n    })\n    map().setFeatureState(\n      {\n        source: source.id,\n        sourceLayer: props.style['source-layer'],\n        id: props.featureState.id,\n      },\n      props.featureState.state\n    )\n  })\n\n  return props.children\n}\n\nexport default Layer\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Fog: Component<{\n  style: FogSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Fog Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.style)\n  })\n  // Remove Fog Layer\n  onCleanup(() => map().setFog(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setFog(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Fog\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js'\n\nconst Sky: Component<{\n  style: StyleSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const layerId = '_sky'\n  // Add Sky Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    !map().getLayer(layerId) && map().addLayer({ ...props.style, id: layerId })\n  })\n\n  // Remove Sky Layer\n  onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setLayoutProperty(\n      layerId,\n      'visibility',\n      props.visible ? 'visible' : 'none'\n    )\n  })\n\n  return props.children\n}\n\nexport default Sky\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport { useSource } from '../Source'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  TerrainSpecification,\n  SourceSpecification,\n} from 'mapbox-gl/src/style-spec/types.js'\n\nconst Terrain: Component<{\n  style: TerrainSpecification\n  visible?: boolean\n}> = props => {\n  const map: MapboxMap = useMap()\n  const source: SourceSpecification = useSource()\n\n  // Add Terrain Layer\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain({ ...props.style, source: source.id })\n  })\n\n  // Remove Terrain Layer\n  onCleanup(() => map().setTerrain(null))\n\n  // Update Visibility\n  createEffect(async () => {\n    if (props.visible === undefined) return\n\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    map().setTerrain(props.visible ? props.style : null)\n  })\n\n  return props.children\n}\n\nexport default Terrain\n","import { onMount, onCleanup, createSignal, Component, lazy } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control'\nimport type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control'\nimport type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control'\nimport type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control'\nimport type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control'\n\nconst Control: Component<{\n  type:\n    | 'navigation'\n    | 'scale'\n    | 'attribution'\n    | 'fullscreen'\n    | 'geolocate'\n    | 'language'\n    | 'traffic'\n  options?:\n    | NavigationOptions\n    | ScaleOptions\n    | AttributionOptions\n    | FullscreenOptions\n    | GeolocateOptions\n  position?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'\n}> = props => {\n  const map: MapboxMap = useMap()\n  const [control, setControl] = createSignal(null)\n  // Add Control\n  onMount(async () => {\n    let control\n\n    switch (props.type) {\n      case 'navigation':\n        control = new mapboxgl.NavigationControl(props.options)\n        break\n      case 'scale':\n        control = new mapboxgl.ScaleControl(props.options)\n        break\n      case 'attribution':\n        control = new mapboxgl.AttributionControl(props.options)\n        break\n      case 'fullscreen':\n        control = new mapboxgl.FullscreenControl(\n          props.options || { container: map().container }\n        )\n        break\n      case 'geolocate':\n        control = new mapboxgl.GeolocateControl(props.options)\n        break\n      // case 'language':\n      //   // @ts-ignore\n      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))\n      //     .default\n      //   control = new MapboxLanguage(props.options)\n      //   break\n      // case 'traffic':\n      //   // @ts-ignore\n      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))\n      //     .default\n      //   // @ts-ignore\n      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')\n      //   control = new MapboxTraffic(props.options)\n      //   break\n    }\n    control && map().addControl(control, props.position)\n    setControl(control)\n  })\n\n  onCleanup(() => map().removeControl(control()))\n\n  return props.children\n}\n\nexport default Control\n","import { onMount, onCleanup, createEffect, Component, children } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { MarkerSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Marker: Component<{\n  options?: MarkerSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let marker = null\n\n  // Add Marker\n  onMount(async () => {\n    marker = new mapboxgl.Marker(props.options)\n      .setLngLat(props.lnglat)\n      .setPopup(\n        props.children\n          ? new mapboxgl.Popup().setDOMContent(<div>{props.children}</div>)\n          : null\n      )\n      .addTo(map())\n  })\n  // Remove Marker\n  onCleanup(() => marker.remove())\n\n  // Update Position\n  createEffect(() => marker.setLngLat(props.lnglat))\n\n  return <></>\n}\n\nexport default Marker\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport mapboxgl from 'mapbox-gl'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type { PopupSpecification } from 'mapbox-gl/src/style-spec/types.js'\nimport type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js'\n\nconst Popup: Component<{\n  options?: PopupSpecification\n  lnglat: LngLatLike\n}> = props => {\n  const map: MapboxMap = useMap()\n  let popup = null\n\n  // Add Popup\n  onMount(async () => {\n    popup = new mapboxgl.Popup(props.options)\n      .setLngLat(props.lnglat)\n      .setDOMContent(<div>{props.children}</div>)\n      .addTo(map())\n  })\n  // Remove Popup\n  onCleanup(() => popup.remove())\n\n  // Update Position\n  createEffect(() => popup.setLngLat(props.lnglat))\n\n  // Update Content\n  createEffect(() => popup.setDOMContent(<div>{props.children}</div>))\n\n  return <></>\n}\n\nexport default Popup\n","import { onMount, onCleanup, createEffect, Component } from 'solid-js'\nimport { useMap } from '../MapGL'\nimport type MapboxMap from 'mapbox-gl/src/ui/map'\nimport type {\n  StyleImageInterface,\n  StyleImageMetadata,\n} from 'mapbox-gl/src/style/style_image'\n\nconst Image: Component<{\n  id: string\n  url?: string\n  image?:\n    | HTMLImageElement\n    | ImageBitmap\n    | ImageData\n    | { width: number; height: number; data: Uint8Array | Uint8ClampedArray }\n    | StyleImageInterface\n  options?: StyleImageMetadata\n}> = props => {\n  const map: MapboxMap = useMap()\n  // Add Image\n  onMount(async () => {\n    !map().isStyleLoaded() && (await map().once('styledata'))\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().addImage(props.id, image)\n      })\n    } else {\n      !map().hasImage(props.id) &&\n        map().addImage(props.id, props.image, props.options)\n    }\n  })\n  // Remove Image\n  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id))\n\n  // Update Image\n  createEffect(async () => {\n    if (props.image && props.url) return\n\n    if (props.url) {\n      map().loadImage(props.url, (error, image) => {\n        if (error) throw error\n        !map().hasImage(props.id) && map().updateImage(props.id, image)\n      })\n    } else {\n      map().style &&\n        map().hasImage(props.id) &&\n        map().updateImage(props.id, props.image)\n    }\n  })\n\n  return <></>\n}\n\nexport default Image\n"],"names":["events","pending","start","useTransition","MapContext","createContext","useMap","useContext","MapGL","props","map","mapRef","index","onMount","mapboxgl","Map","options","container","interactive","onViewportChange","bounds","viewport","center","zoom","pitch","bearing","fitBoundsOptions","padding","onCleanup","remove","createEffect","forEach","item","on","slice","toLowerCase","e","prev","style","setStyle","evt","isInternal","getCenter","getZoom","getPitch","getBearing","camera","cameraForBounds","vp","nvp","lng","lat","Object","keys","length","stop","transitionType","easeTo","jumpTo","flyTo","triggerResize","window","requestAnimationFrame","loop","resize","Provider","value","children","class","classList","SourceContext","useSource","SourceComponent","id","createUniqueId","async","isStyleLoaded","once","getSource","addSource","source","getStyle","layers","layer","removeLayer","removeSource","type","data","setData","diff","newProps","prevProps","Set","reduce","acc","key","push","Layer","getLayer","addLayer","beforeType","find","l","beforeId","layout","setLayoutProperty","validate","paint","setPaintProperty","minzoom","maxzoom","setLayerZoomRange","filter","setFilter","undefined","visible","featureState","removeFeatureState","sourceLayer","setFeatureState","state","Fog","setFog","Sky","layerId","Terrain","setTerrain","Control","control","setControl","createSignal","NavigationControl","ScaleControl","AttributionControl","FullscreenControl","GeolocateControl","addControl","position","removeControl","Marker","marker","setLngLat","lnglat","setPopup","Popup","setDOMContent","addTo","popup","Image","url","loadImage","error","image","hasImage","addImage","removeImage","updateImage"],"mappings":"wOAAA,MAAMA,OAAS,CACb,WACA,WACA,cACA,YACA,cACA,cACA,UACA,aACA,eACA,eACA,aACA,gBACA,eACA,aACA,cACA,gBACA,cACA,SACA,YACA,cACA,SACA,YACA,cACA,SACA,YACA,gBACA,WACA,cACA,eACA,UACA,aACA,iBACA,eACA,kBACA,qBACA,yBACA,SACA,UACA,SACA,cACA,eACA,gBACA,qBACA,kEChBI,CAACC,QAASC,OAASC,gBAEnBC,WAAaC,gBACbC,OAAS,IAAMC,WAAWH,YAE1BI,MAYDC,QACCC,EACAC,EA+FAC,GA7FJC,QAAQ,KACNH,EAAM,IAAII,SAASC,IAAI,IAClBN,EAAMO,QACTC,UAAWN,EACXO,YAAaT,EAAMU,iBACnBC,OAAQX,EAAMY,SAASD,OACvBE,OAAQb,EAAMY,SAASC,OACvBC,KAAMd,EAAMY,SAASE,MAAQ,KAC7BC,MAAOf,EAAMY,SAASG,OAAS,KAC/BC,QAAShB,EAAMY,SAASI,SAAW,KACnCC,iBAAkB,CAAEC,QAASlB,EAAMY,SAASM,aAIhDC,UAAU,IAAMlB,EAAImB,UAGpBC,aAAa,IACX9B,OAAO+B,QAAQC,IACbvB,EAAMuB,IAAStB,EAAIuB,GAAGD,EAAKE,MAAM,GAAGC,cAAeC,GAAK3B,EAAMuB,GAAMI,OAKxEN,aACEO,GAAQA,IAAS5B,EAAMO,QAAQsB,OAAS5B,EAAI6B,SAAS9B,EAAMO,QAAQsB,OACnE7B,EAAMO,QAAQsB,OAIhBR,aAAa,KACXrB,EAAMU,kBACJ,CACE,UACA,UACA,UACA,WACA,YACA,cACAY,QAAQC,GACRtB,EAAIuB,GAAGD,EAAMQ,IACPA,EAAIC,aACFpB,EAAqB,CACzBC,OAAQZ,EAAIgC,YACZnB,KAAMb,EAAIiC,UACVnB,MAAOd,EAAIkC,WACXnB,QAASf,EAAImC,aACblB,QAASlB,EAAMY,SAASM,QACxBP,OAAQX,EAAMY,SAASD,QAEzBX,EAAMU,iBAAiBE,SAK/BS,aAAaO,WACP5B,EAAMY,SAASD,QAAUiB,IACrBS,EAASpC,EAAIqC,gBAAgBtC,EAAMY,SAASD,OAAQ,CACxDO,QAASlB,EAAMY,SAASM,UAE1BlB,EAAMU,iBAAiB,IAClBV,EAAMY,YACNyB,KAGArC,EAAMY,SAASD,QACrBX,EAAMY,SAASD,QAElBU,aAAoBO,MAAAA,QACZW,EAAevC,EAAMY,SACrB4B,EAAgB,IAChBD,EAAGzB,MAAQc,EAAKd,MAAQ,CAAEA,KAAMyB,EAAGzB,SACnCyB,EAAGrB,SAAWU,EAAKV,SAAW,CAAEA,QAASqB,EAAGrB,YAC5CqB,EAAGvB,SAAWY,EAAKZ,SAAW,CAAEA,QAASuB,EAAGvB,YAC5CuB,EAAGxB,OAASa,EAAKb,OAAS,CAAEA,MAAOwB,EAAGxB,UACtCwB,EAAG1B,QAAUe,EAAKf,QAAU,CAC9BA,OAAQ0B,EAAG1B,OAAO4B,IAAM,CAACF,EAAG1B,OAAO4B,IAAKF,EAAG1B,OAAO6B,KAAOH,EAAG1B,YAG5D8B,OAAOC,KAAKJ,GAAKK,cACnB5C,EAAI6C,OACI9C,EAAM+C,oBACP,SACH9C,EAAI+C,OAAOR,EAAK,CAAER,YAAY,QAC3B,SACH/B,EAAIgD,OAAOT,EAAK,CAAER,YAAY,YAE9B/B,EAAIiD,MAAMV,EAAK,CAAER,YAAY,WAG5BO,GACNvC,EAAMY,UAEG,UAEZS,aAAa,KACPrB,EAAMmD,gBACRhD,EAAQ,EACRiD,OAAOC,sBAAsB,SAASC,IAChCnD,EAAQ,KACVA,IACAiD,OAAOC,sBAAsBC,GAC7B7D,MAAM,IAAMQ,EAAIsD,gCAOrB5D,WAAW6D,UAASC,MAAO,IAAMxD,iCAC/BD,EAAM0D,iDAEAxD,kCAAAA,8FACEF,EAAM2D,OAAS,KACX3D,EAAM4D,uHCnJnBC,cAAgBjE,gBAEhBkE,UAAY,IAAchE,WAAW+D,eAErCE,gBAGD/D,UACGC,EAAiBJ,gBACvBG,EAAMgE,GAAKhE,EAAMgE,IAAMC,iBAEvB7D,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC3CnE,IAAMoE,UAAUrE,EAAMgE,KAAO/D,IAAMqE,UAAUtE,EAAMgE,GAAIhE,EAAMuE,UAIhEpD,UAAU,KACRlB,IACGuE,WACAC,OAAOnD,QACNoD,GAASA,EAAMH,SAAWvE,EAAMgE,IAAM/D,IAAM0E,YAAYD,EAAMV,KAElE/D,IAAMoE,UAAUrE,EAAMgE,KAAO/D,IAAM2E,aAAa5E,EAAMgE,MAIxD3C,aAAa6C,WACe,YAAtBlE,EAAMuE,OAAOM,MAAuB7E,EAAMuE,OAAOO,OAErD7E,IAAM4B,OACJ5B,IAAMoE,UAAUrE,EAAMgE,KACtB/D,IAAMoE,UAAUrE,EAAMgE,IAAIe,QAAQ/E,EAAMuE,OAAOO,wBAIhDjB,cAAcL,4BAAgB,CAAEQ,GAAIhE,EAAMgE,2BACxChE,EAAM0D,aC1CPsB,KAAO,CACXC,EAA+B,GAC/BC,EAAgC,YAGzB,IADM,IAAIC,IAAI,IAAIxC,OAAOC,KAAKqC,MAActC,OAAOC,KAAKsC,MAC9CE,OAAO,CAACC,EAAKC,SACtB7B,EAAQwB,EAASK,UACnB7B,IAAUyB,EAAUI,IACtBD,EAAIE,KAAK,CAACD,EAAK7B,IAEV4B,GACN,KAGCG,MAoBDxF,UACGC,EAAiBJ,SACjB0E,EAA8BT,mBACpC9D,EAAMgE,GAAKhE,EAAMgE,IAAMC,iBAEvB7D,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAExCnE,IAAMwF,SAASzF,EAAMgE,KAEzB/D,IAAMyF,SACJ1F,EAAM0E,OAAS,IACV1E,EAAM6B,MACTmC,GAAIhE,EAAMgE,GACVO,OAAQA,EAAOP,IAEjBhE,EAAM2F,WACF1F,IACGuE,WACAC,OAAOmB,KAAKC,GAAKA,EAAEhB,OAAS7E,EAAM2F,YAAY3B,GACjDhE,EAAM8F,YAKdzE,aAAcO,OAET5B,EAAM6B,OACN5B,IAAM4B,OACN5B,IAAMoE,UAAUE,EAAOP,KACvB/D,IAAMwF,SAASzF,EAAMgE,WAIpBhE,EAAM6B,MAAMkE,UAAWnE,MAAAA,SAAAA,EAAMmE,SAC/Bf,KAAKhF,EAAM6B,MAAMkE,OAAQnE,MAAAA,SAAAA,EAAMmE,QAAQzE,QAAQ,CAAA,CAAEgE,EAAK7B,KACpDxD,IAAM+F,kBAAkBhG,EAAMgE,GAAIsB,EAAK7B,EAAO,CAAEwC,UAAU,KAG1DjG,EAAM6B,MAAMqE,SAAUtE,MAAAA,SAAAA,EAAMsE,QAC9BlB,KAAKhF,EAAM6B,MAAMqE,MAAOtE,MAAAA,SAAAA,EAAMsE,OAAO5E,QAAQ,CAAA,CAAEgE,EAAK7B,KAClDxD,IAAMkG,iBAAiBnG,EAAMgE,GAAIsB,EAAK7B,EAAO,CAAEwC,UAAU,KAI3DjG,EAAM6B,MAAMuE,WAAYxE,MAAAA,SAAAA,EAAMwE,UAC9BpG,EAAM6B,MAAMwE,WAAYzE,MAAAA,SAAAA,EAAMyE,UAE9BpG,IAAMqG,kBACJtG,EAAMgE,GACNhE,EAAM6B,MAAMuE,QACZpG,EAAM6B,MAAMwE,SAGZrG,EAAM6B,MAAM0E,UAAW3E,MAAAA,SAAAA,EAAM2E,SAC/BtG,IAAMuG,UAAUxG,EAAMgE,GAAIhE,EAAM6B,MAAM0E,OAAQ,CAAEN,UAAU,IAErDjG,EAAM6B,OACZ7B,EAAM6B,OAGTR,aAAcO,YAEQ6E,IAAlBzG,EAAM0G,SACN1G,EAAM0G,UAAY9E,GACjB3B,IAAMoE,UAAUE,EAAOP,KACvB/D,IAAMwF,SAASzF,EAAMgE,WAIxB/D,IAAM+F,kBACJhG,EAAMgE,GACN,aACAhE,EAAM0G,QAAU,UAAY,OAC5B,CAAET,UAAU,IAEPjG,EAAM0G,SACZ1G,EAAM0G,SAGTrF,aAAa6C,UACNlE,EAAMuG,SAEVtG,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMuG,UAAUxG,EAAMgE,GAAIhE,EAAMuG,WAIlClF,aAAa6C,UACNlE,EAAM2G,cAAiB3G,EAAM2G,aAAa3C,KAE9C/D,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAE5CnE,IAAM2G,mBAAmB,CACvBrC,OAAQA,EAAOP,GACf6C,YAAa7G,EAAM6B,MAAM,kBAE3B5B,IAAM6G,gBACJ,CACEvC,OAAQA,EAAOP,GACf6C,YAAa7G,EAAM6B,MAAM,gBACzBmC,GAAIhE,EAAM2G,aAAa3C,IAEzBhE,EAAM2G,aAAaI,UAIhB/G,EAAM0D,UCnJTsD,IAGDhH,UACGC,EAAiBJ,gBAEvBO,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMgH,OAAOjH,EAAM6B,SAGrBV,UAAU,IAAMlB,IAAMgH,OAAO,OAG7B5F,aAAa6C,eACWuC,IAAlBzG,EAAM0G,UAETzG,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMgH,OAAOjH,EAAM0G,QAAU1G,EAAM6B,MAAQ,SAGtC7B,EAAM0D,UCrBTwD,IAGDlH,UACGC,EAAiBJ,SACjBsH,EAAU,cAEhB/G,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC3CnE,IAAMwF,SAAS0B,IAAYlH,IAAMyF,SAAS,IAAK1F,EAAM6B,MAAOmC,GAAImD,MAInEhG,UAAU,IAAMlB,IAAMwF,SAAS0B,IAAYlH,IAAM0E,YAAYwC,IAG7D9F,aAAa6C,eACWuC,IAAlBzG,EAAM0G,UAETzG,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAM+F,kBACJmB,EACA,aACAnH,EAAM0G,QAAU,UAAY,WAIzB1G,EAAM0D,UCvBT0D,QAGDpH,UACGC,EAAiBJ,SACjB0E,EAA8BT,mBAGpC1D,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMoH,WAAW,IAAKrH,EAAM6B,MAAO0C,OAAQA,EAAOP,OAIpD7C,UAAU,IAAMlB,IAAMoH,WAAW,OAGjChG,aAAa6C,eACWuC,IAAlBzG,EAAM0G,UAETzG,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aAC5CnE,IAAMoH,WAAWrH,EAAM0G,QAAU1G,EAAM6B,MAAQ,SAG1C7B,EAAM0D,UCvBT4D,QAgBDtH,UACGC,EAAiBJ,SACjB,CAAC0H,EAASC,GAAcC,aAAa,aAE3CrH,QAAQ8D,cACFqD,SAEIvH,EAAM6E,UACP,aACH0C,EAAU,IAAIlH,SAASqH,kBAAkB1H,EAAMO,mBAE5C,QACHgH,EAAU,IAAIlH,SAASsH,aAAa3H,EAAMO,mBAEvC,cACHgH,EAAU,IAAIlH,SAASuH,mBAAmB5H,EAAMO,mBAE7C,aACHgH,EAAU,IAAIlH,SAASwH,kBACrB7H,EAAMO,SAAW,CAAEC,UAAWP,IAAMO,sBAGnC,YACH+G,EAAU,IAAIlH,SAASyH,iBAAiB9H,EAAMO,SAiBlDgH,GAAWtH,IAAM8H,WAAWR,EAASvH,EAAMgI,UAC3CR,EAAWD,KAGbpG,UAAU,IAAMlB,IAAMgI,cAAcV,MAE7BvH,EAAM0D,6CCjETwE,OAGDlI,UACGC,EAAiBJ,aACnBsI,EAAS,YAGb/H,QAAQ8D,gBACNiE,EAAS,IAAI9H,SAAS6H,OAAOlI,EAAMO,SAChC6H,UAAUpI,EAAMqI,QAChBC,SACCtI,EAAM0D,UACF,IAAIrD,SAASkI,OAAQC,qDAAoBxI,EAAM0D,cAC/C,MAEL+E,MAAMxI,OAGXkB,UAAU,IAAMgH,EAAO/G,UAGvBC,aAAa,IAAM8G,EAAOC,UAAUpI,EAAMqI,8CCtBtCE,MAGDvI,UACGC,EAAiBJ,aACnB6I,EAAQ,YAGZtI,QAAQ8D,gBACNwE,EAAQ,IAAIrI,SAASkI,MAAMvI,EAAMO,SAC9B6H,UAAUpI,EAAMqI,QAChBG,mDAAoBxI,EAAM0D,cAC1B+E,MAAMxI,OAGXkB,UAAU,IAAMuH,EAAMtH,UAGtBC,aAAa,IAAMqH,EAAMN,UAAUpI,EAAMqI,SAGzChH,aAAa,IAAMqH,EAAMF,mEAAoBxI,EAAM0D,sBCpB/CiF,MAUD3I,UACGC,EAAiBJ,gBAEvBO,QAAQ8D,UACLjE,IAAMkE,uBAA0BlE,IAAMmE,KAAK,aACxCpE,EAAM4I,IACR3I,IAAM4I,UAAU7I,EAAM4I,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChB7I,IAAM+I,SAAShJ,EAAMgE,KAAO/D,IAAMgJ,SAASjJ,EAAMgE,GAAI+E,KAGvD9I,IAAM+I,SAAShJ,EAAMgE,KACpB/D,IAAMgJ,SAASjJ,EAAMgE,GAAIhE,EAAM+I,MAAO/I,EAAMO,WAIlDY,UAAU,IAAMlB,IAAM+I,SAAShJ,EAAMgE,KAAO/D,IAAMiJ,YAAYlJ,EAAMgE,KAGpE3C,aAAa6C,UACPlE,EAAM+I,OAAS/I,EAAM4I,MAErB5I,EAAM4I,IACR3I,IAAM4I,UAAU7I,EAAM4I,IAAK,CAACE,EAAOC,QAC7BD,EAAO,MAAMA,EAChB7I,IAAM+I,SAAShJ,EAAMgE,KAAO/D,IAAMkJ,YAAYnJ,EAAMgE,GAAI+E,KAG3D9I,IAAM4B,OACJ5B,IAAM+I,SAAShJ,EAAMgE,KACrB/D,IAAMkJ,YAAYnJ,EAAMgE,GAAIhE,EAAM+I"}

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

@@ -31,7 +31,9 @@ const Image = props => {
             });
         }
         else {
-            map().hasImage(props.id) && map().updateImage(props.id, props.image);
+            map().style &&
+                map().hasImage(props.id) &&
+                map().updateImage(props.id, props.image);
         }
     });
     return <></>;

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

@@ -33,6 +33,7 @@ const Layer = props => {
     // Update Style
     createEffect((prev) => {
         if (!props.style ||
+            !map().style ||
             !map().getSource(source.id) ||
             !map().getLayer(props.id))
             return;

package/dist/source/components/MapGL/events.js

@@ -0,0 +1,47 @@
+const events = [
+    'onResize',
+    'onRemove',
+    'onMouseDown',
+    'onMouseUp',
+    'onMouseOver',
+    'onMouseMove',
+    'onClick',
+    'onDblClick',
+    'onMouseEnter',
+    'onMouseLeave',
+    'onMouseOut',
+    'onContextMenu',
+    'onTouchStart',
+    'onTouchEnd',
+    'onTouchMove',
+    'onTouchCancel',
+    'onMoveStart',
+    'onMove',
+    'onMoveEnd',
+    'onDragStart',
+    'onDrag',
+    'onDragEnd',
+    'onZoomStart',
+    'onZoom',
+    'onZoomEnd',
+    'onRotateStart',
+    'onRotate',
+    'onRotateEnd',
+    'onPitchStart',
+    'onPitch',
+    'onPitchEnd',
+    'onBoxZoomStart',
+    'onBoxZoomEnd',
+    'onBoxZoomCancel',
+    'onWebglContextLost',
+    'onWebglContextRestored',
+    'onLoad',
+    'onError',
+    'onData',
+    'onStyleData',
+    'onSourceData',
+    'onDataLoading',
+    'onStyleDataLoading',
+    'onSourceDataLoading',
+];
+export { events as default };

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

@@ -1,4 +1,5 @@
-import { createEffect, createMemo, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
+import { createEffect, onMount, onCleanup, createContext, useContext, useTransition, } from 'solid-js';
+import events from './events';
 import mapboxgl from 'mapbox-gl';
 import 'mapbox-gl/dist/mapbox-gl.css';
 const [pending, start] = useTransition();
@@ -7,8 +8,6 @@ const useMap = () => useContext(MapContext);
 const MapGL = props => {
     let map;
     let mapRef;
-    let containerRef;
-    onCleanup(() => map.remove());
     onMount(() => {
         map = new mapboxgl.Map({
             ...props.options,
@@ -21,33 +20,40 @@ const MapGL = props => {
             bearing: props.viewport.bearing || null,
             fitBoundsOptions: { padding: props.viewport.padding },
         });
-        map.container = containerRef;
     });
-    createEffect(() => map.on('mousemove', evt => props.onMouseMove(evt.lngLat)));
-    createMemo(() => map && map.setStyle(props.options.style));
-    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);
-    };
-    createEffect(() => props.onViewportChange &&
-        map
-            .on('dragend', _onViewportChange)
-            .on('moveend', _onViewportChange)
-            .on('zoomend', _onViewportChange)
-            .on('rotateend', _onViewportChange)
-            .on('pitchend', _onViewportChange)
-            .on('boxzoomend', _onViewportChange));
-    createMemo(() => {
-        if (map) {
+    onCleanup(() => map.remove());
+    // Hook up events
+    createEffect(() => events.forEach(item => {
+        props[item] && map.on(item.slice(2).toLowerCase(), e => props[item](e));
+    }));
+    // Update map style
+    createEffect(prev => prev !== props.options.style && map.setStyle(props.options.style), props.options.style);
+    // Update Viewport
+    createEffect(() => {
+        props.onViewportChange &&
+            [
+                'dragend',
+                'moveend',
+                'zoomend',
+                'pitchend',
+                'rotateend',
+                'boxzoomend',
+            ].forEach(item => map.on(item, 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);
+            }));
+    });
+    createEffect(prev => {
+        if (props.viewport.bounds != prev) {
             const camera = map.cameraForBounds(props.viewport.bounds, {
                 padding: props.viewport.padding,
             });
@@ -56,19 +62,8 @@ const MapGL = props => {
                 ...camera,
             });
         }
-    });
-    // 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)
+        return props.viewport.bounds;
+    }, props.viewport.bounds);
     createEffect(async (prev) => {
         const vp = props.viewport;
         const nvp = {
@@ -108,7 +103,7 @@ const MapGL = props => {
     });
     return (<MapContext.Provider value={() => map}>
       {props.children}
-      <main ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%' }}></main>
+      <section ref={mapRef} class={props.class || ''} classList={props.classList} style={{ height: '100%', width: '100%' }}></section>
     </MapContext.Provider>);
 };
 export { MapGL as default, useMap };

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

@@ -21,7 +21,8 @@ const SourceComponent = props => {
     createEffect(async () => {
         if (props.source.type !== 'geojson' && !props.source.data)
             return;
-        map().getSource(props.id) &&
+        map().style &&
+            map().getSource(props.id) &&
             map().getSource(props.id).setData(props.source.data);
     });
     return (<SourceContext.Provider value={{ id: props.id }}>

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

@@ -0,0 +1,2 @@
+declare const events: string[];
+export { events as default };

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

@@ -4,15 +4,15 @@ import type MapboxOptions from 'mapbox-gl/src/ui/map';
 import type MapMouseEvent from 'mapbox-gl/src/ui/events';
 import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
 import type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js';
+import type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js';
 export declare type Viewport = {
     center?: LngLatLike;
     bounds?: LngLatBounds;
     zoom?: number;
     pitch?: number;
     bearing?: number;
-    padding?: number;
+    padding?: PaddingOptions;
 };
-export declare type TransitionType = 'flyTo' | 'easeTo' | 'jumpTo';
 declare const useMap: () => MapboxMap;
 declare const MapGL: Component<{
     class?: string;
@@ -23,7 +23,7 @@ declare const MapGL: Component<{
     options?: MapboxOptions;
     children?: Element | Element[];
     triggerResize?: boolean;
-    transitionType?: TransitionType;
+    transitionType?: 'flyTo' | 'easeTo' | 'jumpTo';
     onMouseMove?: (event: MapMouseEvent) => void;
     onViewportChange?: (viewport: Viewport) => void;
 }>;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.1.10",
+  "version": "1.1.11",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "author": "kaihuebner",
@@ -39,14 +39,14 @@
   ],
   "dependencies": {
     "mapbox-gl": "^2.7.0",
-    "solid-js": "^1.3.7"
+    "solid-js": "^1.3.9"
   },
   "devDependencies": {
     "@types/mapbox-gl": "^2.6.1",
-    "rollup": "^2.67.3",
+    "rollup": "^2.68.0",
     "rollup-plugin-import-css": "^3.0.2",
     "rollup-plugin-uglify": "^6.0.4",
-    "rollup-preset-solid": "^1.2.2",
+    "rollup-preset-solid": "^1.4.0",
     "typescript": "^4.5.5"
   }
 }