@mapcomponents/react-maplibre 0.1.34 → 0.1.37

package/src/components/MlCreatePdfButton/MlCreatePdfButton.js

@@ -1,52 +0,0 @@
-import React, { useRef, useEffect, useContext } from "react";
-import PropTypes from "prop-types";
-import { MapContext } from "@mapcomponents/react-core";
-
-import createPdf from "./lib/createPdf.js";
-
-import PrinterIcon from "@mui/icons-material/Print";
-import Button from "@mui/material/Button";
-
-/**
- * Renders a button that will create a PDF version of the current map view (dimensions adjusted to fit Din A4 Paper).
- *
- * @component
- */
-const MlCreatePdfButton = (props) => {
-  const mapContext = useContext(MapContext);
-  const initializedRef = useRef(false);
-  const mapRef = useRef(undefined);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-  }, [mapContext.mapIds, mapContext, props.mapId]);
-
-  return (
-    <>
-      <Button
-        color="primary"
-        variant="contained"
-        onClick={() => {
-          createPdf(mapRef.current, null, () => {});
-        }}
-      >
-        <PrinterIcon />
-      </Button>
-    </>
-  );
-};
-
-MlCreatePdfButton.defaultProps = {
-  mapId: undefined,
-};
-
-MlCreatePdfButton.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-};
-
-export default MlCreatePdfButton;

package/src/components/MlFeatureEditor/MlFeatureEditor.js

@@ -1,119 +0,0 @@
-import React, { useState, useEffect, useContext, useRef } from "react";
-import "./MlFeatureEditor.css";
-
-import "@mapbox/mapbox-gl-draw/dist/mapbox-gl-draw.css";
-import MapboxDraw from "@mapbox/mapbox-gl-draw";
-import CustomPolygonMode from "./custom-polygon-mode";
-import CustomSelectMode from "./custom-select-mode";
-import CustomDirectSelectMode from "./custom-direct-select-mode";
-import { v4 as uuidv4 } from "uuid";
-
-import { MapContext } from "@mapcomponents/react-core";
-
-function MlFeatureEditor(props) {
-  const mapRef = useRef(null);
-  const draw = useRef(null);
-  const mapContext = useContext(MapContext);
-  const componentId = useRef(
-    (props.idPrefix ? props.idPrefix : "MlFeatureEditor-") + uuidv4()
-  );
-  const onChangeRef = useRef(props.onChange);
-
-  const [drawToolsInitialized, setDrawToolsInitialized] = useState(false);
-  const [drawToolsReady, setDrawToolsReady] = useState(false);
-
-  const [mouseUpTrigger, setMouseUpTrigger] = useState(false);
-
-  const modeChangeHandler = (e) => {
-    console.log("MlFeatureEditor mode change to " + e.mode);
-    //setDrawMode(e.mode);
-  };
-
-  const mouseUpHandler = () => {
-    setMouseUpTrigger(Math.random());
-  };
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        //mapRef.current.removeControl(draw.current, "top-left");
-        mapRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (
-      mapContext.mapExists(props.mapId) &&
-      mapContext.getMap(props.mapId).style &&
-      !drawToolsInitialized
-    ) {
-      mapRef.current = mapContext.getMap(props.mapId);
-      setDrawToolsInitialized(true);
-      if (
-        mapRef.current &&
-        mapRef.current.style &&
-        mapRef.current.getSource("mapbox-gl-draw-cold") &&
-        draw.current &&
-        typeof draw.current.remove !== "undefined"
-      ) {
-        // remove old Mapbox-gl-Draw from Mapbox instance when hot-reloading this component during development
-        draw.current.remove();
-      }
-
-      draw.current = new MapboxDraw({
-        displayControlsDefault: false,
-        defaultMode: props.mode || "custom_select",
-        modes: Object.assign(
-          {
-            custom_polygon: CustomPolygonMode,
-            custom_select: CustomSelectMode,
-            custom_direct_select: CustomDirectSelectMode,
-          },
-          MapboxDraw.modes
-        ),
-      });
-
-      mapRef.current.on("draw.modechange", modeChangeHandler, componentId.current);
-
-      mapRef.current.addControl(draw.current, "top-left", componentId.current);
-
-      mapRef.current.on("mouseup", mouseUpHandler, componentId.current);
-
-      setDrawToolsReady(true);
-    }
-  }, [mapContext.map, mapContext, props, drawToolsInitialized]);
-
-  useEffect(() => {
-    if (
-      draw.current &&
-      props.geojson &&
-      props.geojson.geometry &&
-      props.geojson.geometry.coordinates
-    ) {
-      draw.current.set({ type: "FeatureCollection", features: [props.geojson] });
-    }
-  }, [props.geojson, drawToolsReady]);
-
-  useEffect(() => {
-    if (draw.current && mouseUpTrigger) {
-      // update drawnFeatures state object
-      let currentFeatureCollection = draw.current.getAll();
-      if (typeof onChangeRef.current === "function") {
-        onChangeRef.current(currentFeatureCollection.features);
-      }
-    }
-  }, [mouseUpTrigger]);
-
-  useEffect(() => {
-    if (props.mode && draw.current) {
-      draw.current.changeMode(props.mode);
-    }
-  }, [props.mode]);
-
-  return <></>;
-}
-
-export default MlFeatureEditor;

