inspector: toggle maplibre options in menu [#49]

protomaps · Jan 4, 2023 · 2ac1ad1 · 2ac1ad1
1 parent 87c3950
commit 2ac1ad1
Showing 1 changed file with 94 additions and 7 deletions.
diff --git a/app/src/MaplibreMap.tsx b/app/src/MaplibreMap.tsx
@@ -18,6 +18,29 @@ const PopupContainer = styled("div", {
 
 const FeatureRow = styled("div", {
  marginBottom: "0.5em",
+ "&:not(:last-of-type)": {
+ borderBottom: "1px solid black",
+ },
+});
+
+const Hamburger = styled("div", {
+ position: "absolute",
+ top: "10px",
+ right: "10px",
+ width: 40,
+ height: 40,
+ backgroundColor: "#444",
+ cursor: "pointer",
+ zIndex: 9999,
+});
+
+const Options = styled("div", {
+ position: "absolute",
+ backgroundColor: "#444",
+ top: "50px",
+ right: "10px",
+ padding: "$1",
+ zIndex: 9999,
 });
 
 const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
@@ -36,7 +59,9 @@ const FeaturesProperties = (props: { features: MapGeoJSONFeature[] }) => {
 
  return (
  <FeatureRow key={i}>
- <div>{(f.layer as any)["source-layer"]}</div>
+ <div>
+ <strong>{(f.layer as any)["source-layer"]}</strong>
+ </div>
  <table>{rows}</table>
  </FeatureRow>
  );
@@ -116,6 +141,7 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
  });
  }
  } else if (tilestats) {
+ // TODO deprecate me...
  for (let [i, layer] of tilestats.layers.entries()) {
  if (layer.geometry === "Polygon") {
  layers.push({
@@ -153,6 +179,13 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
  }
  }
 
+ for (let layer of layers) {
+ if (layer["source-layer"] == "mask") {
+ layer.paint["fill-color"] = "black";
+ layer.paint["fill-opacity"] = 0.8;
+ }
+ }
+
  return {
  version: 8,
  sources: {
@@ -169,14 +202,36 @@ const vectorStyle = async (file: PMTiles): Promise<any> => {
 
 function MaplibreMap(props: { file: PMTiles }) {
  let mapContainerRef = useRef<HTMLDivElement>(null);
- let map: maplibregl.Map;
+ let [hamburgerOpen, setHamburgerOpen] = useState<boolean>(true);
+ let [showAttributes, setShowAttributes] = useState<boolean>(false);
+ let [showTileBoundaries, setShowTileBoundaries] = useState<boolean>(false);
+ const mapRef = useRef<maplibregl.Map | null>(null);
+
+ // make it accessible in hook
+ const showAttributesRef = useRef(showAttributes);
+ useEffect(() => {
+ showAttributesRef.current = showAttributes;
+ });
+
+ const toggleHamburger = () => {
+ setHamburgerOpen(!hamburgerOpen);
+ };
+
+ const toggleShowAttributes = () => {
+ setShowAttributes(!showAttributes);
+ };
+
+ const toggleShowTileBoundaries = () => {
+ setShowTileBoundaries(!showTileBoundaries);
+ mapRef.current!.showTileBoundaries = !showTileBoundaries;
+ };
 
  useEffect(() => {
  let protocol = new Protocol();
  maplibregl.addProtocol("pmtiles", protocol.tile);
  protocol.add(props.file); // this is necessary for non-HTTP sources
 
- map = new maplibregl.Map({
+ const map = new maplibregl.Map({
  container: mapContainerRef.current!,
  hash: "map",
  zoom: 0,
@@ -187,16 +242,21 @@ function MaplibreMap(props: { file: PMTiles }) {
  layers: [],
  },
  });
- map.showTileBoundaries = true;
- map.addControl(new maplibregl.NavigationControl({}));
+ map.addControl(new maplibregl.NavigationControl({}), "bottom-left");
  map.on("load", map.resize);
 
  const popup = new maplibregl.Popup({
  closeButton: false,
  closeOnClick: false,
  });
 
+ mapRef.current = map;
+
  map.on("mousemove", (e) => {
+ if (!showAttributesRef.current) {
+ popup.remove();
+ return;
+ }
  var bbox = e.point;
  var features = map.queryRenderedFeatures(bbox);
  map.getCanvas().style.cursor = features.length ? "pointer" : "";
@@ -218,7 +278,8 @@ function MaplibreMap(props: { file: PMTiles }) {
 
  useEffect(() => {
  let initStyle = async () => {
- if (map) {
+ if (mapRef.current) {
+ let map = mapRef.current;
  let header = await props.file.getHeader();
 
  map.fitBounds(
@@ -245,7 +306,33 @@ function MaplibreMap(props: { file: PMTiles }) {
  initStyle();
  }, []);
 
- return <MapContainer ref={mapContainerRef}></MapContainer>;
+ return (
+ <MapContainer ref={mapContainerRef}>
+ <div ref={mapContainerRef}></div>
+ <Hamburger onClick={toggleHamburger}>menu</Hamburger>
+ {hamburgerOpen ? (
+ <Options>
+ <h4>Filter</h4>
+ <h4>Popup</h4>
+ <input
+ type="checkbox"
+ id="showAttributes"
+ checked={showAttributes}
+ onChange={toggleShowAttributes}
+ />
+ <label htmlFor="showAttributes">show attributes</label>
+ <h4>Tiles</h4>
+ <input
+ type="checkbox"
+ id="showTileBoundaries"
+ checked={showTileBoundaries}
+ onChange={toggleShowTileBoundaries}
+ />
+ <label htmlFor="showTileBoundaries">show tile boundaries</label>
+ </Options>
+ ) : null}
+ </MapContainer>
+ );
 }
 
 export default MaplibreMap;