add inspect popup to map app [#156] (#157)

* add inspect popup to map app [#156] * formatting
protomaps · Oct 19, 2023 · 215543a · 215543a
1 parent ff6ffca
commit 215543a
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 4 deletions.
diff --git a/app/src/MapViewComponent.tsx b/app/src/MapViewComponent.tsx
@@ -6,9 +6,10 @@ import {
   FormEvent,
   useCallback,
 } from "react";
+import { renderToString } from "react-dom/server";
 import layers from "../../styles/src/index.ts";
 import maplibregl from "maplibre-gl";
-import { StyleSpecification } from "maplibre-gl";
+import { StyleSpecification, MapGeoJSONFeature } from "maplibre-gl";
 import * as pmtiles from "pmtiles";
 import "maplibre-gl/dist/maplibre-gl.css";
 import "ol/ol.css";
@@ -31,6 +32,33 @@ const GIT_SHA = (import.meta.env.VITE_GIT_SHA || "main").substr(0, 8);
 const ATTRIBUTION =
   '<a href="https://github.com/protomaps/basemaps">Protomaps</a> © <a href="https://openstreetmap.org">OpenStreetMap</a>';
 
+const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
+  return (
+    <div>
+      {props.features.map((f, i) => (
+        <div key={i}>
+          <span>
+            <strong>{(f.layer as any)["source-layer"]}</strong>
+            <span> ({f.geometry.type})</span>
+          </span>
+          <table>
+            <tr key={0}>
+              <td>id</td>
+              <td>{f.id}</td>
+            </tr>
+            {Object.entries(f.properties).map(([key, value], i) => (
+              <tr key={i + 1}>
+                <td>{key}</td>
+                <td>{value}</td>
+              </tr>
+            ))}
+          </table>
+        </div>
+      ))}
+    </div>
+  );
+};
+
 function getMaplibreStyle(
   theme: string,
   tiles?: string,
@@ -144,10 +172,24 @@ function MapLibreView(props: {
       }),
     );
 
+    const popup = new maplibregl.Popup({
+      closeButton: true,
+      closeOnClick: false,
+      maxWidth: "none",
+    });
+
     map.on("mousedown", function (e) {
-      map.queryRenderedFeatures(e.point).map((feat) => {
-        console.log(feat);
-      });
+      const features = map.queryRenderedFeatures(e.point);
+      if (features.length) {
+        let content = renderToString(
+          <FeaturesProperties features={features} />,
+        );
+        popup.setHTML(content);
+        popup.setLngLat(e.lngLat);
+        popup.addTo(map);
+      } else {
+        popup.remove();
+      }
     });
 
     mapRef.current = map;

diff --git a/app/src/index.css b/app/src/index.css
@@ -77,3 +77,8 @@ a {
 .builds a {
   color: white;
 }
+
+.maplibregl-popup,
+.maplibregl-popup-close-button {
+  color: black;
+}