package/src/components/MlFillExtrusionLayer/MlFillExtrusionLayer.js

@@ -1,153 +0,0 @@
-import React, { useContext, useRef, useEffect, useState } from "react";
-import PropTypes from "prop-types";
-import { MapContext } from "@mapcomponents/react-core";
-
-import { v4 as uuidv4 } from "uuid";
-import Button from "@mui/material/Button";
-
-/**
- * Adds a fill extrusion layer to the MapLibre instance reference by props.mapId
- *
- * @Component
- */
-const MlFillExtrusionLayer = (props) => {
-  const mapContext = useContext(MapContext);
-  const mapRef = useRef(null);
-
-  const [showLayer, setShowLayer] = useState(true);
-  const componentId = useRef(
-    (props.idPrefix ? props.idPrefix : "MlFillExtrusionLayer-") + uuidv4()
-  );
-  const initializedRef = useRef(false);
-  const layerId = useRef(props.layerId || "MlFillExtrusionLayer-" + uuidv4());
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = undefined;
-      }
-      initializedRef.current = false;
-    };
-  }, []);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || initializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.getMap(props.mapId)) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    initializedRef.current = true;
-    mapRef.current = mapContext.getMap(props.mapId);
-
-    let lastLabelLayerId = undefined;
-    if (mapContext.map.getLayer("waterway-name")) {
-      lastLabelLayerId = "waterway-name";
-    }
-
-    if (mapContext.map.getLayer("poi_label")) {
-      lastLabelLayerId = "poi_label";
-    }
-
-    mapContext.map.addLayer(
-      {
-        id: layerId.current,
-        type: "fill-extrusion",
-        source: props.sourceId || "openmaptiles",
-        "source-layer": props.sourceLayer || "building",
-        minzoom: props.minZoom || 14,
-        paint: {
-          ...props.paint,
-        },
-      },
-      props.insertBeforeLayer || lastLabelLayerId,
-      componentId.current
-    );
-  }, [
-    mapContext,
-    props.insertBeforeLayer,
-    props.mapId,
-    props.minZoom,
-    props.paint,
-    props.sourceId,
-    props.sourceLayer,
-  ]);
-
-  useEffect(() => {
-    if (!initializedRef.current) return;
-
-    // toggle layer visibility by changing the layout object's visibility property
-    mapRef.current.setLayoutProperty(layerId.current, "visibility", showLayer ? "visible" : "none");
-  }, [showLayer, mapContext]);
-
-  return (
-    <Button
-      color="primary"
-      variant={showLayer ? "contained" : "outlined"}
-      onClick={() => setShowLayer(!showLayer)}
-    >
-      Composite
-    </Button>
-  );
-};
-
-MlFillExtrusionLayer.defaultProps = {
-  mapId: undefined,
-  paint: {
-    "fill-extrusion-color": "hsl(196, 61%, 83%)",
-    "fill-extrusion-height": {
-      property: "render_height",
-      type: "identity",
-    },
-    "fill-extrusion-base": {
-      property: "render_min_height",
-      type: "identity",
-    },
-    "fill-extrusion-opacity": 1,
-  },
-};
-
-MlFillExtrusionLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Id of the layer that will be added by this component
-   */
-  layerId: PropTypes.string,
-  /**
-   * Prefix of the component id this component uses when adding elements to the MapLibreGl-instance
-   */
-  idPrefix: PropTypes.string,
-  /**
-   * Paint properties of the config object that is passed to the MapLibreGl.addLayer call. All
-   * available properties are documented in the MapLibreGl documentation
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill-extrusion
-   */
-  paint: PropTypes.object,
-  /**
-   * Source id of a vector tile source containing the geometries to use for this fill-extrusion
-   * layer.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
-   */
-  sourceId: PropTypes.string,
-  /**
-   * Layer id from a vector tile source containing the geometries to use for this fill-extrusion
-   * layer.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#source-layer
-   */
-  sourceLayer: PropTypes.string,
-  /**
-   * This layer will be hidde for zoom levels lower than defined on this property
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#minzoom
-   */
-  minZoom: PropTypes.number,
-  /**
-   * The layerId of an existing layer this layer should be rendered visually beneath
-   * https://maplibre.org/maplibre-gl-js-docs/api/map/#map#addlayer - see "beforeId" property
-   */
-  insertBeforeLayer: PropTypes.string,
-};
-
-export default MlFillExtrusionLayer;

