solid-map-gl 1.7.2 → 1.8.1

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

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

package/dist/source/index.jsx

@@ -1,4 +1,5 @@
-export { MapGL as default, useMap } from './components/MapGL';
+export { MapGL as default } from './components/MapGL';
+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/Atmosphere/index.d.ts

@@ -1,8 +1,8 @@
 import { VoidComponent } from 'solid-js';
-import type { FogSpecification } from 'mapbox-gl/src/style-spec/types.js';
+import type { Fog } from 'mapbox-gl';
 type Props = {
     /** Fog/Atmosphere Specifications */
-    style?: FogSpecification;
+    style?: Fog;
 };
 export declare const Atmosphere: VoidComponent<Props>;
 export {};

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

@@ -1,30 +1,53 @@
 import { Component } from 'solid-js';
-import type LngLatLike from 'mapbox-gl/src/geo/lng_lat.js';
+import type { LngLatLike } from 'mapbox-gl';
+/** Options for rotating the globe. */
 interface RotateGlobeOptions {
+    /** The number of seconds per revolution. */
     secPerRev?: number;
+    /** The maximum zoom level for spinning the globe.  */
     maxSpinZoom?: number;
+    /** The zoom level at which the spinning slows down. */
     slowSpinZoom?: number;
 }
+/** Options for rotating the viewport. */
 interface RotateViewportOptions {
+    /** The number of seconds per revolution. */
     secPerRev?: number;
+    /** The pitch angle in degrees. */
     pitch?: number;
+    /** The center of rotation. */
     around?: LngLatLike;
 }
+/** Props for the component. */
 type Props = {
+    /** Whether to rotate the globe. */
     rotateGlobe?: boolean | RotateGlobeOptions;
+    /** Whether to rotate the viewport. */
     rotateViewport?: boolean | RotateViewportOptions;
+    /** Whether to reverse the rotation direction. */
     reverse?: boolean;
+    /** Whether to reset the rotation when stopped. */
     resetWhenStopped?: boolean;
+    /** Translation options. */
     translate?: {
+        /** The type of translation. */
         type?: 'line' | 'sphere';
+        /** The starting position. */
         start: [number, number, number];
+        /** The ending position. */
         end: [number, number, number];
+        /** The target position. */
         target: LngLatLike;
+        /** The ending target position. */
         targetEnd?: LngLatLike;
+        /** The easing function to use. */
         easing?: 'in' | 'out' | 'inOut';
+        /** Whether to loop the translation. */
         loop?: boolean;
+        /** The duration of the translation in milliseconds. */
         duration: number;
     };
+    /** The children to render. */
     children?: any;
 };
 export declare const Camera: Component<Props>;

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/Light/index.d.ts

@@ -1,5 +1,5 @@
 import { VoidComponent } from 'solid-js';
-import type { LightSpecification } from 'mapbox-gl/src/style-spec/types.js';
+import type { Light as LightSpecification } from 'mapbox-gl';
 type Props = {
     /** Light Specifications */
     style: LightSpecification;

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

@@ -1,11 +1,18 @@
 import { Component } from 'solid-js';
 import type { mapEventTypes } from '../../events';
+import type mapboxgl from 'mapbox-gl';
 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';
 import type { PaddingOptions } from 'mapbox-gl/src/geo/edge_insets.js';
 import type { StyleSpecification } from 'mapbox-gl/src/style-spec/types.js';
 import type { JSX } from 'solid-js';
+export type Map = mapboxgl.Map & {
+    mapLib: any;
+    debug: boolean;
+    sourceIdList: string[];
+    layerIdList: string[];
+};
 export type Viewport = {
     id?: string;
     point?: {
@@ -64,8 +71,6 @@ type Props = {
     /** Children within the Map Container */
     children?: any;
 } & mapEventTypes;
-/** Provides the Mapbox Map Object */
-export declare const useMap: () => MapboxMap;
 /** Creates a new Map Container */
 export declare const MapGL: Component<Props>;
 export {};

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

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

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

@@ -1,7 +1,5 @@
 import { Component } from 'solid-js';
-import type { PopupOptions } from 'mapbox-gl/src/ui/popup.js';
-import type { MarkerOptions } from 'mapbox-gl/src/ui/marker.js';
-import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
+import type { PopupOptions, MarkerOptions, LngLatLike } from 'mapbox-gl';
 type Props = {
     /** Options for the Mapbox GL JS marker */
     options?: MarkerOptions & {

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

@@ -1,6 +1,5 @@
 import { Component } from 'solid-js';
-import type { PopupOptions } from 'mapbox-gl/src/ui/popup.js';
-import type { LngLatLike } from 'mapbox-gl/src/geo/lng_lat.js';
+import type { PopupOptions, LngLatLike } from 'mapbox-gl';
 type Props = {
     /** Options for configuring the popup */
     options?: PopupOptions;

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

@@ -1,10 +1,3 @@
 import { VoidComponent } from 'solid-js';
-import type { TerrainSpecification } from 'mapbox-gl/src/style-spec/types.js';
-type Props = {
-    /** Height exaggeration factor */
-    exaggeration?: number;
-    /** Terrain Source object */
-    source?: TerrainSpecification;
-};
-export declare const Terrain: VoidComponent<Props>;
-export {};
+import type { TerrainSpecification } from 'mapbox-gl';
+export declare const Terrain: VoidComponent<TerrainSpecification>;

package/dist/types/events.d.ts

@@ -1,4 +1,4 @@
-import type { MapMouseEvent, MapTouchEvent, MapWheelEvent, MapDataEvent, MapBoxZoomEvent } from 'mapbox-gl/src/ui/events';
+import type { MapMouseEvent, MapTouchEvent, MapWheelEvent, MapDataEvent, MapBoxZoomEvent } from 'mapbox-gl';
 type mapEventTypes = {
     onMouseDown?: (event: MapMouseEvent) => void;
     onMouseUp?: (event: MapMouseEvent) => void;

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
-export { MapGL as default, useMap } from './components/MapGL';
+export { MapGL as default } from './components/MapGL';
+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.7.2",
+  "version": "1.8.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,19 +50,20 @@
     "not ie 11"
   ],
   "devDependencies": {
-    "@rollup/plugin-terser": "^0.4.1",
-    "@solidjs/testing-library": "^0.7.0",
+    "@rollup/plugin-terser": "^0.4.3",
+    "@solidjs/testing-library": "^0.7.1",
+    "@types/mapbox-gl": "^2.7.11",
     "canvas": "^2.11.2",
-    "jsdom": "^21.1.1",
-    "mapbox-gl": "^2.13.0",
-    "rollup": "^3.20.2",
+    "jsdom": "^22.1.0",
+    "mapbox-gl": "^2.15.0",
+    "rollup": "^3.25.1",
     "rollup-plugin-import-css": "^3.2.1",
     "rollup-preset-solid": "^2.0.1",
-    "solid-js": "^1.7.3",
-    "typescript": "^5.0.4",
-    "vite": "^4.2.1",
+    "solid-js": "^1.7.6",
+    "typescript": "^5.1.3",
+    "vite": "^4.3.9",
     "vite-plugin-solid": "^2.7.0",
-    "vitest": "^0.30.0"
+    "vitest": "^0.32.0"
   },
   "peerDependencies": {
     "mapbox-gl": "^0.x || ^1.x || ^2.x"