solid-map-gl 1.5.3 → 1.6.1

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

@@ -1,39 +1,46 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
 import { useMap } from '../MapGL';
 export const Marker = props => {
-    const map = useMap?.()();
+    if (!useMap())
+        return;
+    const [map] = useMap();
     let marker = null;
     let popup = null;
-    // Remove Marker
-    onCleanup(() => marker?.remove());
-    // Add/Update Marker
+    if (!props.lngLat)
+        throw new Error('Marker - lngLat is required');
+    // Add or Update Marker
     createEffect(() => {
-        if (untrack(() => !props.openPopup && !props.lngLat))
-            throw new Error('Marker - lngLat is required');
-        popup?.remove();
-        popup = untrack(() => props.children)
-            ? new map.mapLib.Popup(props.options.popup)
-                .setHTML(untrack(() => props.children))
-                .on('close', () => props.onClose?.())
-            : null;
-        marker?.remove();
-        marker = new map.mapLib.Marker(props.options)
-            .setPopup(popup)
-            .on('dragstart', () => props.onDragStart?.())
-            .on('dragend', () => props.onDragEnd?.())
-            .on('drag', () => props.onLngLatChange?.(marker.getLngLat().toArray()));
+        const ops = { ...props.options };
+        const pops = { ...props.options?.popup };
+        if (!map())
+            return;
+        const mapboxgl = map().mapLib;
         untrack(() => {
-            marker.setDraggable(props.draggable).setLngLat(props.lngLat).addTo(map);
-            popup && props.openPopup !== popup.isOpen() && marker.togglePopup();
+            popup?.remove();
+            popup = props.children
+                ? new mapboxgl.Popup(pops)
+                    .setHTML(props.children)
+                    .on('close', () => props.onClose?.())
+                : null;
+            marker?.remove();
+            marker = new mapboxgl.Marker(ops)
+                .setPopup(popup)
+                .on('dragstart', () => props.onDragStart?.())
+                .on('dragend', () => props.onDragEnd?.())
+                .on('drag', () => props.onLngLatChange?.(marker.getLngLat().toArray()));
+            marker.setDraggable(props.draggable).setLngLat(props.lngLat).addTo(map());
+            props.openPopup !== popup?.isOpen() && marker.togglePopup();
         });
     });
     // Toggle Popup
-    createEffect(() => popup && props.openPopup !== popup.isOpen() && marker.togglePopup());
+    createEffect(() => props.openPopup !== popup?.isOpen() && marker.togglePopup());
     // Update Position
     createEffect(() => marker.setLngLat(props.lngLat));
     // Update Popup Content
-    createEffect(() => popup.setHTML(props.children));
+    createEffect(() => popup?.setHTML(props.children));
     // Update Draggable
     createEffect(() => marker.setDraggable(props.draggable));
+    // Remove Marker
+    onCleanup(() => marker?.remove());
     return null;
 };

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

@@ -1,26 +1,34 @@
 import { onCleanup, createEffect, untrack } from 'solid-js';
 import { useMap } from '../MapGL';
 export const Popup = props => {
-    const map = useMap()();
+    if (!useMap())
+        return;
+    const [map] = useMap();
     let popup = null;
-    // Remove Popup
-    onCleanup(() => popup?.remove());
-    // Add/Update Popup
+    if (!props.trackPointer && !props.lngLat)
+        throw new Error('Popup - lngLat or trackPointer is required');
+    // Add or Update Popup
     createEffect(() => {
-        if (!props.trackPointer && !props.lngLat)
-            throw new Error('Popup - lngLat is required');
-        popup?.remove();
-        popup = new map.mapLib.Popup(props.trackPointer
-            ? { ...props.options, closeOnClick: false, closeButton: false }
-            : { focusAfterOpen: false, ...props.options })
-            .setHTML(untrack(() => props.children))
-            .setLngLat(untrack(() => props.lngLat))
-            .on('close', () => props.onClose?.())
-            .addTo(map);
+        const ops = { ...props.options };
+        if (!map())
+            return;
+        const mapboxgl = map().mapLib;
+        untrack(() => {
+            popup?.remove();
+            popup = new mapboxgl.Popup(props.trackPointer
+                ? { ...ops, closeOnClick: false, closeButton: false }
+                : { focusAfterOpen: false, ...ops })
+                .setHTML(props.children || '')
+                .setLngLat(props.lngLat)
+                .on('close', () => props.onClose?.())
+                .addTo(map());
+        });
     });
     // Update Position
     createEffect(() => props.trackPointer ? popup.trackPointer() : popup.setLngLat(props.lngLat));
     // Update Content
-    createEffect(() => popup.setHTML(props.children));
+    createEffect(() => popup.setHTML(props.children || ''));
+    // Remove Popup
+    onCleanup(() => popup?.remove());
     return null;
 };

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