package/src/components/MlGPXViewer/util/GeoJsonContext.js

@@ -1,6 +0,0 @@
-import React from "react";
-
-const GeoJsonContext = React.createContext({});
-
-export const GeoJsonContextProvider = GeoJsonContext.Provider;
-export default GeoJsonContext;

package/src/components/MlGeoJsonLayer/MlGeoJsonLayer.js

@@ -1,173 +0,0 @@
-import React, { useRef, useEffect, useCallback } from "react";
-import PropTypes from "prop-types";
-
-import useMap from "../../hooks/useMap";
-
-import getDefaultPaintPropsByType from "./util/getDefaultPaintPropsByType";
-import getDefaulLayerTypeByGeometry from "./util/getDefaultLayerTypeByGeometry";
-
-const legalLayerTypes = ["circle", "fill", "line"];
-
-/**
- * Adds source and layer of types "line", "fill" or "circle" to display GeoJSON data on the map.
- *
- * @component
- */
-const MlGeoJsonLayer = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-  const initializedRef = useRef(false);
-  const layerId = useRef(props.layerId || "MlGeoJsonLayer-" + mapHook.componentId);
-  const layerTypeRef = useRef(undefined);
-
-  useEffect(() => {
-    if (!mapHook.map || !initializedRef.current) return;
-
-    for (var key in props.layout) {
-      mapHook.map.setLayoutProperty(layerId.current, key, props.layout[key]);
-    }
-  }, [props.layout, mapHook.map, props.mapId]);
-
-  useEffect(() => {
-    if (!mapHook.map || !initializedRef.current) return;
-
-    let _paint =
-      props.paint || getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides);
-
-    for (var key in _paint) {
-      mapHook.map.setPaintProperty(layerId.current, key, _paint[key]);
-    }
-  }, [props.paint, mapHook.map, props.mapId, props.defaultPaintOverrides]);
-
-  useEffect(() => {
-    if (!mapHook?.map?.getSource(layerId.current) || !initializedRef.current) return;
-
-    mapHook.map.getSource(layerId.current).setData(props.geojson);
-  }, [props.geojson, mapHook.map, props.type]);
-
-  const createLayer = useCallback(() => {
-    let geojson = props.geojson;
-
-    layerTypeRef.current = props.type || getDefaulLayerTypeByGeometry(props.geojson);
-
-    mapHook.map.addLayer(
-      {
-        id: layerId.current,
-        source: {
-          type: "geojson",
-          data: geojson,
-        },
-        type: layerTypeRef.current,
-        paint:
-          props.paint ||
-          getDefaultPaintPropsByType(layerTypeRef.current, props.defaultPaintOverrides),
-        layout: props.layout || {},
-        ...props.options,
-      },
-      props.insertBeforeLayer,
-      mapHook.componentId
-    );
-
-    if (typeof props.onHover !== "undefined") {
-      mapHook.map.on("mousemove", layerId.current, props.onHover, mapHook.componentId);
-    }
-
-    if (typeof props.onClick !== "undefined") {
-      mapHook.map.on("click", layerId.current, props.onClick, mapHook.componentId);
-    }
-
-    if (typeof props.onLeave !== "undefined") {
-      mapHook.map.on("mouseleave", layerId.current, props.onLeave, mapHook.componentId);
-    }
-  }, [mapHook, props]);
-
-  useEffect(() => {
-    if (!mapHook.map || !props.geojson) return;
-
-    if (
-      initializedRef.current &&
-      legalLayerTypes.indexOf(props.type) !== -1 &&
-      layerTypeRef.current &&
-      props.type !== layerTypeRef.current
-    ) {
-      // remove (cleanup) & reinitialize the layer if type has changed
-      mapHook.map.cleanup(mapHook.componentId);
-    } else if (
-      initializedRef.current &&
-      (legalLayerTypes.indexOf(props.type) === -1 ||
-        (legalLayerTypes.indexOf(props.type) !== -1 && props.type === layerTypeRef.current))
-    ) {
-      return;
-    }
-
-    initializedRef.current = true;
-
-    createLayer();
-  }, [mapHook, createLayer, props]);
-
-  return <></>;
-};
-
-MlGeoJsonLayer.propTypes = {
-  /**
-   * Id of the target MapLibre instance in mapContext
-   */
-  mapId: PropTypes.string,
-  /**
-   * Type of the layer that will be added to the MapLibre instance.
-   * Possible values: "line", "circle", "fill"
-   */
-  type: PropTypes.string,
-  /**
-   * Layout property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  layout: PropTypes.object,
-  /**
-   * Paint property object, that is passed to the addLayer call.
-   * Possible props depend on the layer type.
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#line
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#circle
-   * https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#fill
-   */
-  paint: PropTypes.object,
-  /**
-   * Javascript object with optional properties "fill", "line", "circle" to override implicit layer type default paint properties.
-   */
-  defaultPaintOverrides: PropTypes.object,
-  /**
-   * Javascript object that is spread into the addLayer commands first parameter.
-   */
-  options: PropTypes.object,
-  /**
-   * GeoJSON data that is supposed to be rendered by this component.
-   */
-  geojson: PropTypes.object,
-  /**
-   * Id of an existing layer in the mapLibre instance to help specify the layer order
-   * This layer will be visually beneath the layer with the "insertBeforeLayer" id.
-   */
-  insertBeforeLayer: PropTypes.string,
-  /**
-   * Id of the new layer and source that are added to the MapLibre instance
-   */
-  layerId: PropTypes.string,
-  /**
-   * Click event handler that is executed whenever a geometry rendered by this component is clicked.
-   */
-  onClick: PropTypes.func,
-  /**
-   * Hover event handler that is executed whenever a geometry rendered by this component is hovered.
-   */
-  onHover: PropTypes.func,
-  /**
-   * Leave event handler that is executed whenever a geometry rendered by this component is
-   * left/unhovered.
-   */
-  onLeave: PropTypes.func,
-};
-
-export default MlGeoJsonLayer;

