@indiscale/linkahead-webui-ext-map 0.5.0

package/src/components/Coordinates.js

@@ -0,0 +1,24 @@
+import L from "leaflet";
+import { useMap } from "react-leaflet";
+import "leaflet.coordinates/dist/Leaflet.Coordinates-0.1.5.min.js";
+import { logger } from "../logging";
+
+export function Coordinates() {
+  const map = useMap();
+
+  const coordinates = L.control.coordinates({
+    // TODO move to config
+    position: "bottomleft",
+    decimals: 2,
+    enableUserInput: false,
+    useDMS: true,
+  });
+
+  if (!map._coordinates) {
+    logger.trace("Coordinates", map);
+    map._coordinates = coordinates;
+    coordinates.addTo(map);
+  }
+
+  return null;
+}

package/src/components/ErrorComponent.tsx

@@ -0,0 +1,2 @@
+export const ErrorComponent = ({ error }: any) =>
+  error && <div className="map-error">{String(error)}</div>;

package/src/components/Graticule.js

@@ -0,0 +1,27 @@
+import PropTypes from "prop-types";
+import L from "leaflet";
+import "../contrib/latlnggraticule/leaflet.latlng-graticule.js";
+import "../contrib/simplegraticule/L.Graticule.js";
+import { useMap } from "react-leaflet";
+import { logger } from "../logging";
+
+export function Graticule({ config }) {
+  const map = useMap();
+
+  if (config.type === "latlngGraticule") {
+    L.latlngGraticule(config.options).addTo(map);
+  } else if (typeof config.type === "undefined" || config.type === "simple") {
+    L.graticule(config.options).addTo(map);
+  } else {
+    logger.warn("unknown graticule type: ", config.type);
+  }
+
+  return null;
+}
+
+Graticule.propTypes = {
+  config: PropTypes.shape({
+    options: PropTypes.object,
+    type: PropTypes.oneOf(["simple", "latlngGraticule"]),
+  }),
+};

package/src/components/Loader.module.css

@@ -0,0 +1,17 @@
+.loader {
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.spinnerM {
+  --bs-spinner-width: 3rem;
+  --bs-spinner-height: 3rem;
+}
+.loaderFullScreen {
+  position: fixed;
+}
+.loaderInMap {
+  position: absolute;
+  z-index: 10000;
+}

package/src/components/Loader.tsx

@@ -0,0 +1,36 @@
+
+import styles from "./Loader.module.css";
+import { LoadingInfo } from "@indiscale/linkahead-webui-core-components";
+
+type TLoaderProps = {
+  className?: string;
+  size?: "sm";
+  color?: "primary" | "secondary";
+  title?: string;
+  inMap?: boolean;
+  dataTestId?: string;
+};
+
+export const Loader = ({
+  className = styles.spinnerM,
+  size,
+  color = "primary",
+  title,
+  inMap = false,
+  dataTestId = "loader",
+}: TLoaderProps) => {
+  const props = { className, size, color, title };
+
+  return (
+    <div
+      data-testid={dataTestId}
+      className={
+        inMap
+          ? `${styles.loader} ${styles.loaderInMap}`
+          : `${styles.loader} ${styles.loaderFullScreen}`
+      }
+    >
+      <LoadingInfo {...props} />
+    </div>
+  );
+};

package/src/components/PathDropDown.js

@@ -0,0 +1,108 @@
+import PropTypes from "prop-types";
+import { logger } from "../logging";
+import L from "leaflet";
+import { useMap } from "react-leaflet";
+import { useConfig } from "../context/ConfigProvider";
+
+/**
+ * Return a new leaflet control for setting paths to use for geo location
+ *
+ * @param {function} callback - a callback applies the effect of a
+ *                              changed path
+ * @param {string[]} paths - ids of the paths defined for this map.
+ *
+ * @returns {L.Control} the drop down menu button.
+ */
+const get_path_ddm = function (callback, paths) {
+  logger.trace("get_path_ddm", callback, paths);
+
+  var path_ddm = L.Control.extend({
+    options: {
+      position: "bottomright",
+    },
+
+    onAdd: function () {
+      return this.button;
+    },
+
+    setValue: function (value) {
+      this.button.value = value;
+    },
+
+    button: (function () {
+      var select = L.DomUtil.create(
+        "select",
+        "leaflet-bar leaflet-control leaflet-control-custom caosdb-f-map-path-drop-down"
+      );
+      select.title = `Show the location of related entities.
+By default ('Same Entity') entities are shown that have
+a geographic location. The other options allow to show
+entities on the map using the location of a related
+entity.`;
+
+      let tmp_html = '<option value="same">Same Entity</option>';
+      for (let pa in paths) {
+        tmp_html += `<option value="${pa}">${pa}</option>`;
+      }
+      select.innerHTML = tmp_html;
+
+      L.DomEvent.on(select, "change", (e) => {
+        callback(e);
+      });
+      return select;
+    })(),
+  });
+  return new path_ddm();
+};
+
+const path_drop_down_handler = {
+  _control: undefined,
+  _callback: console.log,
+  _paths: [],
+  _current_path: undefined,
+
+  addHooks: function () {
+    this._control = get_path_ddm(this._callback, this._paths);
+    this._map.addControl(this._control);
+  },
+
+  removeHooks: function () {
+    this._map.removeControl(this._control);
+  },
+
+  setCurrentPath: function (path) {
+    logger.trace("setCurrentPath", this, path);
+    this._control.setValue(path);
+  },
+};
+
+export function PathDropDown({ setCurrentPath, currentPath }) {
+  const {
+    config: {
+      select: { paths },
+    },
+  } = useConfig();
+
+  logger.trace("PathDropDown", setCurrentPath, currentPath, paths);
+  const map = useMap();
+
+  if (!map.path_drop_down) {
+    path_drop_down_handler._callback = (e) => {
+      setCurrentPath(e.target.value);
+    };
+    path_drop_down_handler._paths = paths;
+    const handler = L.Handler.extend(path_drop_down_handler);
+
+    map.addHandler("path_drop_down", handler);
+    map.path_drop_down.enable();
+  }
+
+  map.path_drop_down.setCurrentPath(currentPath);
+
+  return null;
+}
+
+PathDropDown.propTypes = {
+  setCurrentPath: PropTypes.func,
+  currentPath: PropTypes.string,
+};