@mwater/visualization 5.0.0

package/src/maps/vectorMaps.tsx

@@ -0,0 +1,410 @@
+import _ from "lodash"
+import maplibregl, { Map, LayerSpecification, LngLatBoundsLike, MapLayerMouseEvent } from "maplibre-gl"
+import { useEffect, useMemo, useState } from "react"
+import { mapSymbols } from "./mapSymbols"
+
+import "maplibre-gl/dist/maplibre-gl.css"
+import "./VectorMapViewComponent.css"
+import React from "react"
+
+/* Hooks and functions related to displaying a vector map */
+
+let mapTilerApiKey = ""
+
+/** This must be called to set the appropriate key before use. If it is not set, vector maps will not function.
+ * Maps will fall back to leaflet if the key is not set or if set to ""
+ */
+export function setMapTilerApiKey(key: string) {
+  mapTilerApiKey = key
+}
+
+export function getMapTilerApiKey(): string {
+  return mapTilerApiKey
+}
+
+/** Check if vector maps are enabled by setting API key */
+export function areVectorMapsEnabled() {
+  return mapTilerApiKey !== ""
+}
+
+export type BaseLayer = "bing_road" | "bing_aerial" | "cartodb_positron" | "cartodb_dark_matter" | "blank"
+
+/** Loads a vector map, refreshing the WebGL context as needed */
+export function useVectorMap(options: {
+  divRef: HTMLDivElement | null
+  bounds?: LngLatBoundsLike
+  scrollZoom?: boolean
+  dragPan?: boolean
+  touchZoomRotate?: boolean
+}) {
+  const { divRef, bounds, scrollZoom, dragPan, touchZoomRotate } = options
+
+  // Maplibre map
+  const [map, setMap] = useState<maplibregl.Map>()
+
+  // Tracks if map div is visible
+  const [mapDivVisible, setMapDivVisible] = useState(false)
+
+  // Tracks if map has webgl context
+  const [hasWebGLContext, setHasWebGLContext] = useState(false)
+
+  // Increments to trigger a map reload
+  const [mapReloadCount, setMapReloadCount] = useState(0)
+
+  // Observe visibility of map
+  useEffect(() => {
+    if (!divRef) {
+      return
+    }
+    
+    const observer = new IntersectionObserver(function(entries) {
+      setMapDivVisible(entries[0].isIntersecting)
+    })
+    observer.observe(divRef)
+    return () => {
+      observer.disconnect()
+    }
+  }, [divRef])
+
+  // If map div is visible, and no webgl context, trigger map load
+  useEffect(() => {
+    if (mapDivVisible && !hasWebGLContext) {
+      setMapReloadCount(rc => rc + 1)
+    }
+  }, [mapDivVisible, hasWebGLContext])
+
+  // Load map and symbols
+  useEffect(() => {
+    // Don't enable if invisible
+    if (!mapDivVisible || !divRef) {
+      return
+    }
+
+    const m = new maplibregl.Map({
+      container: divRef,
+      bounds: bounds,
+      scrollZoom: scrollZoom === false ? false : true,
+      dragPan: dragPan === false ? false : true,
+      touchZoomRotate: touchZoomRotate === false ? false : true,
+      attributionControl: false,
+      boxZoom: false,
+      style: {
+        version: 8,
+        layers: [],
+        sources: {}
+      },
+      // Prevent scrolling outside of world bounds
+      maxBounds: [
+        [-179.9, -85], // Southwest coordinates
+        [179.9, 85] // Northeast coordinates
+      ],
+    })
+
+    setHasWebGLContext(true)
+
+    // Add listener for losing context
+    m.on("webglcontextlost", () => {
+      console.warn("Lost WebGL context")
+      setHasWebGLContext(false)
+    })
+
+    // Add zoom controls to the map.
+    m.addControl(new maplibregl.NavigationControl({}), "top-left")
+
+    // Add scale control
+    const scale = new maplibregl.ScaleControl({
+      unit: "metric"
+    })
+    m.addControl(scale)
+
+    // Speed up wheel scrolling
+    m.scrollZoom.setWheelZoomRate(1 / 250)
+
+    // Dynamically load symbols
+    m.on("styleimagemissing" as any, function (ev: { id: string }) {
+      // Check if known
+      const mapSymbol = mapSymbols.find((s) => s.value == ev.id)
+      if (mapSymbol) {
+        m.loadImage(mapSymbol.url, (err: any, image: any) => {
+          if (image && !m.hasImage(mapSymbol.value)) {
+            m.addImage(mapSymbol.value, image, { sdf: true })
+          }
+        })
+      }
+    })
+
+    setMap(m)
+
+    return () => {
+      m.remove()
+      setHasWebGLContext(false)
+    }
+  }, [mapReloadCount])
+
+  return map
+}
+
+/** Sets cursor as pointer when over any layers with the specified ids */
+export function useHoverCursor(map: maplibregl.Map | undefined, layerIds: string[]) {
+  // Setup hover effect
+  useEffect(() => {
+    if (!map) {
+      return
+    }
+
+    const removes: { (): void }[] = []
+
+    for (const layerId of layerIds) {
+      const onEnter = (ev: MapLayerMouseEvent) => {
+        map.getCanvas().style.cursor = 'pointer'
+      }
+      const onLeave = (ev: MapLayerMouseEvent) => {
+        map.getCanvas().style.cursor = ''
+      }
+      map.on("mousemove", layerId, onEnter)
+      map.on("mouseleave", layerId, onLeave)
+      removes.push(() => {
+        map.off("mousemove", layerId, onEnter)
+        map.off("mouseleave", layerId, onLeave)
+      })
+    }
+    return () => {
+      for (const remove of removes) {
+        remove()
+      }
+    }
+  }, [map, layerIds])
+}
+
+/** Apply user style to a map with base style */
+export function useStyleMap(options: {
+  map: maplibregl.Map | undefined, 
+  baseLayer: BaseLayer,
+  baseLayerOpacity?: number | null,
+  userStyle: maplibregl.StyleSpecification | null | undefined, 
+}) {
+  const { map, baseLayer, baseLayerOpacity, userStyle } = options
+
+  // Load base style
+  const baseStyle = useBaseStyle(baseLayer)
+
+  // Update map style
+  const style = useMemo(() => {
+    return mergeBaseAndUserStyle(baseStyle, userStyle, baseLayerOpacity)
+  }, [baseStyle, userStyle, baseLayerOpacity])
+
+  // Set map style
+  useEffect(() => {
+    // Can't load until map and style are present
+    if (!map || !style) {
+      return
+    }
+    map.setStyle(style)
+  }, [map, style])
+}
+
+/** Loads a base style for the map */
+export function useBaseStyle(baseLayer: BaseLayer) {
+  // Load base layer
+  const [baseStyle, setBaseStyle] = useState<maplibregl.StyleSpecification | null>(null)
+
+  useEffect(() => {
+    function loadStyle(styleUrl: string) {
+      // Load style
+      fetch(styleUrl)
+        .then((response) => response.json())
+        .then((styleData: maplibregl.StyleSpecification) => {
+          // Set style and update layers
+          setBaseStyle(styleData)
+        })
+    }
+
+    if (baseLayer == "cartodb_positron") {
+      loadStyle(`https://api.maptiler.com/maps/positron/style.json?key=${mapTilerApiKey}`)
+    } else if (baseLayer == "cartodb_dark_matter") {
+      loadStyle(`https://api.maptiler.com/maps/darkmatter/style.json?key=${mapTilerApiKey}`)
+    } else if (baseLayer == "bing_road") {
+      loadStyle(`https://api.maptiler.com/maps/streets/style.json?key=${mapTilerApiKey}`)
+    } else if (baseLayer == "bing_aerial") {
+      // Switched to Bing for superior aerial imagery
+      loadBingBasemap("AerialWithLabels", 1).then(setBaseStyle)
+      // loadStyle(`https://api.maptiler.com/maps/hybrid/style.json?key=${mapTilerApiKey}`)
+    } else if (baseLayer == "blank") {
+      setBaseStyle({
+        version: 8,
+        layers: [],
+        sources: {}
+      })
+    }
+  }, [baseLayer])
+
+  return baseStyle
+}
+
+/** Combines a base style and a user style */
+export function mergeBaseAndUserStyle(
+  baseStyle: maplibregl.StyleSpecification | null | undefined, 
+  userStyle: maplibregl.StyleSpecification | null | undefined, 
+  baseLayerOpacity?: number | null) {
+  // Merge until baseStyle and userStyle are present
+  if (!baseStyle || !userStyle) {
+    return null
+  }
+
+  // Create background layer to simulate base layer opacity
+  const baseLayerOpacityLayer: LayerSpecification = {
+    id: "baseLayerOpacity",
+    type: "background",
+    paint: {
+      "background-color": "white",
+      "background-opacity": 1 - (baseLayerOpacity != null ? baseLayerOpacity : 1)
+    }
+  }
+
+  // Create style
+  let layers = baseStyle.layers || []
+
+  // Simulate base opacity
+  if (baseLayerOpacity != null && baseLayerOpacity < 1) {
+    layers = layers.concat([baseLayerOpacityLayer])
+  }
+
+  layers = layers.concat(userStyle.layers || [])
+
+  const style: maplibregl.StyleSpecification = {
+    ...baseStyle,
+    sources: {
+      ...baseStyle.sources,
+      ...userStyle.sources
+    },
+    glyphs: baseStyle.glyphs || `https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=${mapTilerApiKey}`,
+    layers
+  }
+  return style
+}
+
+export function AttributionControl(props: { 
+  baseLayer: BaseLayer
+  extraText?: string 
+}) {
+  if (props.baseLayer == "blank") {
+    return <div className="newmap-attribution-control">
+      {props.extraText ? " " + props.extraText : null}
+    </div>
+  }
+
+  if (props.baseLayer == "bing_aerial") {
+    return (
+      <div className="newmap-attribution-control">
+        Copyright © 2022 Microsoft and its suppliers.
+        {props.extraText ? " " + props.extraText : null}
+      </div>
+    )
+  }
+
+  return (
+    <div className="newmap-attribution-control">
+      <a href="https://www.maptiler.com/copyright/" target="_blank">
+        &copy; MapTiler
+      </a> 
+      {" "}
+      <a href="https://www.openstreetmap.org/about/" target="_blank">
+        © OpenStreetMap
+      </a>
+      {props.extraText ? " " + props.extraText : null}
+    </div>
+  )
+}
+
+export function VectorMapLogo(props: {
+  baseLayer: BaseLayer
+}) {
+  if (props.baseLayer == "blank") {
+    return null
+  }
+
+  if (props.baseLayer == "bing_aerial") {
+    return <img 
+      src="https://dev.virtualearth.net/Branding/logo_powered_by.png" 
+      style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }} 
+    />
+  }
+
+  return <img 
+    src={require("./Maptiler-logo.png").default} 
+    style={{ position: "absolute", bottom: 38, left: 11, height: 22, zIndex: 1000, pointerEvents: "none" }} 
+  />
+}
+
+async function loadBingBasemap(basemapType: "AerialWithLabels", opacity: number): Promise<maplibregl.StyleSpecification> {
+  // Load metadata
+  const bingApiKey = "Ao26dWY2IC8PjorsJKFaoR85EPXCnCohrJdisCWXIULAXFo0JAXquGauppTMQbyU"
+
+  const metadata = await fetch(`https://dev.virtualearth.net/REST/v1/Imagery/Metadata/${basemapType}?key=${bingApiKey}`).then((response) => response.json())
+  const resource = metadata.resourceSets[0].resources[0]
+  
+  return {
+    sources: {
+      "bing_raster": {
+        type: "raster",
+        tiles: resource.imageUrlSubdomains.map((subdomain: string) => 
+          resource.imageUrl.replace("{subdomain}", subdomain).replace("{culture}", "").replace("http:", "https:")),
+        tileSize: resource.imageHeight,
+      }
+    },
+    layers: [
+      {
+        id: "bing_raster",
+        type: "raster",
+        source: "bing_raster",
+        paint: {
+          "raster-opacity": opacity
+        }
+      }
+    ],
+    version: 8
+  }
+}
+
+/** Persists map bounds to local storage */
+export function usePersistedMapBounds(map: Map | undefined, localStorageKey: string) {
+  const [bounds, setBounds] = useState<{ n: number, e: number, s: number, w: number } | null>(null)
+
+  // Load bounds from local storage on initial render
+  useEffect(() => {
+    const persistedBounds = localStorage.getItem(localStorageKey)
+    if (persistedBounds) {
+      setBounds(JSON.parse(persistedBounds))
+    }
+  }, [localStorageKey])
+
+  // Apply loaded bounds to map when map and bounds are available
+  useEffect(() => {
+    if (map && bounds) {
+      map.fitBounds([
+        [bounds.w, bounds.s],
+        [bounds.e, bounds.n]
+      ], { duration: 2000 })
+    }
+  }, [map, bounds])
+
+  // Update bounds in local storage when map moves
+  useEffect(() => {
+    if (!map) {
+      return
+    }
+
+    function onMoveEnd() {
+      const bounds = map!.getBounds()
+      const mapBounds = { n: bounds.getNorth(), e: bounds.getEast(), s: bounds.getSouth(), w: bounds.getWest() }
+      localStorage.setItem(localStorageKey, JSON.stringify(mapBounds))
+    }
+
+    map.on("moveend", onMoveEnd)
+
+    return () => {
+      map.off("moveend", onMoveEnd)
+    }
+  }, [map])
+}
+    

