@vinctus/react-maplibre 0.1.0

package/LICENSE

@@ -0,0 +1,7 @@
+ISC License (ISC)
+
+Copyright 2022 Vinctus Technologies Inc.
+
+Permission to use, copy, modify, and/or distribute this software for any purpose with or without fee is hereby granted, provided that the above copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/README.md

@@ -0,0 +1,30 @@
+## react-mapbox
+
+**react-mapbox** is a very minimalist React.js wrapper library for the 
+[Mapbox GL JS](https://docs.mapbox.com/mapbox-gl-js/guides/) 
+Typescript library.
+
+Documentation can be found [here](https://vinctustech.github.io/react-mapbox/).
+
+Testing
+-------
+There is a test program in the `test` directory. It gets the Mapbox access token from environment variable
+`REACT_APP_MAPBOX_API_KEY` in `.env.development`, which can be decrypted using the usual encryption key.
+
+To start the test program type:
+1. ```bash
+   npm i
+   ```
+2. ```bash
+   tsc
+   ```
+3. ```bash
+   cd test
+   ```
+4. ```bash
+   npm i
+   ```
+5. ```bash
+   npm start
+   ```
+   

package/dist/ErrorBoundary.d.ts

@@ -0,0 +1,15 @@
+import React, { Component, ErrorInfo, ReactNode } from 'react';
+interface Props {
+    children?: ReactNode;
+    fallback?: ReactNode;
+}
+interface State {
+    hasError: boolean;
+}
+export declare class ErrorBoundary extends Component<Props, State> {
+    constructor(props: any);
+    static getDerivedStateFromError(_: Error): State;
+    componentDidCatch(error: Error, errorInfo: ErrorInfo): void;
+    render(): string | number | boolean | Iterable<React.ReactNode> | import("react/jsx-runtime").JSX.Element | null | undefined;
+}
+export {};

package/dist/ErrorBoundary.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Component } from 'react';
+export class ErrorBoundary extends Component {
+    constructor(props) {
+        super(props);
+        this.state = { hasError: false };
+    }
+    static getDerivedStateFromError(_) {
+        // Update state so the next render will show the fallback UI.
+        return { hasError: true };
+    }
+    componentDidCatch(error, errorInfo) {
+        console.error('Uncaught map error:', error, errorInfo);
+    }
+    render() {
+        if (this.state.hasError)
+            return this.props.fallback || _jsx("h1", { children: "Sorry.. there was a map error" });
+        return this.props.children;
+    }
+}

package/dist/GeolocateControl.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { ControlPosition } from './types';
+export type GeolocateControlProps = {
+    position?: ControlPosition;
+    showUserLocation?: boolean;
+};
+export declare const GeolocateControl: FC<GeolocateControlProps>;

package/dist/GeolocateControl.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useEffect } from 'react';
+import maplibre from 'maplibre-gl';
+import { useMap } from './Map';
+export const GeolocateControl = (_a) => {
+    var { position = 'top-right' } = _a, options = __rest(_a, ["position"]);
+    const { map } = useMap();
+    const optionsString = JSON.stringify(options);
+    useEffect(() => {
+        const control = new maplibre.GeolocateControl(Object.assign({}, JSON.parse(optionsString)));
+        if (map) {
+            map.addControl(control, position);
+        }
+        return () => {
+            map === null || map === void 0 ? void 0 : map.removeControl(control);
+        };
+    }, [position, optionsString, map]);
+    return null;
+};

package/dist/Layer.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+import { LayerSpecification, GeoJSONSourceSpecification } from 'maplibre-gl';
+export type LayerProps = {
+    layer: Omit<LayerSpecification, 'source'>;
+    source: GeoJSONSourceSpecification;
+};
+export declare const Layer: FC<LayerProps>;

package/dist/Layer.js

