@reventlessdev/reventless-map 0.1.0-alpha.1

package/src/MapView.res.mjs

@@ -0,0 +1,221 @@
+// Generated by ReScript, PLEASE EDIT WITH CARE
+
+import * as React from "react";
+import * as Js_dict from "@rescript/runtime/lib/es6/Js_dict.js";
+import * as Js_json from "@rescript/runtime/lib/es6/Js_json.js";
+import * as MaplibreGl from "maplibre-gl";
+import * as Stdlib_Array from "@rescript/runtime/lib/es6/Stdlib_Array.js";
+import * as Stdlib_Option from "@rescript/runtime/lib/es6/Stdlib_Option.js";
+import * as Primitive_option from "@rescript/runtime/lib/es6/Primitive_option.js";
+import * as JsxRuntime from "react/jsx-runtime";
+import * as MapData$ReventlessMap from "./MapData.res.mjs";
+import * as AutoModes$ReventlessUi from "@reventlessdev/reventless-ui/src/auto/AutoModes.res.mjs";
+
+function sourceId(idx) {
+  return "autoui-src-" + idx.toString();
+}
+
+function clusterLayerId(idx) {
+  return "autoui-clusters-" + idx.toString();
+}
+
+function pointLayerId(idx) {
+  return "autoui-points-" + idx.toString();
+}
+
+function json(prim) {
+  return JSON.parse(prim);
+}
+
+function clusterSourceSpec(data) {
+  return Js_dict.fromArray([
+    [
+      "type",
+      "geojson"
+    ],
+    [
+      "data",
+      data
+    ],
+    [
+      "cluster",
+      true
+    ],
+    [
+      "clusterRadius",
+      40.0
+    ],
+    [
+      "clusterMaxZoom",
+      14.0
+    ]
+  ]);
+}
+
+function clusterLayerSpec(idx, color) {
+  return JSON.parse(`{
+    "id": "` + clusterLayerId(idx) + `",
+    "type": "circle",
+    "source": "` + sourceId(idx) + `",
+    "filter": ["has", "point_count"],
+    "paint": {
+      "circle-color": "` + color + `",
+      "circle-opacity": 0.6,
+      "circle-radius": ["step", ["get", "point_count"], 12, 10, 16, 50, 22]
+    }
+  }`);
+}
+
+function pointLayerSpec(idx, color) {
+  return JSON.parse(`{
+    "id": "` + pointLayerId(idx) + `",
+    "type": "circle",
+    "source": "` + sourceId(idx) + `",
+    "filter": ["!", ["has", "point_count"]],
+    "paint": {
+      "circle-color": "` + color + `",
+      "circle-radius": 6,
+      "circle-stroke-width": 1.5,
+      "circle-stroke-color": "#ffffff"
+    }
+  }`);
+}
+
+function featureRowKey(e) {
+  return Stdlib_Option.flatMap(Stdlib_Option.flatMap(Primitive_option.fromNullable(e.features), fs => fs[0]), f => Stdlib_Option.flatMap(Stdlib_Option.flatMap(Js_json.decodeObject(f.properties), o => Js_dict.get(o, "rowKey")), Js_json.decodeString));
+}
+
+function MapView(props) {
+  let mapStyle = props.mapStyle;
+  let sources = props.sources;
+  let containerRef = React.useRef(null);
+  let mapRef = React.useRef(undefined);
+  let match = React.useState(() => false);
+  let setLoaded = match[1];
+  let loaded = match[0];
+  let sourcesRef = React.useRef(sources);
+  sourcesRef.current = sources;
+  let didFit = React.useRef(false);
+  let installedSources = React.useRef([]);
+  React.useEffect(() => {
+    let el = containerRef.current;
+    if (el == null) {
+      return;
+    }
+    let map = new MaplibreGl.Map({
+      container: el,
+      style: mapStyle,
+      center: [
+        0.0,
+        20.0
+      ],
+      zoom: 1.5
+    });
+    map.addControl(new MaplibreGl.NavigationControl());
+    map.on("load", () => setLoaded(param => true));
+    mapRef.current = Primitive_option.some(map);
+    return () => {
+      mapRef.current = undefined;
+      map.remove();
+    };
+  }, []);
+  React.useEffect(() => {
+    let match = mapRef.current;
+    if (match !== undefined && loaded) {
+      let map = Primitive_option.valFromOption(match);
+      sources.forEach((source, idx) => {
+        let points = MapData$ReventlessMap.pointsOf(source);
+        let data = MapData$ReventlessMap.featureCollection(points);
+        let id = sourceId(idx);
+        let geo = map.getSource(id);
+        if (geo == null) {
+          if (installedSources.current.includes(id)) {
+            return;
+          }
+          installedSources.current.push(id);
+          map.addSource(id, clusterSourceSpec(data));
+          let color = MapData$ReventlessMap.layerColor(source, idx);
+          map.addLayer(clusterLayerSpec(idx, color));
+          map.addLayer(pointLayerSpec(idx, color));
+          map.on("click", pointLayerId(idx), e => Stdlib_Option.forEach(featureRowKey(e), k => Stdlib_Option.forEach(sourcesRef.current[idx], source => Stdlib_Option.forEach(AutoModes$ReventlessUi.prepareRows(source).find(r => r.key === k), r => source.onOpenRow(r.key, r.json)))));
+          map.on("click", clusterLayerId(idx), e => {
+            map.flyTo({
+              center: [
+                e.lngLat.lng,
+                e.lngLat.lat
+              ],
+              zoom: map.getZoom() + 2.0
+            });
+          });
+          return;
+        }
+        geo.setData(data);
+      });
+      if (!didFit.current) {
+        let allPoints = sources.flatMap(MapData$ReventlessMap.pointsOf);
+        let b = MapData$ReventlessMap.bounds(allPoints);
+        if (b !== undefined) {
+          didFit.current = true;
+          map.fitBounds(b, {
+            padding: 48,
+            maxZoom: 12.0,
+            duration: 0
+          });
+        }
+      }
+    }
+  }, [
+    sources,
+    loaded
+  ]);
+  let total = Stdlib_Array.reduce(sources, 0, (n, s) => n + s.rows.length | 0);
+  return JsxRuntime.jsxs("div", {
+    children: [
+      JsxRuntime.jsx("div", {
+        ref: Primitive_option.some(containerRef),
+        style: {
+          bottom: "0",
+          left: "0",
+          overflow: "hidden",
+          position: "absolute",
+          right: "0",
+          top: "0",
+          borderRadius: "8px"
+        }
+      }),
+      JsxRuntime.jsx("span", {
+        children: `Showing the ` + total.toString() + ` loaded item(s)`,
+        style: {
+          background: "rgba(255,255,255,0.8)",
+          bottom: "4px",
+          fontSize: "11px",
+          left: "8px",
+          padding: "1px 6px",
+          position: "absolute",
+          opacity: "0.7",
+          borderRadius: "4px"
+        }
+      })
+    ],
+    style: {
+      height: "520px",
+      position: "relative",
+      width: "100%"
+    }
+  });
+}
+
+let make = MapView;
+
+export {
+  sourceId,
+  clusterLayerId,
+  pointLayerId,
+  json,
+  clusterSourceSpec,
+  clusterLayerSpec,
+  pointLayerSpec,
+  featureRowKey,
+  make,
+}
+/* react Not a pure module */