use maplibre popup on desktop

packages/map-gl-web/src/components/HighlightPopup.js

@@ -0,0 +1,72 @@
+import React, { useMemo } from "react";
+import { Popup } from "react-map-gl";
+import {
+ HighlightPopup as ModalPopup,
+ HighlightContent,
+ computeBounds,
+} from "@wq/map";
+import { usePluginReducer } from "@wq/react";
+import { useMinWidth } from "@wq/material";
+
+export default function HighlightPopup({ inMap }) {
+ const showInMap = useMinWidth(600);
+ if (inMap && !showInMap) {
+ return null;
+ } else if (!inMap && showInMap) {
+ return null;
+ } else if (inMap) {
+ return <InMapPopup />;
+ } else {
+ return <ModalPopup />;
+ }
+}
+
+export function InMapPopup() {
+ const [{ highlight }, { clearHighlight }] = usePluginReducer("map"),
+ [longitude, latitude] = useMemo(
+ () => findPoint(highlight),
+ [highlight]
+ );
+ if (!highlight || latitude === null || longitude === null) {
+ return null;
+ }
+ return (
+ <Popup
+ latitude={latitude}
+ longitude={longitude}
+ onClose={clearHighlight}
+ maxWidth="80vw"
+ >
+ <div style={{ maxHeight: "40vh", overflowY: "auto" }}>
+ {highlight.features.map((feature) => (
+ <HighlightContent
+ key={feature.id}
+ feature={feature}
+ inMap
+ />
+ ))}
+ </div>
+ </Popup>
+ );
+}
+
+function findPoint(highlight) {
+ if (!highlight || !highlight.features || !highlight.features.length) {
+ return [null, null];
+ }
+ const point = highlight.features.find(
+ (feature) => feature.geometry && feature.geometry.type === "Point"
+ );
+
+ if (point) {
+ return point.geometry.coordinates;
+ } else {
+ const bounds = computeBounds(highlight.features);
+ if (bounds) {
+ const [[minx, miny], [maxx, maxy]] = bounds;
+ return [(minx + maxx) / 2, (miny + maxy) / 2];
+ } else {
+ return [0, 0];
+ }
+ }
+}

packages/map-gl-web/src/components/index.js

@@ -4,6 +4,7 @@ import MapInteraction from "./MapInteraction.js";
 import MapAutoZoom from "./MapAutoZoom.js";
 import MapIdentify from "./MapIdentify.js";
 import MapLayers from "./MapLayers.js";
+import HighlightPopup from "./HighlightPopup.js";
 
 export {
  Map,
@@ -12,4 +13,5 @@ export {
  MapAutoZoom,
  MapIdentify,
  MapLayers,
+ HighlightPopup,
 };

packages/map-gl-web/src/hooks.js

@@ -9,5 +9,5 @@ export function useMapInstance(mapId) {
  mapId = mapState.mapId;
  }
 
- return mapId ? maps[mapId] : maps.current || maps.default;
+ return (mapId && maps[mapId]) || maps.current || maps.default;
 }

packages/map-gl-web/src/index.js

@@ -7,6 +7,7 @@ import {
  MapAutoZoom,
  MapIdentify,
  MapLayers,
+ HighlightPopup,
 } from "./components/index.js";
 
 import { useMapInstance } from "./hooks.js";
