Show selected entity on map

Author: trevorgerhardt

apps/osm-merge/src/hooks/map.ts

@@ -87,6 +87,7 @@ export function useBitmapTileLayer(osm?: Osm | null) {
 export function usePickableOsmTileLayer(osm?: Osm | null) {
 	const startTask = useStartTask()
 	const osmWorker = useOsmWorker()
+
 	const [selectedEntity, setSelectedEntity] = useAtom(selectedEntityAtom)
 	const layer = useMemo(() => {
 		const bbox = osm?.bbox()
@@ -266,6 +267,26 @@ export function usePickableOsmTileLayer(osm?: Osm | null) {
 
 	return {
 		layer,
+		setSelectedEntity,
 		selectedEntity,
 	}
 }
+
+export function useSelectedEntityLayer(osm?: Osm | null) {
+	const selectedEntity = useAtomValue(selectedEntityAtom)
+	return useMemo(() => {
+		if (!osm || !selectedEntity) return null
+		const geojson = osm.getEntityGeoJson(selectedEntity)
+		return new GeoJsonLayer({
+			id: `${APPID}:selected-entity`,
+			data: geojson,
+			getLineColor: [255, 0, 0, 255],
+			getLineWidth: 3,
+			pointRadiusMinPixels: 2,
+			pointRadiusMaxPixels: 10,
+			lineWidthMinPixels: 2,
+			lineWidthMaxPixels: 10,
+			filled: false,
+		})
+	}, [osm, selectedEntity])
+}

apps/osm-merge/src/pages/inspect.tsx

@@ -1,4 +1,4 @@
-import { usePickableOsmTileLayer } from "@/hooks/map"
+import { usePickableOsmTileLayer, useSelectedEntityLayer } from "@/hooks/map"
 import { useOsmFile } from "@/hooks/osm"
 import { APPID, MIN_PICKABLE_ZOOM } from "@/settings"
 import { addLogMessageAtom } from "@/state/log"
@@ -45,6 +45,7 @@ export default function ViewPage() {
 	}, [file])
 
 	const { layer: tileLayer, selectedEntity } = usePickableOsmTileLayer(osm)
+	const selectedEntityLayer = useSelectedEntityLayer(osm)
 
 	return (
 		<Main>
@@ -128,7 +129,7 @@ export default function ViewPage() {
 						</Source>
 					)}
 					<DeckGlOverlay
-						layers={[tileLayer]}
+						layers={[tileLayer, selectedEntityLayer]}
 						pickingRadius={5}
 						getTooltip={(pickingInfo) => {
 							const sourceLayerId = pickingInfo.sourceLayer?.id

apps/osm-merge/src/pages/merge.tsx

@@ -1,5 +1,9 @@
 import useStartTask from "@/hooks/log"
-import { useBitmapTileLayer, usePickableOsmTileLayer } from "@/hooks/map"
+import {
+	useBitmapTileLayer,
+	usePickableOsmTileLayer,
+	useSelectedEntityLayer,
+} from "@/hooks/map"
 import { useOsmFile, useOsmWorker } from "@/hooks/osm"
 import { APPID, DEFAULT_BASE_PBF_URL, DEFAULT_PATCH_PBF_URL } from "@/settings"
 import { mapAtom } from "@/state/map"
@@ -47,6 +51,8 @@ export default function Merge() {
 	const { layer: mergedTileLayer, selectedEntity: mergedSelectedEntity } =
 		usePickableOsmTileLayer(mergedOsm)
 
+	const selectedEntityLayer = useSelectedEntityLayer(mergedOsm)
+
 	const [step, setStep] = useState<number>(1)
 
 	const [mergeOptions, setMergeOptions] = useState({
@@ -350,7 +356,12 @@ export default function Merge() {
 			<MapContent>
 				<Basemap>
 					<DeckGlOverlay
-						layers={[baseTileLayer, patchTileLayer, mergedTileLayer]}
+						layers={[
+							baseTileLayer,
+							patchTileLayer,
+							mergedTileLayer,
+							selectedEntityLayer,
+						]}
 						getTooltip={(pickingInfo) => {
 							const sourceLayerId = pickingInfo.sourceLayer?.id
 							if (sourceLayerId?.startsWith(`${APPID}:${mergedOsm?.id}`)) {

packages/osm.ts/src/osm.ts

@@ -16,6 +16,7 @@ import type {
 	OsmEntityTypeMap,
 	OsmNode,
 	OsmRelation,
+	OsmTags,
 	OsmWay,
 } from "./types"
 import { isNode, isRelation, isWay } from "./utils"
@@ -258,6 +259,21 @@ export class Osm {
 		throw new Error("Unknown entity type")
 	}
 
+	getEntityGeoJson(
+		entity: OsmNode | OsmWay | OsmRelation,
+	): GeoJSON.Feature<GeoJSON.Geometry, OsmTags> {
+		if (isNode(entity)) {
+			return nodeToFeature(entity)
+		}
+		if (isWay(entity)) {
+			return wayToFeature(entity, this.nodes)
+		}
+		if (isRelation(entity)) {
+			return relationToFeature(entity, this.nodes)
+		}
+		throw new Error("Unknown entity type")
+	}
+
 	createNode(lonLat: LonLat) {
 		const maxNodeId = this.nodes.ids.at(-1) ?? 0
 		return this.nodes.addNode({