package/src/components/MlImageMarkerLayer/MlImageMarkerLayer.js

@@ -1,75 +0,0 @@
-import React, { useRef, useCallback, useEffect } from "react";
-
-import useMap from "../../hooks/useMap";
-
-const MlImageMarkerLayer = (props) => {
-  const mapHook = useMap({ mapId: props.mapId, waitForLayer: props.insertBeforeLayer });
-
-  const layerInitializedRef = useRef(false);
-  const imageIdRef = useRef(props.imageId || "img_" + new Date().getTime());
-  const layerId = useRef(props.layerId || "MlImageMarkerLayer-" + mapHook.componentId);
-
-  useEffect(() => {
-    if (
-      !mapHook.mapIsReady ||
-      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
-      !props.options
-    )
-      return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    var key;
-
-    if (props.options.layout) {
-      for (key in props.options.layout) {
-        mapHook.map.setLayoutProperty(layerId.current, key, props.options.layout[key]);
-      }
-    }
-    if (props.options.paint) {
-      for (key in props.options.paint) {
-        mapHook.map.setPaintProperty(layerId.current, key, props.options.paint[key]);
-      }
-    }
-  }, [props.options, layerId.current, props.mapId]);
-
-  const addLayer = useCallback(() => {
-    let tmpOptions = {
-      id: layerId.current,
-      layout: {},
-      ...props.options,
-    };
-    tmpOptions.layout["icon-image"] = imageIdRef.current;
-    mapHook.map.addLayer(tmpOptions, props.insertBeforeLayer, mapHook.componentId);
-  }, [props, mapHook.mapIsReady, mapHook.map]);
-
-  useEffect(() => {
-    if (!props.options || !mapHook.mapIsReady || layerInitializedRef.current) return;
-
-    layerInitializedRef.current = true;
-
-    if (props.imgSrc) {
-      mapHook.map.loadImage(props.imgSrc, function (error, image) {
-        if (error) throw error;
-        mapHook.map.addImage(imageIdRef.current, image, mapHook.componentId);
-      });
-    }
-
-    addLayer();
-  }, [mapHook.mapIsReady, mapHook.map, addLayer, props]);
-
-  useEffect(() => {
-    if (
-      !mapHook.mapIsReady ||
-      (mapHook.map && !mapHook.map.getLayer(layerId.current)) ||
-      !props.options
-    ) {
-      return;
-    }
-
-    mapHook.map.getSource(layerId.current).setData(props.options.source.data);
-  }, [props.options.source.data, props]);
-
-  return <></>;
-};
-
-export default MlImageMarkerLayer;