@@ -0,0 +1,24 @@
+import { useEffect } from 'react';
+import { useMap } from './Map';
+export const Layer = ({ layer, source }) => {
+    const { map, mapLoaded } = useMap();
+    const layerString = JSON.stringify(Object.assign({ source: layer.id }, layer));
+    const sourceString = JSON.stringify(source);
+    useEffect(() => {
+        let added = false;
+        const parsedSource = JSON.parse(sourceString);
+        const parsedLayer = JSON.parse(layerString);
+        if (map && mapLoaded) {
+            added = true;
+            map.addSource(parsedLayer.id, parsedSource); // when adding, the source must be added first, and then the layer
+            map.addLayer(parsedLayer);
+        }
+        return () => {
+            if (added) {
+                map === null || map === void 0 ? void 0 : map.removeLayer(parsedLayer.id); // when removing, the layer must be removed first, and then the source
+                map === null || map === void 0 ? void 0 : map.removeSource(parsedLayer.id);
+            }
+        };
+    }, [layerString, sourceString, map, mapLoaded]);
+    return null;
+};

package/dist/Map.d.ts

@@ -0,0 +1,48 @@
+import React, { FC, RefAttributes, ReactNode, CSSProperties } from 'react';
+import maplibre, { MapLibreEvent } from 'maplibre-gl';
+export type ViewState = {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+};
+export type ViewStateChangeEvent = (MapLibreEvent<MouseEvent | TouchEvent | WheelEvent | undefined> & {
+    type: 'movestart' | 'move' | 'moveend' | 'zoomstart' | 'zoom' | 'zoomend';
+    viewState: ViewState;
+}) | (MapLibreEvent<MouseEvent | TouchEvent | undefined> & {
+    type: 'rotatestart' | 'rotate' | 'rotateend' | 'dragstart' | 'drag' | 'dragend' | 'pitchstart' | 'pitch' | 'pitchend';
+    viewState: ViewState;
+});
+export declare const viewStateFromMap: (map: maplibre.Map) => {
+    longitude: number;
+    latitude: number;
+    zoom: number;
+};
+export declare const useMap: () => {
+    map: maplibre.Map | null;
+    setMap: React.Dispatch<React.SetStateAction<maplibre.Map | null>>;
+    mapLoaded: boolean;
+    setMapLoaded: React.Dispatch<React.SetStateAction<boolean>>;
+};
+export declare const MapProvider: FC<{
+    children?: ReactNode;
+}>;
+export type MapProps = {
+    accessToken?: string;
+    antialias?: boolean;
+    children?: ReactNode | ReactNode[];
+    fallback?: ReactNode;
+    id?: string;
+    longitude: number;
+    latitude: number;
+    logoPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
+    maxPitch?: number;
+    mapStyle?: string;
+    onLoad?: (e: import('maplibre-gl').MapLibreEvent) => void;
+    onDragEnd?: (e: ViewStateChangeEvent) => void;
+    onMoveEnd?: (e: ViewStateChangeEvent) => void;
+    onZoomEnd?: (e: ViewStateChangeEvent) => void;
+    ref?: RefAttributes<maplibre.Map | null>;
+    style?: CSSProperties;
+    zoom: number;
+};
+export declare const Map: React.ForwardRefExoticComponent<Omit<MapProps, "ref"> & React.RefAttributes<maplibre.Map | null>>;

package/dist/Map.js

