hover inspect for map view [#49]

app/src/MaplibreMap.tsx

@@ -1,8 +1,10 @@
 import { useState, useEffect, useRef } from "react";
+import { renderToString } from "react-dom/server";
 import { PMTiles, TileType } from "../../js/index";
 import { Protocol } from "../../js/adapters";
 import { styled } from "./stitches.config";
 import maplibregl from "maplibre-gl";
+import { MapGeoJSONFeature } from "maplibre-gl";
 import "maplibre-gl/dist/maplibre-gl.css";
 import { schemeSet3 } from "d3-scale-chromatic";
 
@@ -10,6 +12,38 @@ const MapContainer = styled("div", {
   height: "calc(100vh - $4 - $4)",
 });
 
+const PopupContainer = styled("div", {
+  color: "black",
+});
+
+const FeatureRow = styled("div", {
+  marginBottom: "0.5em",
+});
+
+const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
+  const fs = props.features.map((f, i) => {
+    let tmp: [string, string][] = [];
+    for (var key in f.properties) {
+      tmp.push([key, f.properties[key]]);
+    }
+
+    const rows = tmp.map((d, i) => (
+      <tr key={i}>
+        <td>{d[0]}</td>
+        <td>{d[1]}</td>
+      </tr>
+    ));
+
+    return (
+      <FeatureRow key={i}>
+        <div>{(f.layer as any)["source-layer"]}</div>
+        <table>{rows}</table>
+      </FeatureRow>
+    );
+  });
+  return <PopupContainer>{fs}</PopupContainer>;
+};
+
 const rasterStyle = (file: PMTiles) => {
   return {
     version: 8,
@@ -157,6 +191,26 @@ function MaplibreMap(props: { file: PMTiles }) {
     map.addControl(new maplibregl.NavigationControl({}));
     map.on("load", map.resize);
 
+    const popup = new maplibregl.Popup({
+      closeButton: false,
+      closeOnClick: false,
+    });
+
+    map.on("mousemove", (e) => {
+      var bbox = e.point;
+      var features = map.queryRenderedFeatures(bbox);
+      map.getCanvas().style.cursor = features.length ? "pointer" : "";
+
+      let content = renderToString(<FeaturesProperties features={features} />);
+      if (!features.length) {
+        popup.remove();
+      } else {
+        popup.setHTML(content);
+        popup.setLngLat(e.lngLat);
+        popup.addTo(map);
+      }
+    });
+
     return () => {
       map.remove();
     };