package/src/components/MlLayer/MlLayer.js

@@ -1,107 +0,0 @@
-import React, { useRef, useEffect, useContext } from "react";
-
-import { v4 as uuidv4 } from "uuid";
-import { MapContext } from "@mapcomponents/react-core";
-import useMapState from "../../hooks/useMapState";
-
-const MlLayer = (props) => {
-  // Use a useRef hook to reference the layer object to be able to access it later inside useEffect hooks
-  const mapContext = useContext(MapContext);
-
-  const mapState = useMapState({
-    mapId: props.mapId,
-    watch: {
-      viewport: false,
-      layers: true,
-      sources: false,
-    },
-  });
-  const layerInitializedRef = useRef(false);
-  const mapRef = useRef(null);
-  const componentId = useRef((props.layerId ? props.layerId : "MlLayer-") + uuidv4());
-  const layerId = useRef(props.layerId || componentId.current);
-  const layerPaintConfRef = useRef(undefined);
-  const layerLayoutConfRef = useRef(undefined);
-
-  useEffect(() => {
-    let _componentId = componentId.current;
-
-    return () => {
-      if (mapRef.current) {
-        mapRef.current.cleanup(_componentId);
-        mapRef.current = null;
-      }
-    };
-  }, []);
-
-  useEffect(() => {
-    if (
-      !mapContext.mapExists(props.mapId) ||
-      !mapContext.getMap(props.mapId)?.getLayer?.(layerId) ||
-      !layerInitializedRef.current ||
-      !props.options
-    )
-      return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-    var key;
-
-    let layoutString = JSON.stringify(props.options.layout);
-    if (props.options.layout && layoutString !== layerLayoutConfRef.current) {
-      for (key in props.options.layout) {
-        mapRef.current.setLayoutProperty(layerId, key, props.options.layout[key]);
-      }
-      layerLayoutConfRef.current = layoutString;
-    }
-
-    let paintString = JSON.stringify(props.options.paint);
-    if (props.options.paint && paintString === layerPaintConfRef.current) {
-      for (key in props.options.paint) {
-        mapRef.current.setPaintProperty(layerId, key, props.options.paint[key]);
-      }
-    }
-  }, [props.options, layerId, mapContext, props]);
-
-  useEffect(() => {
-    if (!mapContext.mapExists(props.mapId) || layerInitializedRef.current) return;
-    // the MapLibre-gl instance (mapContext.map) is accessible here
-    // initialize the layer and add it to the MapLibre-gl instance or do something else with it
-
-    //check if insertBeforeLayer exists
-    if (props.insertBeforeLayer) {
-      let layerFound = false;
-
-      mapState?.layers?.forEach((layer) => {
-        if (layer.id === props.insertBeforeLayer) {
-          layerFound = true;
-        }
-      });
-      if (!layerFound) {
-        return;
-      }
-    }
-
-    mapRef.current = mapContext.getMap(props.mapId);
-    if (mapRef.current) {
-      layerInitializedRef.current = true;
-      mapRef.current.addLayer(
-        {
-          id: layerId.current,
-          type: "background",
-          paint: {
-            "background-color": "rgba(0,0,0,0)",
-          },
-          ...props.options,
-        },
-        props.insertBeforeLayer,
-        componentId.current
-      );
-      layerPaintConfRef.current = JSON.stringify(props.options?.paint);
-      layerLayoutConfRef.current = JSON.stringify(props.options?.layout);
-    }
-  }, [mapContext.mapIds, mapContext, props, mapState.layers]);
-
-  return <></>;
-};
-
-export default MlLayer;