@@ -41,6 +42,7 @@ export default {
  MapAutoZoom,
  MapIdentify,
  MapLayers,
+ HighlightPopup,
  },
  basemaps: {
  VectorTile,
@@ -64,6 +66,7 @@ export {
  MapIdentify,
  MapProvider,
  useMapInstance,
+ HighlightPopup,
  VectorTile,
  Tile,
  Geojson,

packages/map/src/components/GeoTools.js

@@ -12,7 +12,7 @@ export default function GeoTools({ name, type, mapId }) {
  ),
  { View } = useComponents(),
  { Toggle } = useInputComponents(),
- singleRow = useMinWidth(480);
+ singleRow = useMinWidth(600);
 
  if (singleRow) {
  return (

packages/map/src/components/HighlightPopup.js

@@ -2,10 +2,13 @@ import React from "react";
 import { useComponents, useViewComponents, usePluginReducer } from "@wq/react";
 import PropTypes from "prop-types";
 
-export default function HighlightPopup() {
+export default function HighlightPopup({ inMap }) {
  const { Popup, View, ScrollView, IconButton } = useComponents(),
  [{ highlight }, { clearHighlight }] = usePluginReducer("map"),
  features = (highlight && highlight.features) || [];
+ if (inMap) {
+ return null;
+ }
  return (
  <View style={{ position: "absolute", bottom: 0 }}>
  <Popup
@@ -20,15 +23,15 @@ export default function HighlightPopup() {
  />
  <ScrollView style={{ maxHeight: "33vh" }}>
  {features.map((feature) => (
- <PopupContent key={feature.id} feature={feature} />
+ <HighlightContent key={feature.id} feature={feature} />
  ))}
  </ScrollView>
  </Popup>
  </View>
  );
 }
 
-function PopupContent({ feature }) {
+export function HighlightContent({ feature, inMap }) {
  const popupName = feature.popup
  ? `${feature.popup}-popup`
  : "default-popup",
@@ -43,9 +46,10 @@ function PopupContent({ feature }) {
  }
  }
 
- return <View feature={feature} />;
+ return <View feature={feature} inMap={inMap} />;
 }
 
-PopupContent.propTypes = {
+HighlightContent.propTypes = {
  feature: PropTypes.object,
+ inMap: PropTypes.bool,
 };

packages/map/src/components/index.js

@@ -1,7 +1,7 @@
 import AutoMap from "./AutoMap.js";
 import AutoBasemap from "./AutoBasemap.js";
 import AutoOverlay from "./AutoOverlay.js";
-import HighlightPopup from "./HighlightPopup.js";
+import HighlightPopup, { HighlightContent } from "./HighlightPopup.js";
 import PropertyTable from "./PropertyTable.js";
 import MapProvider from "./MapProvider.js";
 import MapContainer from "./MapContainer.js";
@@ -19,6 +19,7 @@ export {
  AutoBasemap,
  AutoOverlay,
  HighlightPopup,
+ HighlightContent,
  PropertyTable,
  MapProvider,
  MapContainer,

packages/map/src/geotools/GeoCode.js

@@ -57,6 +57,7 @@ export default function GeoCode({ name, type, setLocation }) {
  name={name + "_address"}
  label="Address"
  helperText={geocodeStatus || "Enter address or city name"}
+ style={{ flex: 1 }}
  />
  <IconButton onClick={geocode} icon="search" color="secondary" />
  </>

packages/map/src/index.js

@@ -17,6 +17,7 @@ import {
  AutoBasemap,
  AutoOverlay,
  HighlightPopup,
+ HighlightContent,
  PropertyTable,
  MapToolbar,
  Legend,
@@ -45,6 +46,7 @@ export {
  AutoBasemap,
  AutoOverlay,
  HighlightPopup,
+ HighlightContent,
  PropertyTable,
  MapToolbar,
  Legend,

packages/map/src/views/DefaultList.js

@@ -16,7 +16,9 @@ export default function DefaultListWithMap() {
  <MapProvider>
  <DefaultList />
  <Divider orientation="vertical" />
- <AutoMap mapId={mapId} context={context} />
+ <AutoMap mapId={mapId} context={context}>
+ <HighlightPopup inMap />
+ </AutoMap>
  <HighlightPopup />
  </MapProvider>
  );

packages/material-web/src/components/Header.js

@@ -7,7 +7,7 @@ export default function Header() {
  const title = useSiteTitle(),
  links = useBreadcrumbs(),
  { Logo, Breadcrumbs, IconButton, NavMenuPopup } = useComponents(),
- fixedMenu = useMinWidth(480),
+ fixedMenu = useMinWidth(600),
  [open, setOpen] = useState(false);
  return (
  <>

packages/material-web/src/components/NavMenuFixed.js

@@ -6,7 +6,7 @@ import { Paper } from "@mui/material";
 export default function NavMenuFixed() {
  const { NavMenu, Index } = useViewComponents(),
  { name } = useRouteInfo(),
- fixedMenu = useMinWidth(480);
+ fixedMenu = useMinWidth(600);
  if (!fixedMenu) {
  return null;
  }

wq/app/static/app/.sha256

@@ -2,4 +2,4 @@ c637d052aaddf8b0ad878819ee30facb74a3ba34cbed310a0fd1834fc02f46a2 css/mapbox-gl-
 731181d400d65a8b09d842f55b70bc4dc11010b15b8549e2c65a69d233fbdd2e css/maplibre-gl.css
 cfb20121bd733aa6795e9f2f180c327d561c51cff783196f1eaa01ba42701bec css/wq.css
 a222d0281caeab67157dc947f83971d219156060bd98a529c035de4cec92a8f5 js/maplibre-gl.js
-74f25d30d493b339411c0c0671a730f895ee3c6e5244bdd60a22647c25bf516c js/wq.js'
+28159d76f74f581076cb8bce8f365a0b9636b0a9563ba8c25000261bf9e7831b js/wq.js'