@@ -0,0 +1,81 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { jsx as _jsx } from "react/jsx-runtime";
+import React, { useRef, useEffect, useState, useContext, useImperativeHandle, useMemo, } from 'react';
+import maplibre from 'maplibre-gl';
+import { ErrorBoundary } from './ErrorBoundary'; // eslint-disable-line import/no-webpack-loader-syntax
+const DEFAULT_STYLE = 'https://demotiles.maplibre.org/style.json';
+const DISABLE_PITCH = 0;
+const MapContext = React.createContext({
+    map: null,
+    setMap: () => {
+        throw new Error('Use <MapProvider>');
+    },
+    mapLoaded: false,
+    setMapLoaded: () => {
+        throw new Error('Use <MapProvider>');
+    },
+});
+export const viewStateFromMap = (map) => ({
+    longitude: map.getCenter().lng,
+    latitude: map.getCenter().lat,
+    zoom: map.getZoom(),
+});
+export const useMap = () => useContext(MapContext);
+export const MapProvider = ({ children }) => {
+    const [map, setMap] = useState(null);
+    const [mapLoaded, setMapLoaded] = useState(false);
+    return (_jsx(MapContext.Provider, Object.assign({ value: { map, setMap, mapLoaded, setMapLoaded } }, { children: children })));
+};
+function addEventHandler(map, type, handler) {
+    map.on(type, (ev) => handler(Object.assign({ viewState: viewStateFromMap(map) }, ev)));
+}
+export const Map = React.forwardRef((_a, ref) => {
+    var { children, style, id, longitude, latitude, maxPitch = DISABLE_PITCH, mapStyle = DEFAULT_STYLE, zoom, onDragEnd, onLoad, onMoveEnd, onZoomEnd, fallback } = _a, options = __rest(_a, ["children", "style", "id", "longitude", "latitude", "maxPitch", "mapStyle", "zoom", "onDragEnd", "onLoad", "onMoveEnd", "onZoomEnd", "fallback"]);
+    const mapContainer = useRef(null);
+    const { map, setMap, setMapLoaded } = useMap();
+    useImperativeHandle(ref, () => map, [map]);
+    useEffect(() => {
+        if (map)
+            return; // initialize map only once
+        if (mapContainer.current) {
+            const m = new maplibre.Map(Object.assign({ container: mapContainer.current, style: mapStyle, center: [longitude, latitude], zoom }, options));
+            if (onDragEnd)
+                addEventHandler(m, 'dragend', onDragEnd);
+            if (onLoad)
+                addEventHandler(m, 'load', (ev) => {
+                    onLoad(ev);
+                    setMapLoaded(true);
+                });
+            if (onMoveEnd)
+                addEventHandler(m, 'moveend', onMoveEnd);
+            if (onZoomEnd)
+                addEventHandler(m, 'zoomend', onZoomEnd);
+            setMap(m);
+        }
+    }, [
+        map,
+        onDragEnd,
+        onLoad,
+        onMoveEnd,
+        onZoomEnd,
+        setMap,
+        setMapLoaded,
+        mapStyle,
+        longitude,
+        latitude,
+        zoom,
+        options,
+    ]);
+    const memoizedStyle = useMemo(() => (Object.assign({ position: 'relative', width: '100%', height: '100%' }, style)), [style]);
+    return (_jsx(ErrorBoundary, Object.assign({ fallback: fallback }, { children: _jsx("div", Object.assign({ id: id, ref: mapContainer, style: memoizedStyle }, { children: children })) })));
+});

package/dist/Marker.d.ts

@@ -0,0 +1,12 @@
+import { FC, ReactElement, ReactNode } from 'react';
+import { PositionAnchor } from 'maplibre-gl';
+export type MarkerProps = {
+    longitude: number;
+    latitude: number;
+    popup?: ReactElement;
+    closeOnClick?: boolean;
+    anchor?: PositionAnchor;
+    color?: string;
+    children?: ReactNode;
+};
+export declare const Marker: FC<MarkerProps>;

package/dist/Marker.js

@@ -0,0 +1,43 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useEffect, useState, Children } from 'react';
+import maplibre from 'maplibre-gl';
+import { useMap } from './Map';
+import ReactDOM from 'react-dom';
+import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
+export const Marker = (_a) => {
+    var { children, longitude, latitude, popup, closeOnClick } = _a, options = __rest(_a, ["children", "longitude", "latitude", "popup", "closeOnClick"]);
+    const { map } = useMap();
+    const [result, setResult] = useState(null);
+    const optionsString = JSON.stringify(options);
+    useEffect(() => {
+        let marker = null;
+        const isEmpty = Children.count(children) === 0;
+        if (map) {
+            const element = document.createElement('div');
+            const parsedOptions = JSON.parse(optionsString);
+            if (!isEmpty)
+                setResult(ReactDOM.createPortal(children, element));
+            marker = isEmpty
+                ? new maplibre.Marker(Object.assign({}, parsedOptions))
+                : new maplibre.Marker(Object.assign(Object.assign({}, parsedOptions), { element }));
+            if (popup)
+                marker.setPopup(new maplibre.Popup({ offset: [0, -15], closeOnClick }).setHTML(ReactDOMServer.renderToStaticMarkup(popup)));
+            marker = marker.setLngLat([longitude, latitude]).addTo(map);
+        }
+        return () => {
+            if (marker)
+                marker.remove();
+        };
+    }, [closeOnClick, optionsString, setResult, children, latitude, longitude, map, popup]);
+    return result;
+};

