diff --git a/apps/client/src/widgets/collections/geomap/index.tsx b/apps/client/src/widgets/collections/geomap/index.tsx index a97cac980..cc17d5691 100644 --- a/apps/client/src/widgets/collections/geomap/index.tsx +++ b/apps/client/src/widgets/collections/geomap/index.tsx @@ -35,6 +35,7 @@ enum State { export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewModeProps) { const [ state, setState ] = useState(State.Normal); const [ layerName ] = useNoteLabel(note, "map:style"); + const [ hasScale ] = useNoteLabelBoolean(note, "map:scale"); const [ isReadOnly ] = useNoteLabelBoolean(note, "readOnly"); const [ notes, setNotes ] = useState([]); const spacedUpdate = useSpacedUpdate(() => { @@ -96,6 +97,7 @@ export default function GeoView({ note, noteIds, viewConfig, saveConfig }: ViewM }} onClick={onClick} onContextMenu={onContextMenu} + scale={hasScale} > {notes.map(note => )} diff --git a/apps/client/src/widgets/collections/geomap/map.tsx b/apps/client/src/widgets/collections/geomap/map.tsx index 6e1cb57f1..99372d994 100644 --- a/apps/client/src/widgets/collections/geomap/map.tsx +++ b/apps/client/src/widgets/collections/geomap/map.tsx @@ -1,9 +1,8 @@ import { useEffect, useRef, useState } from "preact/hooks"; -import L, { LatLng, Layer, LeafletMouseEvent } from "leaflet"; +import L, { control, LatLng, Layer, LeafletMouseEvent } from "leaflet"; import "leaflet/dist/leaflet.css"; import { MAP_LAYERS } from "./map_layer"; import { ComponentChildren, createContext } from "preact"; -import { map } from "jquery"; export const ParentMap = createContext(null); @@ -15,9 +14,10 @@ interface MapProps { children: ComponentChildren; onClick?: (e: LeafletMouseEvent) => void; onContextMenu?: (e: LeafletMouseEvent) => void; + scale: boolean; } -export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu }: MapProps) { +export default function Map({ coordinates, zoom, layerName, viewportChanged, children, onClick, onContextMenu, scale }: MapProps) { const mapRef = useRef(null); const containerRef = useRef(null); @@ -103,6 +103,15 @@ export default function Map({ coordinates, zoom, layerName, viewportChanged, chi } }, [ mapRef, onContextMenu ]); + // Scale + useEffect(() => { + const map = mapRef.current; + if (!scale || !map) return; + const scaleControl = control.scale(); + scaleControl.addTo(map); + return () => scaleControl.remove(); + }, [ mapRef, scale ]); + return (
{ args.$parent.append(this.$root); } - async renderMap() { - const layerName = this.parentNote.getLabelValue("map:style") ?? ; - - if (this.parentNote.hasLabel("map:scale")) { - L.control.scale().addTo(map); - } - } - async #onMapInitialized() { const map = this.map; if (!map) {