solid-map-gl 1.3.7 → 1.4.0

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

@@ -1,12 +1,16 @@
 import { onCleanup, createEffect } from 'solid-js';
 import { useMap } from '../MapGL';
-import mapboxgl from 'mapbox-gl';
 export const Popup = props => {
     const map = useMap();
     let popup = null;
     // Add Popup
-    createEffect(() => {
-        popup = new mapboxgl.Popup(props.options)
+    createEffect(async () => {
+        const mapLib = map().isMapLibre
+            ? await import('maplibre-gl')
+            : await import('mapbox-gl');
+        if (popup)
+            return;
+        popup = new mapLib.Popup(props.options)
             .setLngLat(props.lngLat)
             .setDOMContent(<div>{props.children}</div>)
             .addTo(map());
@@ -14,8 +18,8 @@ export const Popup = props => {
     // Remove Popup
     onCleanup(() => popup.remove());
     // Update Position
-    createEffect(() => popup && popup.setLngLat(props.lngLat));
+    createEffect(() => popup?.setLngLat(props.lngLat));
     // Update Content
-    createEffect(() => popup && popup.setDOMContent(<div>{props.children}</div>));
+    createEffect(() => popup?.setDOMContent(<div>{props.children}</div>));
     return <></>;
 };

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

@@ -21,13 +21,6 @@ export const Source = props => {
             }
             : props.source;
     };
-    // Add Source
-    createEffect(() => {
-        const source = lookup(props.source.url);
-        source.tiles &&
-            (source.tiles = ['a', 'b', 'c'].map(i => source.tiles[0].replace('{s}', i)));
-        !map().getSource(props.id) && map().addSource(props.id, source);
-    });
     // Remove Source
     onCleanup(() => {
         map()
@@ -67,6 +60,13 @@ export const Source = props => {
             source.load();
         }
     });
+    // Add Source
+    createEffect(() => {
+        const source = lookup(props.source.url);
+        source.tiles &&
+            (source.tiles = ['a', 'b', 'c'].map(i => source.tiles[0].replace('{s}', i)));
+        !map().getSource(props.id) && map().addSource(props.id, source);
+    });
     return (<SourceContext.Provider value={props.id}>
       {props.children}
     </SourceContext.Provider>);

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

@@ -8,12 +8,18 @@ export const Terrain = props => {
     createEffect(() => {
         if (!sourceId) {
             sourceId = createUniqueId();
-            map().addSource(sourceId, {
-                type: 'raster-dem',
-                url: 'mapbox://mapbox.terrain-rgb',
-                tileSize: 512,
-                maxzoom: 14,
-            });
+            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({
             exaggeration: props.exaggeration || 1,

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

@@ -1,5 +1,6 @@
 import { Component } from 'solid-js';
 import 'mapbox-gl/dist/mapbox-gl.css';
+import 'maplibre-gl/dist/maplibre-gl.css';
 import type { MapboxOptions } from 'mapbox-gl/src/ui/map';
 import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
 import type { LngLatBounds } from 'mapbox-gl/src/geo/lng_lat_bounds.js';
@@ -52,6 +53,7 @@ export declare const MapGL: Component<{
     cursorStyle?: string;
     darkStyle?: StyleSpecification | string;
     disableResize?: boolean;
+    asMapLibre?: boolean;
     debug?: boolean;
     ref?: HTMLDivElement;
     /** Children within the Map Container */

package/dist/types/mapStyles.d.ts

@@ -1,101 +1,2 @@
-export declare const vectorStyleList: {
-    mb: {
-        light: string;
-        dark: string;
-        street: string;
-        outdoor: string;
-        sat: string;
-        sat_street: string;
-        nav: string;
-        nav_night: string;
-        basic: string;
-        monochrome: string;
-        leshine: string;
-        icecream: string;
-        cali: string;
-        northstar: string;
-        mineral: string;
-        moonlight: string;
-        frank: string;
-        minimo: string;
-        decimal: string;
-        standard: string;
-        blueprint: string;
-        bubble: string;
-        pencil: string;
-        swiss_ski: string;
-        vintage: string;
-        whaam: string;
-        neon: string;
-        camoflauge: string;
-        emerald: string;
-        runner: string;
-        x_ray: string;
-    };
-    esri: {
-        blueprint: string;
-        charted_territory: string;
-        colored_pencil: string;
-        community: string;
-        mid_century: string;
-        modern_antique: string;
-        nat_geo: string;
-        newspaper: string;
-        open_street_map: string;
-        light_gray_canvas: string;
-        dark_gray_canvas: string;
-        human_geo_light: string;
-        human_geo_dark: string;
-        world_navigation: string;
-        world_street: string;
-        world_street_night: string;
-        world_terrain: string;
-        world_terrain_hybrid: string;
-        world_topographic: string;
-        chromium: string;
-        dreamcatcher: string;
-        seahaven: string;
-        sangria: string;
-        mercurial: string;
-        imagery: string;
-        imagery_hybrid: string;
-        firefly: string;
-        firefly_hybrid: string;
-        oceans: string;
-    };
-};
-export declare const rasterStyleList: {
-    osm: {
-        org: string;
-        human: string;
-        cycle: string;
-        topo: string;
-        _copy: string;
-    };
-    carto: {
-        voyager: string;
-        positron: string;
-        dark: string;
-        _copy: string;
-    };
-    stamen: {
-        toner: string;
-        toner_lite: string;
-        watercolor: string;
-        terrain: string;
-        _copy: string;
-    };
-    tf: {
-        cycle: string;
-        trans: string;
-        trans_dark: string;
-        landscape: string;
-        outdoors: string;
-        neighbourhood: string;
-        spinal: string;
-        pioneer: string;
-        atlas: string;
-        mobile: string;
-        _copy: string;
-    };
-};
+export declare const vectorStyleList: object;
+export declare const rasterStyleList: object;

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.3.7",
+  "version": "1.4.0",
   "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.",
@@ -51,20 +51,22 @@
   ],
   "devDependencies": {
     "jsdom": "^20.0.0",
-    "mapbox-gl": "^2.9.2",
-    "rollup": "^2.77.2",
+    "mapbox-gl": "^2.10.0",
+    "maplibre-gl": "^2.4.0",
+    "rollup": "^2.79.0",
     "rollup-plugin-import-css": "^3.0.3",
     "rollup-plugin-uglify": "^6.0.4",
     "rollup-preset-solid": "^1.4.0",
-    "solid-js": "^1.4.8",
+    "solid-js": "^1.5.4",
     "solid-testing-library": "^0.3.0",
-    "typescript": "^4.7.4",
-    "vite": "^3.0.4",
+    "typescript": "^4.8.2",
+    "vite": "^3.1.0",
     "vite-plugin-solid": "^2.3.0",
-    "vitest": "^0.20.2"
+    "vitest": "^0.23.1"
   },
   "peerDependencies": {
     "mapbox-gl": "^2.9.2",
+    "maplibre-gl": "^2.4.0",
     "solid-js": "^1.4.8"
   }
 }