package/src/memoizedDebounce.tsx

@@ -0,0 +1,32 @@
+import _, { Cancelable } from "lodash"
+
+// taken from https://github.com/lodash/lodash/issues/2403#issuecomment-1158234729
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export interface MemoizeDebouncedFunction<F extends (...args: any[]) => any> {
+  (...args: Parameters<F>): void
+  flush: (...args: Parameters<F>) => void
+}
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export function memoizedDebounce<F extends (...args: any[]) => any>(
+  func: F,
+  wait = 0,
+  options: _.DebounceSettings = {},
+  resolver?: (...args: Parameters<F>) => unknown
+): MemoizeDebouncedFunction<F> {
+  const debounceMemo = _.memoize<(...args: Parameters<F>) => F & Cancelable>(
+    // eslint-disable-next-line @typescript-eslint/no-unused-vars
+    (..._args: Parameters<F>) => _.debounce(func, wait, options),
+    resolver
+  )
+
+  function wrappedFunction(...args: Parameters<F>): ReturnType<F> | undefined {
+    return debounceMemo(...args)(...args)
+  }
+
+  wrappedFunction.flush = (...args: Parameters<F>): void => {
+    debounceMemo(...args).cancel()
+  }
+
+  return wrappedFunction as unknown as MemoizeDebouncedFunction<F>
+}