Add OpenStreetMap as a Map Provider #427
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| .leaflet-measurement-label { | ||
| background: rgba(255, 255, 255, 0.8); | ||
| padding: 4px 8px; | ||
| border-radius: 4px; | ||
| font-size: 12px; | ||
| font-weight: bold; | ||
| color: #333333; | ||
| box-shadow: 0 2px 4px rgba(0,0,0,0.2); | ||
| pointer-events: none; | ||
| white-space: nowrap; | ||
| } |
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,187 @@ | ||
| 'use client' | ||
|
|
||
| import { useEffect, useRef, useCallback } from 'react' | ||
| import { MapContainer, TileLayer, FeatureGroup, useMap, useMapEvents } from 'react-leaflet' | ||
| import L from 'leaflet' | ||
| import 'leaflet/dist/leaflet.css' | ||
| import 'leaflet-draw/dist/leaflet.draw.css' | ||
| import * as turf from '@turf/turf' | ||
| import { useMapData } from './map-data-context' | ||
| import { useMapLoading } from '../map-loading-context' | ||
| import './osm-map.css' | ||
|
|
||
| // Leaflet's default icon path is not set up correctly in Next.js by default. | ||
| // This fix ensures that the marker icons are loaded correctly. | ||
| delete (L.Icon.Default.prototype as any)._getIconUrl | ||
| L.Icon.Default.mergeOptions({ | ||
| iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png').default, | ||
| iconUrl: require('leaflet/dist/images/marker-icon.png').default, | ||
| shadowUrl: require('leaflet/dist/images/marker-shadow.png').default, | ||
| }) | ||
|
|
||
| // Formats the area or distance for display, consistent with other map components. | ||
| const formatMeasurement = (value: number, isArea = true) => { | ||
| if (isArea) { | ||
| return value >= 1000000 | ||
| ? `${(value / 1000000).toFixed(2)} km²` | ||
| : `${value.toFixed(2)} m²` | ||
| } else { | ||
| return value >= 1000 | ||
| ? `${(value / 1000).toFixed(2)} km` | ||
| : `${value.toFixed(0)} m` | ||
| } | ||
| } | ||
|
|
||
| const DrawControl = () => { | ||
| const map = useMap() | ||
| const { setMapData } = useMapData() | ||
| const featureGroupRef = useRef<L.FeatureGroup>(new L.FeatureGroup()) | ||
| const labelsRef = useRef<{ [id: number]: L.Marker }>({}) | ||
|
|
||
| const updateMeasurementLabels = useCallback(() => { | ||
| const layers = featureGroupRef.current.getLayers() as (L.Polygon | L.Polyline)[] | ||
| const currentDrawnFeatures: any[] = [] | ||
|
|
||
| // Clear existing labels | ||
| Object.values(labelsRef.current).forEach(marker => marker.remove()) | ||
| labelsRef.current = {} | ||
|
|
||
| layers.forEach(layer => { | ||
| const id = L.Util.stamp(layer) | ||
| const geojson = layer.toGeoJSON() | ||
| let measurement = '' | ||
| let labelPos: L.LatLngExpression | undefined | ||
|
|
||
| if (geojson.geometry.type === 'Polygon') { | ||
| const area = turf.area(geojson) | ||
| measurement = formatMeasurement(area, true) | ||
| const center = turf.centroid(geojson) | ||
| labelPos = [center.geometry.coordinates[1], center.geometry.coordinates[0]] | ||
| } else if (geojson.geometry.type === 'LineString') { | ||
| const length = turf.length(geojson, { units: 'meters' }) | ||
| measurement = formatMeasurement(length, false) | ||
| const line = geojson.geometry.coordinates | ||
| const midpoint = line[Math.floor(line.length / 2)] | ||
| labelPos = [midpoint[1], midpoint[0]] | ||
| } | ||
|
|
||
| if (measurement && labelPos) { | ||
| const label = L.marker(labelPos, { | ||
| icon: L.divIcon({ | ||
| className: 'leaflet-measurement-label', | ||
| html: `<span>${measurement}</span>`, | ||
| }), | ||
| }).addTo(map) | ||
| labelsRef.current[id] = label | ||
| } | ||
|
|
||
| currentDrawnFeatures.push({ | ||
| id: id.toString(), | ||
| type: geojson.geometry.type, | ||
| measurement, | ||
| geometry: geojson.geometry, | ||
| }); | ||
| }) | ||
|
|
||
| setMapData(prev => ({ ...prev, drawnFeatures: currentDrawnFeatures })) | ||
| }, [map, setMapData]) | ||
|
Comment on lines
+41
to
+87
There was a problem hiding this comment.
Also, the midpoint calculation for SuggestionImprove both correctness and performance:
const lengthKm = turf.length(geojson, { units: 'kilometers' });
const mid = turf.along(geojson, lengthKm / 2, { units: 'kilometers' });
labelPos = [mid.geometry.coordinates[1], mid.geometry.coordinates[0]];
Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion. |
||
|
|
||
| useEffect(() => { | ||
| const featureGroup = featureGroupRef.current | ||
| map.addLayer(featureGroup) | ||
|
|
||
| const drawControl = new L.Control.Draw({ | ||
| edit: { featureGroup }, | ||
| draw: { | ||
| polygon: {}, | ||
| polyline: {}, | ||
| rectangle: false, | ||
| circle: false, | ||
| marker: false, | ||
| circlemarker: false, | ||
| }, | ||
| }) | ||
| map.addControl(drawControl) | ||
|
|
||
| const onDrawCreated = (e: any) => { | ||
| const layer = e.layer | ||
| featureGroup.addLayer(layer) | ||
| updateMeasurementLabels() | ||
| } | ||
|
Comment on lines
+42
to
+110
There was a problem hiding this comment.
Since this is core state ( SuggestionIntroduce a small local type for the drawn feature payload and minimally type the draw event(s) you use. Example: type DrawnFeature = {
id: string;
type: 'Polygon' | 'LineString';
measurement: string;
geometry: GeoJSON.Polygon | GeoJSON.LineString;
};
const currentDrawnFeatures: DrawnFeature[] = [];
const onDrawCreated = (e: L.LeafletEvent & { layer: L.Layer }) => {
const layer = e.layer as L.Polygon | L.Polyline;
featureGroup.addLayer(layer);
updateMeasurementLabels();
};Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion. |
||
|
|
||
| const onDrawEdited = () => updateMeasurementLabels() | ||
| const onDrawDeleted = () => updateMeasurementLabels() | ||
|
|
||
| map.on(L.Draw.Event.CREATED, onDrawCreated) | ||
| map.on(L.Draw.Event.EDITED, onDrawEdited) | ||
| map.on(L.Draw.Event.DELETED, onDrawDeleted) | ||
|
|
||
| return () => { | ||
| map.off(L.Draw.Event.CREATED, onDrawCreated) | ||
| map.off(L.Draw.Event.EDITED, onDrawEdited) | ||
| map.off(L.Draw.Event.DELETED, onDrawDeleted) | ||
| if (map.hasLayer(featureGroup)) { | ||
| map.removeLayer(featureGroup) | ||
| } | ||
| map.removeControl(drawControl) | ||
| } | ||
| }, [map, updateMeasurementLabels]) | ||
|
Comment on lines
+119
to
+128
Contributor
There was a problem hiding this comment. Memory leak: measurement labels not cleaned up on unmount. The cleanup function removes the feature group and draw control, but measurement label markers stored in Proposed fix return () => {
+ // Clean up measurement labels
+ Object.values(labelsRef.current).forEach(marker => marker.remove())
+ labelsRef.current = {}
+
map.off(L.Draw.Event.CREATED, onDrawCreated)
map.off(L.Draw.Event.EDITED, onDrawEdited)
map.off(L.Draw.Event.DELETED, onDrawDeleted)
if (map.hasLayer(featureGroup)) {
map.removeLayer(featureGroup)
}
map.removeControl(drawControl)
}🤖 Prompt for AI Agents |
||
|
|
||
| return null | ||
| } | ||
|
|
||
| const MapEvents = ({ onMoveEnd }: { onMoveEnd: (map: L.Map) => void }) => { | ||
| const map = useMapEvents({ | ||
| moveend: () => onMoveEnd(map), | ||
| zoomend: () => onMoveEnd(map), | ||
| }); | ||
| return null; | ||
| }; | ||
|
|
||
| export function OSMMap() { | ||
| const { mapData, setMapData } = useMapData() | ||
| const { setIsMapLoaded } = useMapLoading() | ||
|
|
||
| const initialCenter = mapData.cameraState | ||
| ? [mapData.cameraState.center.lat, mapData.cameraState.center.lng] as [number, number] | ||
| : ([51.505, -0.09] as [number, number]) | ||
| const initialZoom = mapData.cameraState ? mapData.cameraState.zoom : 13 | ||
|
|
||
| useEffect(() => { | ||
| setIsMapLoaded(true) | ||
| return () => setIsMapLoaded(false) | ||
| }, [setIsMapLoaded]) | ||
|
|
||
|
Comment on lines
+150
to
+154
There was a problem hiding this comment.
Leaflet exposes map events like SuggestionTie Example using <MapContainer
...
whenReady={() => setIsMapLoaded(true)}
>And keep the cleanup to set it false on unmount. Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion. |
||
| const handleMapMoveEnd = useCallback((map: L.Map) => { | ||
| const center = map.getCenter() | ||
| const zoom = map.getZoom() | ||
| setMapData(prev => ({ | ||
| ...prev, | ||
| cameraState: { | ||
| ...prev.cameraState, | ||
| center: { lat: center.lat, lng: center.lng }, | ||
| zoom, | ||
| }, | ||
| })) | ||
| }, [setMapData]) | ||
|
|
||
| return ( | ||
| <> | ||
| <MapContainer | ||
| center={initialCenter} | ||
| zoom={initialZoom} | ||
| scrollWheelZoom={true} | ||
| className="h-full w-full" | ||
| > | ||
| <TileLayer | ||
| attribution='© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors' | ||
| url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png" | ||
| /> | ||
| <FeatureGroup> | ||
| <DrawControl /> | ||
| </FeatureGroup> | ||
| <MapEvents onMoveEnd={handleMapMoveEnd} /> | ||
|
Comment on lines
+170
to
+183
There was a problem hiding this comment. Unnecessary nested
|
||
| </MapContainer> | ||
| </> | ||
| ) | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
This file mutates global Leaflet defaults at module scope:
delete (L.Icon.Default.prototype as any)._getIconUrlL.Icon.Default.mergeOptions(...)Because
osm-map.tsxis dynamically imported, this will run each time the chunk is evaluated; in dev/HMR it may execute multiple times. It also usesas anyandrequire(...).default, which is brittle and makes the behavior harder to reason about.This should be guarded to run only once and avoid the
anyescape hatch if possible.Suggestion
Wrap the Leaflet icon patch in a one-time guard and avoid
anyby narrowing with an interface for the private field.Example:
Reply with "@CharlieHelps yes please" if you'd like me to add a commit with this suggestion.