[chore]: Update Leaflet types (#2923)

* Update Leaflet types

* Allow for both lat-lng and lng-lat coords

* Reuse fix for bug

* Remove unnecessary conversion

* Extract and use custom type

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",

src/shared/services/map-location/index.ts

@@ -8,7 +8,6 @@ export {
   pointWithinBounds,
   serviceResultToAddress,
   wktPointToLocation,
-  sanitizeCoordinates,
 } from './map-location'
 export type {
   PdokResponse,

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]

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 = {

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 = {

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)
     })
   })