package/dist/Popup.d.ts

@@ -0,0 +1,9 @@
+import { FC, ReactElement } from 'react';
+export type PopupProps = {
+    children: ReactElement;
+    longitude: number;
+    latitude: number;
+    className?: string;
+    closeOnClick?: boolean;
+};
+export declare const Popup: FC<PopupProps>;

package/dist/Popup.js

@@ -0,0 +1,34 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useEffect } from 'react';
+import maplibre from 'maplibre-gl';
+import { useMap } from './Map';
+import ReactDOMServer from 'react-dom/server'; // eslint-disable-line import/no-webpack-loader-syntax
+export const Popup = (_a) => {
+    var { children, longitude, latitude } = _a, options = __rest(_a, ["children", "longitude", "latitude"]);
+    const { map } = useMap();
+    const optionsString = JSON.stringify(options);
+    useEffect(() => {
+        let popup = null;
+        if (map) {
+            popup = new maplibre.Popup(Object.assign({ offset: [0, -15] }, JSON.parse(optionsString)))
+                .setLngLat([longitude, latitude])
+                .setHTML(ReactDOMServer.renderToStaticMarkup(children))
+                .addTo(map);
+        }
+        return () => {
+            if (popup)
+                popup.remove();
+        };
+    }, [children, latitude, longitude, map, optionsString]);
+    return null;
+};

package/dist/ScaleControl.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+import { ControlPosition } from './types';
+export type ScaleControlProps = {
+    position?: ControlPosition;
+};
+export declare const ScaleControl: FC<ScaleControlProps>;

package/dist/ScaleControl.js

@@ -0,0 +1,29 @@
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import { useEffect } from 'react';
+import maplibre from 'maplibre-gl';
+import { useMap } from './Map';
+export const ScaleControl = (_a) => {
+    var { position = 'top-right' } = _a, options = __rest(_a, ["position"]);
+    const { map } = useMap();
+    const optionsString = JSON.stringify(options);
+    useEffect(() => {
+        const control = new maplibre.ScaleControl();
+        if (map) {
+            map.addControl(control, position);
+        }
+        return () => {
+            map === null || map === void 0 ? void 0 : map.removeControl(control);
+        };
+    }, [position, optionsString, map]);
+    return null;
+};

package/dist/index.d.ts

@@ -0,0 +1,7 @@
+export { Map, useMap, MapProvider, viewStateFromMap } from './Map';
+export type { ViewState } from './Map';
+export { Marker } from './Marker';
+export { Popup } from './Popup';
+export { Layer } from './Layer';
+export { GeolocateControl } from './GeolocateControl';
+export { ScaleControl } from './ScaleControl';

package/dist/index.js

@@ -0,0 +1,6 @@
+export { Map, useMap, MapProvider, viewStateFromMap } from './Map';
+export { Marker } from './Marker';
+export { Popup } from './Popup';
+export { Layer } from './Layer';
+export { GeolocateControl } from './GeolocateControl';
+export { ScaleControl } from './ScaleControl';

package/dist/types.d.ts

@@ -0,0 +1 @@
+export type ControlPosition = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,55 @@
+{
+  "name": "@vinctus/react-maplibre",
+  "version": "0.1.0",
+  "description": "Minimalist MapLibre GL JS React wrapper library",
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "/dist"
+  ],
+  "exports": {
+    ".": "./dist/index.js",
+    "./dist/*": "./dist/*.js"
+  },
+  "dependencies": {
+    "react-scripts": "5.0.1"
+  },
+  "peerDependencies": {
+    "maplibre-gl": "^4.5.2",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@types/node": "^18.14.6",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "typescript": "^4.9.5"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "prepublishOnly": "tsc"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}