preserve map view state

wq · Feb 20, 2023 · 2cc0f40 · 2cc0f40
1 parent 4568600
commit 2cc0f40
Show file tree

Hide file tree

Showing 9 changed files with 246 additions and 158 deletions.
diff --git a/packages/map-gl-native/src/overlays/Geojson.js b/packages/map-gl-native/src/overlays/Geojson.js
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useMemo } from "react";
 import PropTypes from "prop-types";
 import GeoJSONLayer from "./GeoJSONLayer";
 
@@ -15,86 +15,108 @@ export default function Geojson({
  line,
  circle,
 }) {
- let symbolLayout,
+ const {
+ symbolLayout,
  symbolPaint,
  fillLayout,
  fillPaint,
  lineLayout,
  linePaint,
  circleLayout,
- circlePaint;
- if (symbol) {
- const { paint, ...layout } = symbol;
- symbolLayout = layout;
- symbolPaint = paint;
- } else if (icon) {
- symbolLayout = {
- "icon-image": icon,
- "icon-allow-overlap": true,
- };
- } else if (fill || line || circle) {
- fillPaint = fill;
- linePaint = line;
- circlePaint = circle;
- } else {
- fillPaint = {
- "fill-color": color || "#3388ff",
- "fill-opacity": [
- "match",
- ["geometry-type"],
- ["Polygon", "MultiPolygon"],
- 0.2,
- 0,
- ],
+ circlePaint,
+ } = useMemo(() => {
+ let symbolLayout,
+ symbolPaint,
+ fillLayout,
+ fillPaint,
+ lineLayout,
+ linePaint,
+ circleLayout,
+ circlePaint;
+ if (symbol) {
+ const { paint, ...layout } = symbol;
+ symbolLayout = layout;
+ symbolPaint = paint;
+ } else if (icon) {
+ symbolLayout = {
+ "icon-image": icon,
+ "icon-allow-overlap": true,
+ };
+ } else if (fill || line || circle) {
+ fillPaint = fill;
+ linePaint = line;
+ circlePaint = circle;
+ } else {
+ fillPaint = {
+ "fill-color": color || "#3388ff",
+ "fill-opacity": [
+ "match",
+ ["geometry-type"],
+ ["Polygon", "MultiPolygon"],
+ 0.2,
+ 0,
+ ],
+ };
+ linePaint = {
+ "line-width": 3,
+ "line-color": color || "#3388ff",
+ "line-opacity": 1,
+ };
+ circlePaint = {
+ "circle-color": "white",
+ "circle-radius": [
+ "match",
+ ["geometry-type"],
+ ["Point", "MultiPoint"],
+ 3,
+ 0,
+ ],
+ "circle-stroke-color": color || "#3086cc",
+ "circle-stroke-width": [
+ "match",
+ ["geometry-type"],
+ ["Point", "MultiPoint"],
+ 3,
+ 0,
+ ],
+ "circle-opacity": [
+ "match",
+ ["geometry-type"],
+ ["Point", "MultiPoint"],
+ 1,
+ 0,
+ ],
+ };
+ }
+
+ fillLayout = {
+ visibility: active && fillPaint ? "visible" : "none",
  };
- linePaint = {
- "line-width": 3,
- "line-color": color || "#3388ff",
- "line-opacity": 1,
+ lineLayout = {
+ visibility: active && linePaint ? "visible" : "none",
  };
- circlePaint = {
- "circle-color": "white",
- "circle-radius": [
- "match",
- ["geometry-type"],
- ["Point", "MultiPoint"],
- 3,
- 0,
- ],
- "circle-stroke-color": color || "#3086cc",
- "circle-stroke-width": [
- "match",
- ["geometry-type"],
- ["Point", "MultiPoint"],
- 3,
- 0,
- ],
- "circle-opacity": [
- "match",
- ["geometry-type"],
- ["Point", "MultiPoint"],
- 1,
- 0,
- ],
+ circleLayout = {
+ visibility: active && circlePaint ? "visible" : "none",
  };
- }
 
- fillLayout = {
- visibility: active && fillPaint ? "visible" : "none",
- };
- lineLayout = {
- visibility: active && linePaint ? "visible" : "none",
- };
- circleLayout = {
- visibility: active && circlePaint ? "visible" : "none",
- };
+ if (symbolLayout) {
+ symbolLayout = {
+ ...symbolLayout,
+ visibility: active ? "visible" : "none",
+ };
+ }
 
- if (symbolLayout) {
- symbolLayout = {
- ...symbolLayout,
- visibility: active ? "visible" : "none",
+ return {
+ symbolLayout,
+ symbolPaint,
+ fillLayout,
+ fillPaint,
+ lineLayout,
+ linePaint,
+ circleLayout,
+ circlePaint,
  };
- }
+ }, [active, icon, symbol, color, fill, line, circle]);
 
  return (
  <GeoJSONLayer

diff --git a/packages/map-gl-web/src/basemaps/Tile.js b/packages/map-gl-web/src/basemaps/Tile.js
@@ -3,7 +3,22 @@ export default function Tile() {
  return null;
 }
 
+const styles = {};
 export function asBasemapStyle(basemap) {
+ const key = makeBasemapKey(basemap);
+ if (!styles[key]) {
+ styles[key] = makeBasemapStyle(basemap);
+ }
+ return styles[key];
+}
+
+function makeBasemapKey(basemap) {
+ return ["name", "url", "subdomains", "tileSize"]
+ .map((key) => "" + (basemap[key] || ""))
+ .join("__");
+}
+
+function makeBasemapStyle(basemap) {
  const urls = [];
  if (basemap.url.match("{s}")) {
  (basemap.subdomains || ["a", "b", "c"]).forEach((s) =>

diff --git a/packages/map-gl-web/src/components/Map.js b/packages/map-gl-web/src/components/Map.js
@@ -1,5 +1,5 @@
-import React from "react";
-import { usePlugin } from "@wq/react";
+import React, { useCallback } from "react";
+import { usePlugin, usePluginReducer } from "@wq/react";
 import PropTypes from "prop-types";
 import Root from "react-map-gl";
 import { findBasemapStyle } from "../util";
@@ -12,6 +12,11 @@ export default function Map({
  containerStyle,
 }) {
  const { engine } = usePlugin("map-gl"),
+ [{ viewState }, { setViewState }] = usePluginReducer("map"),
+ onMove = useCallback(
+ (evt) => setViewState(evt.viewState),
+ [setViewState]
+ ),
  style = findBasemapStyle(children);
 
  containerStyle = {
@@ -32,9 +37,11 @@ export default function Map({
  id={mapId}
  reuseMaps={Boolean(mapId)}
  mapStyle={style}
- initialViewState={{ bounds: initBounds }}
+ initialViewState={!viewState && { bounds: initBounds }}
+ onMove={onMove}
  style={containerStyle}
  {...mapProps}
+ {...viewState}
  >
  {children}
  </Root>