solid-map-gl 1.8.0 → 1.8.2

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

@@ -1,13 +1,13 @@
 import { onCleanup, createEffect, createContext, useContext, createUniqueId, } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 import { rasterStyleList } from '../../mapStyles';
 const SourceContext = createContext();
 export const useSourceId = () => useContext(SourceContext);
 export const Source = props => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     props.id ??= createUniqueId();
     const debug = (text, value) => {
-        map().debug &&
+        ctx.map.debug &&
             console.debug('%c[MapGL]', 'color: #ec4899', text, value || '');
     };
     const lookup = url => {
@@ -30,16 +30,16 @@ export const Source = props => {
         return source;
     };
     // Add Source
-    map().addSource(props.id, lookup(props.source.url));
-    map().sourceIdList.push(props.id);
+    ctx.map.addSource(props.id, lookup(props.source.url));
+    ctx.map.sourceIdList.push(props.id);
     debug('Add Source:', props.id);
     // Update Data
-    const source = map().getSource(props.id);
+    const source = ctx.map.getSource(props.id);
     switch (props.source.type) {
         case 'geojson':
             createEffect(() => {
                 const data = props.source.data;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 source.setData(data || {});
                 debug('Update GeoJSON Data:', props.id);
@@ -49,7 +49,7 @@ export const Source = props => {
             createEffect(() => {
                 const url = props.source.url;
                 const coords = props.source.coordinates;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 source.updateImage(url, coords);
                 debug('Update Image Data:', props.id);
@@ -59,7 +59,7 @@ export const Source = props => {
             createEffect(() => {
                 const url = props.source.url;
                 const tiles = props.source.tiles;
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 url ? source.setUrl(url) : source.setTiles(tiles);
                 debug('Update Vector Data:', props.id);
@@ -68,7 +68,7 @@ export const Source = props => {
         case 'raster':
             createEffect(() => {
                 const src = lookup(props.source.url);
-                if (!map().isSourceLoaded(props.id))
+                if (!ctx.map.isSourceLoaded(props.id))
                     return;
                 src.url ? source.setUrl(src.url) : source.setTiles(src.tiles);
                 debug('Update Raster Data:', props.id);
@@ -77,10 +77,10 @@ export const Source = props => {
     }
     // Remove Source
     onCleanup(() => {
-        map()
+        ctx.map
             ?.getStyle()
-            .layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
-        map()?.getSource(props.id) && map()?.removeSource(props.id);
+            .layers.forEach(layer => layer.source === props.id && ctx.map.removeLayer(layer.id));
+        ctx.map?.getSource(props.id) && ctx.map?.removeSource(props.id);
         debug('Remove Source:', props.id);
     });
     return (<SourceContext.Provider value={props.id}>

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

@@ -1,25 +1,25 @@
 import { createEffect, createUniqueId } from 'solid-js';
-import { useMap } from '../MapProvider';
+import { useMapContext } from '../MapProvider';
 import { useSourceId } from '../Source';
 export const Terrain = (props) => {
-    const [map] = useMap();
+    const [ctx] = useMapContext();
     let sourceId = useSourceId();
     // Add Terrain Source if not already defined
     if (!sourceId && !props.source) {
         sourceId = createUniqueId();
-        map().addSource(sourceId, {
+        ctx.map.addSource(sourceId, {
             type: 'raster-dem',
-            url: map().isMapLibre
+            url: ctx.map.isMapLibre
                 ? 'https://demotiles.maplibre.org/terrain-tiles/tiles.json'
                 : 'mapbox://mapbox.terrain-rgb',
-            tileSize: map().isMapLibre ? 256 : 512,
-            maxzoom: map().isMapLibre ? undefined : 14
+            tileSize: ctx.map.isMapLibre ? 256 : 512,
+            maxzoom: ctx.map.isMapLibre ? undefined : 14
         });
-        map().sourceIdList.push(sourceId);
+        ctx.map.sourceIdList.push(sourceId);
     }
     // Add or Update Terrain Layer
     createEffect(() => {
-        map().setTerrain({
+        ctx.map.setTerrain({
             exaggeration: props.exaggeration || 1,
             source: props.source || sourceId,
         });

package/dist/source/index.jsx

@@ -1,5 +1,5 @@
 export { MapGL as default } from './components/MapGL';
-export { MapProvider, useMap } from './components/MapProvider';
+export { MapProvider, useMapContext } from './components/MapProvider';
 export { Source, useSourceId } from './components/Source';
 export { Layer } from './components/Layer';
 export { Atmosphere } from './components/Atmosphere';

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

@@ -4,8 +4,9 @@ import type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/full
 import type { Options as GeolocateOptions } from 'mapbox-gl/src/ui/control/geolocate_control';
 import type { Options as NavigationOptions } from 'mapbox-gl/src/ui/control/navigation_control';
 import type { Options as ScaleOptions } from 'mapbox-gl/src/ui/control/scale_control';
+type ControlType = 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
 type Props = {
-    type?: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
+    type?: ControlType;
     /** a string that specifies the type of control to be displayed. It can be one of 'navigation', 'scale', 'attribution', 'fullscreen', or 'geolocate' */
     options?: NavigationOptions | ScaleOptions | AttributionOptions | FullscreenOptions | GeolocateOptions | object;
     /** an optional object that contains options specific to the control type */

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

@@ -1,8 +1,11 @@
-import { ParentComponent } from "solid-js";
+import { ParentComponent } from 'solid-js';
 import type { Map } from '../MapGL';
-export declare const MapContext: import("solid-js").Context<import("solid-js").Accessor<any>[]>;
-export declare const useMap: () => import("solid-js").Accessor<any>[];
+export declare const MapContext: import("solid-js").Context<{
+    map: any;
+}[]>;
+export declare const useMapContext: () => {
+    map: any;
+}[];
 export declare const MapProvider: ParentComponent<{
     map?: Map;
-    userInteraction?: boolean;
 }>;

package/dist/types/index.d.ts

@@ -1,5 +1,5 @@
 export { MapGL as default } from './components/MapGL';
-export { MapProvider, useMap } from './components/MapProvider';
+export { MapProvider, useMapContext } from './components/MapProvider';
 export { Source, useSourceId } from './components/Source';
 export { Layer } from './components/Layer';
 export { Atmosphere } from './components/Atmosphere';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.8.0",
+  "version": "1.8.2",
   "name": "solid-map-gl",
   "description": "Solid Component Library for Mapbox GL JS",
   "info": "Solid Component Library for Mapbox GL JS. Mapbox GL JS is a JavaScript library that renders interactive maps from vector tiles and Mapbox styles using WebGL. This project is intended to be as close as possible to the Mapbox GL JS API.",
@@ -56,7 +56,7 @@
     "canvas": "^2.11.2",
     "jsdom": "^22.1.0",
     "mapbox-gl": "^2.15.0",
-    "rollup": "^3.24.0",
+    "rollup": "^3.25.1",
     "rollup-plugin-import-css": "^3.2.1",
     "rollup-preset-solid": "^2.0.1",
     "solid-js": "^1.7.6",