@@ -4,8 +4,14 @@ import { rasterStyleList } from '../../mapStyles';
 const SourceContext = createContext();
 export const useSourceId = () => useContext(SourceContext);
 export const Source = props => {
-    const map = useMap();
+    if (!useMap())
+        return;
+    const [map] = useMap();
     props.id = props.id || createUniqueId();
+    const debug = (text, value) => {
+        map().debug &&
+            console.debug('%c[MapGL]', 'color: #ec4899', text, value || '');
+    };
     const lookup = url => {
         const s = url?.split(':').reduce((p, c) => p && p[c], rasterStyleList);
         const source = s
@@ -25,52 +31,67 @@ export const Source = props => {
             (source.tiles = ['a', 'b', 'c'].map(i => source.tiles[0].replace('{s}', i)));
         return source;
     };
+    // Add Source
+    map().addSource(props.id, lookup(props.source.url));
+    map().sourceIdList.push(props.id);
+    debug('Add Source:', props.id);
+    // Update Data
+    const source = map().getSource(props.id);
+    switch (props.source.type) {
+        case 'geojson':
+            createEffect(() => {
+                const data = props.source.data;
+                if (!map().isSourceLoaded(props.id))
+                    return;
+                source.setData(data || {});
+                debug('Update GeoJSON Data:', props.id);
+            });
+            break;
+        case 'image':
+            createEffect(() => {
+                const url = props.source.url;
+                const coords = props.source.coordinates;
+                if (!map().isSourceLoaded(props.id))
+                    return;
+                source.updateImage(url, coords);
+                debug('Update Image Data:', props.id);
+            });
+            break;
+        case 'vector':
+            createEffect(() => {
+                const url = props.source.url;
+                const tiles = props.source.tiles;
+                if (!map().isSourceLoaded(props.id))
+                    return;
+                url ? source.setUrl(url) : source.setTiles(tiles);
+                debug('Update Vector Data:', props.id);
+            });
+            break;
+        case 'raster':
+            createEffect(() => {
+                const url = props.source.url;
+                if (!map().isSourceLoaded(props.id))
+                    return;
+                const src = lookup(url);
+                src.tiles &&
+                    (src.tiles = ['a', 'b', 'c'].map(i => src.tiles[0].replace('{s}', i)));
+                source._tileJSONRequest?.cancel();
+                source.url = src.url;
+                source.scheme = src.scheme;
+                source._options = { ...source._options, ...src };
+                map().style._sourceCaches[`other:${props.id}`]?.clearTiles();
+                source.load();
+                debug('Update Raster Data:', props.id);
+            });
+            break;
+    }
     // Remove Source
     onCleanup(() => {
-        map &&
-            map()
-                .getStyle()
-                .layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
+        map()
+            ?.getStyle()
+            .layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
         map().removeSource(props.id);
-    });
-    // Update
-    createEffect(() => {
-        // Add Source
-        if (!map().getSource(props.id)) {
-            map().addSource(props.id, lookup(props.source.url));
-            return;
-        }
-        // Update GeoJSON Data
-        if (props.source.type === 'geojson' && props.source.data)
-            map().getSource(props.id)?.setData(props.source.data);
-        // Update Image URL
-        if (props.source.type === 'image' &&
-            (props.source.url || props.source.coordinates))
-            map()
-                .getSource(props.id)
-                ?.updateImage(props.source.url, props.source.coordinates);
-        // Update Vector URL or Tiles
-        if (props.source.type === 'vector' &&
-            (props.source.url || props.source.tiles))
-            props.source.url
-                ? map().getSource(props.id)?.setUrl(props.source.url)
-                : map().getSource(props.id)?.setTiles(props.source.tiles);
-        // Update Raster URL or Tiles
-        if (props.source.type === 'raster' &&
-            (props.source.url || props.source.tiles)) {
-            let source = map().getSource(props.id);
-            if (!source)
-                return;
-            const src = lookup(props.source.url);
-            src.tiles &&
-                (src.tiles = ['a', 'b', 'c'].map(i => src.tiles[0].replace('{s}', i)));
-            source._tileJSONRequest?.cancel();
-            source.url = src.url;
-            source.scheme = src.scheme;
-            source._options = { ...source._options, ...src };
-            map().style._sourceCaches[`other:${props.id}`]?.clearTiles();
-            source.load();
-        }
+        debug('Remove Source:', props.id);
     });
     return (<SourceContext.Provider value={props.id}>
       {props.children}

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

@@ -2,38 +2,33 @@ import { onCleanup, createEffect, createUniqueId, } from 'solid-js';
 import { useMap } from '../MapGL';
 import { useSourceId } from '../Source';
 export const Terrain = props => {
-    const map = useMap()();
+    if (!useMap())
+        return;
+    const [map] = useMap();
     let sourceId = useSourceId();
-    // Remove Terrain Layer
-    onCleanup(() => map?.setTerrain(null));
     // Add Terrain Layer
+    if (sourceId === undefined) {
+        sourceId = createUniqueId();
+        map().addSource(sourceId, map().isMapLibre
+            ? {
+                type: 'raster-dem',
+                url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
+                tileSize: 256,
+            }
+            : {
+                type: 'raster-dem',
+                url: 'mapbox://mapbox.terrain-rgb',
+                tileSize: 512,
+                maxzoom: 14,
+            });
+    }
     createEffect(() => {
-        if (sourceId) {
-            sourceId = createUniqueId();
-            map.addSource(sourceId, map.isMapLibre
-                ? {
-                    type: 'raster-dem',
-                    url: 'https://demotiles.maplibre.org/terrain-tiles/tiles.json',
-                    tileSize: 256,
-                }
-                : {
-                    type: 'raster-dem',
-                    url: 'mapbox://mapbox.terrain-rgb',
-                    tileSize: 512,
-                    maxzoom: 14,
-                });
-        }
-        map.setTerrain({
+        map().setTerrain({
             exaggeration: props.exaggeration || 1,
             source: sourceId,
         });
     });
-    // Update Visibility
-    createEffect(() => {
-        props.visible !== undefined &&
-            map.setTerrain(props.visible
-                ? { exaggeration: props.exaggeration || 1, source: sourceId }
-                : null);
-    });
+    // Remove Terrain Layer
+    onCleanup(() => map().setTerrain(null));
     return null;
 };

package/dist/source/index.jsx

@@ -8,3 +8,4 @@ export { Marker } from './components/Marker';
 export { Popup } from './components/Popup';
 export { Image, patternList } from './components/Image';
 export { Camera } from './components/Camera';
+export { Light } from './components/Light';

package/dist/source/mapStyles.js

@@ -4,12 +4,12 @@ const gishub = 'https://raw.githubusercontent.com/GIShub4/map-styles/main/';
 const hereBase = 'https://assets.vector.hereapi.com/styles/';
 export const vectorStyleList = {
     mb: {
-        light: `${mapBase}/light-v10`,
-        dark: `${mapBase}/dark-v10`,
-        street: `${mapBase}/streets-v11`,
-        outdoor: `${mapBase}/outdoors-v11`,
+        light: `${mapBase}/light-v11`,
+        dark: `${mapBase}/dark-v11`,
+        street: `${mapBase}/streets-v12`,
+        outdoor: `${mapBase}/outdoors-v12`,
         sat: `${mapBase}/satellite-v9`,
-        sat_street: `${mapBase}/satellite-streets-v11`,
+        sat_street: `${mapBase}/satellite-streets-v12`,
         nav: `${mapBase}/navigation-guidance-day-v4`,
         nav_night: `${mapBase}/navigation-guidance-night-v4`,
         basic: `${mapBase}/cjf4m44iw0uza2spb3q0a7s41`,

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

@@ -1,7 +1,15 @@
 import { Component } from 'solid-js';
 import type LngLatLike from 'mapbox-gl/src/geo/lng_lat.js';
+interface RotateOptions {
+    secPerRev?: number;
+    maxZoom?: number;
+    slowZoom?: number;
+    pitch?: number;
+    around?: LngLatLike;
+}
 export declare const Camera: Component<{
-    animate: boolean;
+    rotateGlobe?: boolean | RotateOptions;
+    rotateViewport?: boolean | RotateOptions;
     translate?: {
         type?: 'line' | 'sphere';
         start: [number, number, number];
@@ -14,3 +22,4 @@ export declare const Camera: Component<{
     };
     children?: any;
 }>;
+export {};

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

@@ -1,10 +1,10 @@
-import { Component } from 'solid-js';
+import { VoidComponent } from 'solid-js';
 import type { Options as AttributionOptions } from 'mapbox-gl/src/ui/control/attribution_control';
 import type { Options as FullscreenOptions } from 'mapbox-gl/src/ui/control/fullscreen_control';
 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';
-export declare const Control: Component<{
+export declare const Control: VoidComponent<{
     type: 'navigation' | 'scale' | 'attribution' | 'fullscreen' | 'geolocate';
     options?: NavigationOptions | ScaleOptions | AttributionOptions | FullscreenOptions | GeolocateOptions | object;
     custom?: any;

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

@@ -0,0 +1,5 @@
+import { VoidComponent } from 'solid-js';
+import type { LightSpecification } from 'mapbox-gl/src/style-spec/types.js';
+export declare const Light: VoidComponent<{
+    style: LightSpecification;
+}>;

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

@@ -8,6 +8,10 @@ import type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js';
 import type { JSX } from 'solid-js';
 export type Viewport = {
     id?: string;
+    point?: {
+        x: number;
+        y: number;
+    };
     center?: LngLatLike;
     bounds?: LngLatBounds;
     zoom?: number;
@@ -38,6 +42,8 @@ export declare const MapGL: Component<{
     transitionType?: 'flyTo' | 'easeTo' | 'jumpTo';
     /** Event listener for Viewport updates */
     onViewportChange?: (viewport: Viewport) => void;
+    /** Event listener for User Interaction */
+    onUserInteraction?: (user: boolean) => void;
     /** Displays Map Tile Borders */
     showTileBoundaries?: boolean;
     /** Displays Wireframe if Terrain is visible */

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

@@ -3,5 +3,4 @@ import type { TerrainSpecification } from 'mapbox-gl/src/style-spec/types.js';
 export declare const Terrain: VoidComponent<{
     exaggeration?: number;
     source?: TerrainSpecification;
-    visible?: boolean;
 }>;

package/dist/types/index.d.ts

@@ -8,5 +8,6 @@ export { Marker } from './components/Marker';
 export { Popup } from './components/Popup';
 export { Image, patternList } from './components/Image';
 export { Camera } from './components/Camera';
+export { Light } from './components/Light';
 export type { Viewport } from './components/MapGL';
 export type { Color } from './components/Image';

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.5.3",
+  "version": "1.6.1",
   "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.",
@@ -50,18 +50,18 @@
     "not ie 11"
   ],
   "devDependencies": {
+    "@rollup/plugin-terser": "^0.1.0",
     "jsdom": "^20.0.3",
-    "mapbox-gl": "^2.11.0",
-    "rollup": "^3.5.0",
+    "mapbox-gl": "^2.11.1",
+    "rollup": "^3.7.3",
     "rollup-plugin-import-css": "^3.1.0",
-    "rollup-plugin-terser": "^7.0.2",
     "rollup-preset-solid": "^2.0.1",
-    "solid-js": "^1.6.2",
+    "solid-js": "^1.6.4",
     "solid-testing-library": "^0.5.0",
-    "typescript": "^4.9.3",
-    "vite": "^3.2.4",
-    "vite-plugin-solid": "^2.4.0",
-    "vitest": "^0.25.3"
+    "typescript": "^4.9.4",
+    "vite": "^4.0.0",
+    "vite-plugin-solid": "^2.5.0",
+    "vitest": "^0.25.7"
   },
   "peerDependencies": {
     "mapbox-gl": "^0.x || ^1.x || ^2.x"