solid-map-gl 1.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 GIShub
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,250 @@
+![Banner](./docs/banner.png)
+
+# GIShub - Solid Mapbox GL JS
+
+<!-- [![Node CI](https://github.com/urbica/react-map-gl/workflows/Node%20CI/badge.svg)](https://github.com/urbica/react-map-gl/actions)
+[![codecov](https://codecov.io/gh/urbica/react-map-gl/branch/main/graph/badge.svg)](https://codecov.io/gh/urbica/react-map-gl)
+[![npm](https://img.shields.io/npm/dt/@urbica/react-map-gl.svg?style=popout)](https://www.npmjs.com/package/@urbica/react-map-gl)
+[![npm](https://img.shields.io/npm/v/@urbica/react-map-gl.svg?style=popout)](https://www.npmjs.com/package/@urbica/react-map-gl)
+![npm bundle size (scoped)](https://img.shields.io/bundlephobia/minzip/@urbica/react-map-gl.svg) -->
+
+[Solid](https://www.solidjs.com/) Component Library for [Mapbox GL JS.](https://github.com/mapbox/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.](https://docs.mapbox.com/mapbox-gl-js/api/)
+
+- [Installation](#installation)
+- [Components](#components)
+- [Usage](#usage)
+  - [Static Map](#static-map)
+  - [Interactive Map](#interactive-map)
+  - [Map with Source and Layer](#map-with-source-and-layer)
+  - [Map with GeoJSON Source](#map-with-geojson-source)
+
+<br>
+
+![Gallery](./docs/gallery.png)
+
+## Installation
+
+```shell
+yarn add gishub/solid-map-gl
+```
+
+```shell
+npm install --save gishub/solid-map-gl
+```
+
+### Optional Dependencies
+
+If you want to use `LanguageControl` and `TrafficControl`:
+
+```shell
+yarn add @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
+```
+
+```shell
+npm install --save @mapbox/mapbox-gl-language @mapbox/mapbox-gl-traffic
+```
+
+## Components
+
+| Component                         | Description                                                                                                            |
+| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------- |
+| [MapGL](src/components/MapGL)     | Represents map on the page                                                                                             |
+| [Source](src/components/Source)   | [Sources](https://docs.mapbox.com/mapbox-gl-js/api/#sources) specify the geographic features to be rendered on the map |
+| [Layer](src/components/Layer)     | [Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/#layers) specify the `Sources` style                          |
+| [Sky](src/components/Sky)         | Specify the Sky Layer                                                                                                  |
+| [Fog](src/components/Fog)         | Specify the Fog Layer                                                                                                  |
+| [Terrain](src/components/Terrain) | Specify the Terrain Layer                                                                                              |
+| [Image](src/components/Image)     | Adds an image to the map style                                                                                         |
+| [Popup](src/components/Popup)     | Component for [Mapbox GL JS Popup](https://docs.mapbox.com/mapbox-gl-js/api/#popup)                                    |
+| [Marker](src/components/Marker)   | Component for [Mapbox GL JS Marker](https://docs.mapbox.com/mapbox-gl-js/api/#marker)                                  |
+| [Control](src/components/Control) | Represents the map's control                                                                                           |
+
+## Usage
+
+To use any of Mapbox’s tools, APIs, or SDKs, you’ll need a Mapbox [access token](https://www.mapbox.com/help/define-access-token/). Mapbox uses access tokens to associate requests to API resources with your account. You can find all your access tokens, create new ones, or delete existing ones on your [API access tokens page](https://www.mapbox.com/studio/account/tokens/).
+
+### Static Map
+
+By default, `MapGL` component renders in a static mode. That means that the user cannot interact with the map.
+
+```jsx
+import MapGL from '../solid-map-gl'
+
+<MapGL
+    options={{
+        accessToken: { MAPBOX_ACCESS_TOKEN },
+        style: 'mapbox://styles/mapbox/light-v10',
+    }}
+    viewport={{
+        center: [-122.41, 37.78]
+        zoom: 11,
+    }}>
+</MapGL>
+```
+
+### Interactive Map
+
+In most cases, you will want the user to interact with the map. To do this, you need to provide `onViewportChange` handler, that will update the map's viewport state.
+
+```jsx
+import { createSignal } from 'solid-js'
+import MapGL, { Viewport } from '../solid-map-gl'
+
+const [viewport, setViewport] = createSignal({
+    center: [-122.41, 37.78]
+    zoom: 11,
+} as Viewport)
+
+<MapGL
+    options={{
+        accessToken: { MAPBOX_ACCESS_TOKEN },
+        style: 'mapbox://styles/mapbox/light-v10',
+    }}
+    viewport={viewport()}
+    onViewportChange={evt => setViewport(evt)}>
+</MapGL>
+```
+
+### Map with Source and Layer
+
+[Sources](https://docs.mapbox.com/mapbox-gl-js/api/sources/) specify the geographic features to be rendered on the map.
+
+[Layers](https://docs.mapbox.com/mapbox-gl-js/style-spec/layers/) specify the Sources styles. The type of layer is specified by the `"type"` property in the layers style object, and must be one of `background`, `fill`, `line`, `symbol`, `raster`, `circle`, `fill-extrusion`, `heatmap`, `hillshade`.
+
+Except for layers of the `background` type, each layer needs to refer to a source. Either buy referencing the `id` in `sourceId` or by nesting the layer within the source component. Layers take the data that they get from a source, optionally filter features, and then define how those features are styled.
+
+```jsx
+import MapGL, { Source, Layer } from '../solid-map-gl'
+
+<MapGL
+    options={{
+        accessToken: { MAPBOX_ACCESS_TOKEN },
+        style: 'mapbox://styles/mapbox/light-v10',
+    }}>
+    <Source
+        source={{
+        type: 'vector',
+        url: 'mapbox://mapbox.mapbox-terrain-v2'
+    }}>
+        <Layer style={{
+            type: 'line',
+            'source-layer': 'contour'
+            paint: {
+                'line-color': '#877b59',
+                'line-width': 1,
+            }
+        }} />
+    </Source>
+</MapGL>
+```
+
+### Map with GeoJSON Source
+
+To draw a GeoJSON on a map, add `Source` with the `type` property set to `geojson` and `data` property set to a URL or inline [GeoJSON](http://geojson.org/).
+
+```jsx
+import { createSignal } from 'solid-js'
+import MapGL, { Source, Layer } from '../solid-map-gl'
+
+const [viewport, setViewport] = createSignal({
+    center: [-122.486052, 37.830348],
+    zoom: 15,
+})
+
+const data = {
+  type: 'Feature',
+  geometry: {
+    type: 'LineString',
+    coordinates: [
+      [-122.48369693756104, 37.83381888486939],
+      [-122.48348236083984, 37.83317489144141],
+      [-122.48339653015138, 37.83270036637107],
+      [-122.48356819152832, 37.832056363179625],
+      [-122.48404026031496, 37.83114119107971],
+      [-122.48404026031496, 37.83049717427869],
+      [-122.48348236083984, 37.829920943955045],
+      [-122.48356819152832, 37.82954808664175],
+      [-122.48507022857666, 37.82944639795659],
+      [-122.48610019683838, 37.82880236636284],
+      [-122.48695850372314, 37.82931081282506],
+      [-122.48700141906738, 37.83080223556934],
+      [-122.48751640319824, 37.83168351665737],
+      [-122.48803138732912, 37.832158048267786],
+      [-122.48888969421387, 37.83297152392784],
+      [-122.48987674713133, 37.83263257682617],
+      [-122.49043464660643, 37.832937629287755],
+      [-122.49125003814696, 37.832429207817725],
+      [-122.49163627624512, 37.832564787218985],
+      [-122.49223709106445, 37.83337825839438],
+      [-122.49378204345702, 37.83368330777276],
+    ],
+  },
+}
+
+<MapGL
+    options={{
+        accessToken: { MAPBOX_ACCESS_TOKEN },
+        style: 'mapbox://styles/mapbox/light-v10',
+    }}
+    viewport={viewport()}
+    onViewportChange={evt => setViewport(evt)}>
+    <Source
+        source={{
+            type: 'geojson',
+            data: {data}
+    }}>
+        <Layer style={{
+            type: 'line',
+            layout: {
+                'line-join': 'round',
+                'line-cap': 'round',
+            }
+            paint: {
+                'line-color': '#888',
+                'line-width': 8,
+            }
+        }} />
+    </Source>
+</MapGL>
+```
+
+### Custom Layers support
+
+[Custom layers](https://docs.mapbox.com/mapbox-gl-js/api/properties/#customlayerinterface) allow a user to render directly into the Map's GL context using the map's camera.
+
+Here is an example using [deck.gl.](https://github.com/uber/deck.gl)
+
+```jsx
+import { createSignal } from 'solid-js'
+import MapGL, { Source, Layer } from '../solid-map-gl'
+import { MapboxLayer } from '@deck.gl/mapbox'
+import { ScatterplotLayer } from '@deck.gl/layers'
+
+const [viewport, setViewport] = createSignal({
+    center: [-74.5, 40],
+    zoom: 9,
+})
+
+const myDeckLayer = new MapboxLayer({
+  id: 'my-scatterplot',
+  type: ScatterplotLayer,
+  data: [{ position: [-74.5, 40], size: 1000 }],
+  getPosition: d => d.position,
+  getRadius: d => d.size,
+  getColor: [255, 0, 0],
+})
+
+<MapGL
+    options={{
+        accessToken: { MAPBOX_ACCESS_TOKEN },
+        style: 'mapbox://styles/mapbox/light-v10',
+    }}
+    viewport={viewport()}
+    onViewportChange={evt => setViewport(evt)}>
+        <Layer customLayer={myDeckLayer} />
+</MapGL>
+```
+
+## Changelog
+
+- 1.0.0 - Initial release

package/dist/esm/index.js

@@ -0,0 +1,386 @@
+import { template, createComponent, insert, effect, classList } from 'solid-js/web';
+import { useTransition, createContext, onCleanup, onMount, createEffect, useContext, createUniqueId, createSignal } from 'solid-js';
+import mapboxgl from 'mapbox-gl';
+
+const _tmpl$$2 = template(`<main></main>`, 2);
+const [pending, start] = useTransition();
+const MapContext = createContext();
+
+const useMap = () => useContext(MapContext);
+
+const MapGL = props => {
+  let map;
+  let mapRef;
+  onCleanup(() => map.remove());
+  onMount(() => {
+    map = new mapboxgl.Map({ ...props.options,
+      container: mapRef,
+      bounds: props.viewport.bounds,
+      center: props.viewport.center,
+      zoom: props.viewport.zoom || null,
+      pitch: props.viewport.pitch || null,
+      bearing: props.viewport.bearing || null,
+      fitBoundsOptions: {
+        padding: props.viewport.padding
+      }
+    });
+  });
+  createEffect(() => props.onMouseMove && map.on('mousemove', event => props.onMouseMove(event.lngLat)));
+
+  const _onViewportChange = () => {
+    const viewport = {
+      center: map.getCenter(),
+      zoom: map.getZoom(),
+      pitch: map.getPitch(),
+      bearing: map.getBearing(),
+      padding: props.viewport.padding
+    };
+    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));
+  createEffect(async () => {
+    if (!props.viewport.bounds) return; // await map.once('idle')
+
+    map.fitBounds(props.viewport.bounds, {
+      padding: props.viewport.padding
+    });
+  });
+  let index = 0;
+  createEffect(() => {
+    if (props.triggerResize) {
+      index = 0;
+      window.requestAnimationFrame(function loop() {
+        if (index < 15) {
+          index++;
+          window.requestAnimationFrame(loop);
+          start(() => map.resize());
+        }
+      });
+    }
+  });
+  return createComponent(MapContext.Provider, {
+    value: () => map,
+
+    get children() {
+      const _el$ = _tmpl$$2.cloneNode(true);
+
+      const _ref$ = mapRef;
+      typeof _ref$ === "function" ? _ref$(_el$) : mapRef = _el$;
+
+      _el$.style.setProperty("height", "100%");
+
+      _el$.style.setProperty("width", "100%");
+
+      insert(_el$, () => props.children);
+
+      effect(_p$ => {
+        const _v$ = props.class || '',
+              _v$2 = props.classList;
+
+        _v$ !== _p$._v$ && (_el$.className = _p$._v$ = _v$);
+        _p$._v$2 = classList(_el$, _v$2, _p$._v$2);
+        return _p$;
+      }, {
+        _v$: undefined,
+        _v$2: undefined
+      });
+
+      return _el$;
+    }
+
+  });
+};
+
+const SourceContext = createContext();
+
+const useSource = () => useContext(SourceContext);
+
+const SourceComponent = props => {
+  const map = useMap();
+  props.id = props.id || createUniqueId(); // Add Source
+
+  onMount(async () => {
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    !map().getSource(props.id) && map().addSource(props.id, props.source);
+  }); // Remove Source
+
+  onCleanup(() => {
+    map().getStyle().layers.forEach(layer => layer.source === props.id && map().removeLayer(layer.id));
+    map().getSource(props.id) && map().removeSource(props.id);
+  }); // Update GeoJSON Data
+
+  createEffect(async () => {
+    if (props.source.type !== 'geojson' && !props.source.data) return;
+    map().getSource(props.id) && map().getSource(props.id).setData(props.source.data);
+  });
+  return createComponent(SourceContext.Provider, {
+    get value() {
+      return {
+        source: props.id
+      };
+    },
+
+    get children() {
+      return props.children;
+    }
+
+  });
+};
+
+const diff = (newProps = {}, prevProps = {}) => {
+  const keys = new Set([...Object.keys(newProps), ...Object.keys(prevProps)]);
+  return [...keys].reduce((acc, key) => {
+    const value = newProps[key];
+
+    if (value !== prevProps[key]) {
+      acc.push([key, value]);
+    }
+
+    return acc;
+  }, []);
+};
+
+const Layer = props => {
+  const map = useMap();
+  const source = useSource();
+  props.id = props.id || createUniqueId(); // Add Layer
+
+  onMount(async () => {
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    if (map().getLayer(props.id)) return;
+    map().addLayer(props.layer || { ...props.style,
+      id: props.id,
+      source: source.source
+    }, props.beforeType ? map().getStyle().layers.find(l => l.type === props.beforeType).id : props.beforeId);
+  }); // Update Style
+
+  createEffect(prev => {
+    if (!props.style && map().getLayer(props.id)) return;
+    diff(props.style.paint, prev.paint).forEach(([key, value]) => map().setPaintProperty(props.id, key, value));
+    diff(props.style.layout, prev.layout).forEach(([key, value]) => map().setLayoutProperty(props.id, key, value));
+    if (props.style.minzoom !== prev.minzoom || props.style.maxzoom !== prev.max) map().setLayerZoomRange(props.id, props.style.minzoom, props.style.maxzoom);
+    return props.style;
+  }, props.style); // Update Visibility
+
+  createEffect(async () => {
+    if (!props.visible) return;
+    !map().loaded() && (await map().once('styledata'));
+    map().setLayoutProperty(props.id, 'visibility', props.visible ? 'visible' : 'none', {
+      validate: false
+    });
+  }); // Update Filter
+
+  createEffect(async () => {
+    if (!props.filter) return;
+    !map().loaded() && (await map().once('styledata'));
+    map().setFilter(props.id, props.filter);
+  }); // Update Feature State
+
+  createEffect(async () => {
+    if (!props.featureState?.id) return;
+    map().loaded() ? null : await map().once('render');
+    map().removeFeatureState({
+      source: source.source,
+      sourceLayer: props.style['source-layer']
+    });
+    map().setFeatureState({
+      source: source.source,
+      sourceLayer: props.style['source-layer'],
+      id: props.featureState.id
+    }, props.featureState.state);
+  });
+  return props.children;
+};
+
+const Fog = props => {
+  const map = useMap(); // Add Fog Layer
+
+  onMount(async () => {
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    map().setFog(props.style);
+  }); // Remove Fog Layer
+
+  onCleanup(() => map().setFog(null)); // Update Visibility
+
+  createEffect(async () => {
+    if (props.visible === undefined) return;
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    map().setFog(props.visible ? props.style : null);
+  });
+  return props.children;
+};
+
+const Sky = props => {
+  const map = useMap();
+  const layerId = '_sky'; // Add Sky Layer
+
+  onMount(async () => {
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    !map().getLayer(layerId) && map().addLayer({ ...props.style,
+      id: layerId
+    });
+  }); // Remove Sky Layer
+
+  onCleanup(() => map().getLayer(layerId) && map().removeLayer(layerId)); // Update Visibility
+
+  createEffect(async () => {
+    if (props.visible === undefined) return;
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    map().setLayoutProperty(layerId, 'visibility', props.visible ? 'visible' : 'none');
+  });
+  return props.children;
+};
+
+const Terrain = props => {
+  const map = useMap();
+  const source = useSource(); // Add Terrain Layer
+
+  onMount(async () => {
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    map().setTerrain({ ...props.style,
+      source: source.source
+    });
+  }); // Remove Terrain Layer
+
+  onCleanup(() => map().setTerrain(null)); // Update Visibility
+
+  createEffect(async () => {
+    if (props.visible === undefined) return;
+    !map().isStyleLoaded() && (await map().once('styledata'));
+    map().setTerrain(props.visible ? props.style : null);
+  });
+  return props.children;
+};
+
+const Control = props => {
+  const map = useMap();
+  const [control, setControl] = createSignal(null); // Add Control
+
+  onMount(async () => {
+    let control;
+
+    switch (props.type) {
+      case 'scale':
+        control = new mapboxgl.ScaleControl(props.options);
+        break;
+
+      case 'attribution':
+        control = new mapboxgl.AttributionControl(props.options);
+        break;
+
+      case 'fullscreen':
+        control = new mapboxgl.FullscreenControl(props.options);
+        break;
+
+      case 'geolocate':
+        control = new mapboxgl.GeolocateControl(props.options);
+        break;
+
+      default:
+        control = new mapboxgl.NavigationControl(props.options);
+      // case 'language':
+      //   const MapboxLanguage = (await import('@mapbox/mapbox-gl-language'))
+      //     .default
+      //   control = new MapboxLanguage(props.options)
+      //   break
+      // case 'traffic':
+      //   const MapboxTraffic = (await import('@mapbox/mapbox-gl-traffic'))
+      //     .default
+      //   await import('@mapbox/mapbox-gl-traffic/mapbox-gl-traffic.css')
+      //   control = new MapboxTraffic(props.options)
+      //   break
+    }
+
+    map().addControl(control, props.position);
+    setControl(control);
+  });
+  onCleanup(() => map().removeControl(control()));
+  return props.children;
+};
+
+const _tmpl$$1 = template(`<div></div>`, 2);
+
+const Marker = props => {
+  const map = useMap();
+  let marker = null; // Add Marker
+
+  onMount(async () => {
+    marker = new mapboxgl.Marker(props.options).setLngLat(props.lnglat).setPopup(props.children ? new mapboxgl.Popup().setDOMContent((() => {
+      const _el$ = _tmpl$$1.cloneNode(true);
+
+      insert(_el$, () => props.children);
+
+      return _el$;
+    })()) : null).addTo(map());
+  }); // Remove Marker
+
+  onCleanup(() => marker.remove()); // Update Position
+
+  createEffect(() => marker.setLngLat(props.lnglat));
+  return [];
+};
+
+const _tmpl$ = template(`<div></div>`, 2);
+
+const Popup = props => {
+  const map = useMap();
+  let popup = null; // Add Popup
+
+  onMount(async () => {
+    popup = new mapboxgl.Popup(props.options).setLngLat(props.lnglat).setDOMContent((() => {
+      const _el$ = _tmpl$.cloneNode(true);
+
+      insert(_el$, () => props.children);
+
+      return _el$;
+    })()).addTo(map());
+  }); // Remove Popup
+
+  onCleanup(() => popup.remove()); // Update Position
+
+  createEffect(() => popup.setLngLat(props.lnglat)); // Update Content
+
+  createEffect(() => popup.setDOMContent((() => {
+    const _el$2 = _tmpl$.cloneNode(true);
+
+    insert(_el$2, () => props.children);
+
+    return _el$2;
+  })()));
+  return [];
+};
+
+const Image = props => {
+  const map = useMap(); // Add Image
+
+  onMount(() => {
+    if (props.url) {
+      map().loadImage(props.url, (error, image) => {
+        if (error) throw error;
+        !map().hasImage(props.id) && map().addImage(props.id, image);
+      });
+    } else {
+      !map().hasImage(props.id) && map().addImage(props.id, props.image, props.options);
+    }
+  }); // Remove Image
+
+  onCleanup(() => map().hasImage(props.id) && map().removeImage(props.id)); // Update Image
+
+  createEffect(async () => {
+    if (props.image && props.url) return;
+
+    if (props.url) {
+      map().loadImage(props.url, (error, image) => {
+        if (error) throw error;
+        !map().hasImage(props.id) && map().updateImage(props.id, image);
+      });
+    } else {
+      map().hasImage(props.id) && map().updateImage(props.id, props.image);
+    }
+  });
+  return [];
+};
+
+export { Control, Fog, Image, Layer, Marker, Popup, Sky, SourceComponent as Source, Terrain, MapGL as default };
+//# sourceMappingURL=index.js.map