diff --git a/package-lock.json b/package-lock.json index c874d8ba0c..33f14548c9 100644 --- a/package-lock.json +++ b/package-lock.json @@ -67,7 +67,7 @@ "@types/invariant": "^2.2.37", "@types/jest": "^27.5.2", "@types/jsdom": "^21.1.7", - "@types/leaflet": "^1.9.0", + "@types/leaflet": "^1.9.12", "@types/leaflet.markercluster": "^1.5.4", "@types/lodash": "^4.17.7", "@types/node": "^16.18.105", @@ -4148,9 +4148,9 @@ "peer": true }, "node_modules/@types/leaflet": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz", - "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz", + "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==", "dev": true, "dependencies": { "@types/geojson": "*" @@ -26088,9 +26088,9 @@ "peer": true }, "@types/leaflet": { - "version": "1.9.3", - "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.3.tgz", - "integrity": "sha512-Caa1lYOgKVqDkDZVWkto2Z5JtVo09spEaUt2S69LiugbBpoqQu92HYFMGUbYezZbnBkyOxMNPXHSgRrRY5UyIA==", + "version": "1.9.12", + "resolved": "https://registry.npmjs.org/@types/leaflet/-/leaflet-1.9.12.tgz", + "integrity": "sha512-BK7XS+NyRI291HIo0HCfE18Lp8oA30H1gpi1tf0mF3TgiCEzanQjOqNZ4x126SXzzi2oNSZhZ5axJp1k0iM6jg==", "dev": true, "requires": { "@types/geojson": "*" diff --git a/package.json b/package.json index 1f3b5b429a..675353f8ac 100644 --- a/package.json +++ b/package.json @@ -99,7 +99,7 @@ "@types/invariant": "^2.2.37", "@types/jest": "^27.5.2", "@types/jsdom": "^21.1.7", - "@types/leaflet": "^1.9.0", + "@types/leaflet": "^1.9.12", "@types/leaflet.markercluster": "^1.5.4", "@types/lodash": "^4.17.7", "@types/node": "^16.18.105", diff --git a/src/shared/services/map-location/index.ts b/src/shared/services/map-location/index.ts index 2c032e6a3d..c0ee1e5ffe 100644 --- a/src/shared/services/map-location/index.ts +++ b/src/shared/services/map-location/index.ts @@ -8,7 +8,6 @@ export { pointWithinBounds, serviceResultToAddress, wktPointToLocation, - sanitizeCoordinates, } from './map-location' export type { PdokResponse, diff --git a/src/shared/services/map-location/map-location.ts b/src/shared/services/map-location/map-location.ts index c5b1d9e6b6..cb503da15d 100644 --- a/src/shared/services/map-location/map-location.ts +++ b/src/shared/services/map-location/map-location.ts @@ -8,15 +8,22 @@ import type { Incident } from 'types/api/incident' import type { Geometrie, Location } from 'types/incident' import type { RevGeo, Doc } from 'types/pdok/revgeo' -export const sanitizeCoordinates = (coordinates: LatLngTuple): LatLngTuple => - coordinates.sort((a, b) => (a > b ? 1 : -1)).reverse() as LatLngTuple +export type LatLng = [number, number] + +const convertCoordsToLatLng = (coordinates: LatLngTuple) => { + const coordsWithoutAltitude = [coordinates[0], coordinates[1]] + + return coordsWithoutAltitude + .sort((a, b) => (a > b ? 1 : -1)) + .reverse() as LatLng +} export const coordinatesToFeature = ({ lat, lng, }: LatLngLiteral): Geometrie => ({ type: 'Point', - coordinates: sanitizeCoordinates([lat, lng]), + coordinates: convertCoordsToLatLng([lat, lng]), }) export const coordinatesToAPIFeature = ({ @@ -30,7 +37,7 @@ export const coordinatesToAPIFeature = ({ export const featureToCoordinates = ({ coordinates, }: Geometrie): LatLngLiteral => { - const [lat, lng] = sanitizeCoordinates(coordinates) + const [lat, lng] = convertCoordsToLatLng(coordinates) return { lat, lng } } @@ -41,7 +48,7 @@ export const wktPointToLocation = (wktPoint: string): LatLngLiteral => { throw new TypeError('Provided WKT geometry is not a point.') } - const [lat, lng] = sanitizeCoordinates( + const [lat, lng] = convertCoordsToLatLng( pointMatch.map((str) => Number.parseFloat(str)) as LatLngTuple ) @@ -144,7 +151,7 @@ export const pointWithinBounds = ( coordinates: LatLngTuple, bounds = configuration.map.options.maxBounds ) => { - const [lat, lng] = sanitizeCoordinates(coordinates) + const [lat, lng] = convertCoordsToLatLng(coordinates) const latWithinBounds = lat > bounds[0][0] && lat < bounds[1][0] const lngWithinBounds = lng > bounds[0][1] && lng < bounds[1][1] diff --git a/src/signals/IncidentMap/types/incident-map.ts b/src/signals/IncidentMap/types/incident-map.ts index af9a861367..dc1ed6603b 100644 --- a/src/signals/IncidentMap/types/incident-map.ts +++ b/src/signals/IncidentMap/types/incident-map.ts @@ -1,9 +1,10 @@ import type { Feature } from 'geojson' -import type { LatLngTuple } from 'leaflet' + +import type { LatLng } from 'shared/services/map-location/map-location' export type PointLatLng = { type: 'Point' - coordinates: LatLngTuple + coordinates: LatLng } export type Properties = { diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector/NearbyLayer/NearbyLayer.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector/NearbyLayer/NearbyLayer.tsx index 5f0e7c43c0..6f68a7cd97 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector/NearbyLayer/NearbyLayer.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector/NearbyLayer/NearbyLayer.tsx @@ -9,13 +9,14 @@ import type { ZoomLevel } from '@amsterdam/arm-core/lib/types' import { useMapInstance } from '@amsterdam/react-maps' import type { FeatureCollection, Feature } from 'geojson' import L from 'leaflet' -import type { LatLngTuple, LeafletMouseEvent } from 'leaflet' +import type { LeafletMouseEvent } from 'leaflet' import intersection from 'lodash/intersection' import { useSelector } from 'react-redux' import { useFetch } from 'hooks' import configuration from 'shared/services/configuration/configuration' import { featureToCoordinates } from 'shared/services/map-location' +import type { LatLng } from 'shared/services/map-location/map-location' import reverseGeocoderService from 'shared/services/reverse-geocoder' import AssetSelectContext from 'signals/incident/components/form/MapSelectors/Asset/context' import { NEARBY_TYPE } from 'signals/incident/components/form/MapSelectors/constants' @@ -34,7 +35,7 @@ import WfsDataContext from '../WfsLayer/context' // Custom Point type, because the compiler complains about the coordinates type type Point = { type: 'Point' - coordinates: LatLngTuple + coordinates: LatLng } type Properties = { diff --git a/src/signals/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/WfsLayer.test.tsx b/src/signals/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/WfsLayer.test.tsx index 7b666ced47..625f447d0c 100644 --- a/src/signals/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/WfsLayer.test.tsx +++ b/src/signals/incident/components/form/MapSelectors/Asset/Selector/WfsLayer/WfsLayer.test.tsx @@ -7,11 +7,10 @@ import { Map } from '@amsterdam/react-maps' import { act, render, screen, waitFor } from '@testing-library/react' import type { FeatureCollection } from 'geojson' import type { FetchMock } from 'jest-fetch-mock' -import type { LatLngTuple, MapOptions } from 'leaflet' +import type { MapOptions } from 'leaflet' import configuration from 'shared/services/configuration/configuration' import MAP_OPTIONS from 'shared/services/configuration/map-options' -import { sanitizeCoordinates } from 'shared/services/map-location' import assetsJson from 'utils/__tests__/fixtures/assets.json' import WfsDataContext, { NO_DATA } from './context' @@ -101,23 +100,8 @@ describe('src/signals/incident/components/form/AssetSelect/WfsLayer', () => { ) ) - const sanitizedAssetsJson = { - ...assetsJson, - features: assetsJson.features.map((feature) => { - return { - ...feature, - geometry: { - ...feature.geometry, - coordinates: sanitizeCoordinates( - feature.geometry.coordinates as LatLngTuple - ), - }, - } - }), - } - await waitFor(() => { - expect(setContextData).toHaveBeenCalledWith(sanitizedAssetsJson) + expect(setContextData).toHaveBeenCalledWith(assetsJson) }) })