diff --git a/front/package.json b/front/package.json index b44c4e42c10..656c96c6f7b 100644 --- a/front/package.json +++ b/front/package.json @@ -72,7 +72,7 @@ "license-checker-rseidelsohn": "~3.3.0", "localforage": "^1.10.0", "lodash": "^4.17.15", - "maplibre-gl": "^3.3.0", + "maplibre-gl": "^3.6.1", "match-sorter": "^6.3.1", "openapi-typescript-codegen": "^0.24.0", "party-js": "^2.2.0", @@ -89,7 +89,7 @@ "react-id-generator": "^3.0.0", "react-infinite-scroll-component": "^6.1.0", "react-lazy-load-image-component": "^1.5.6", - "react-map-gl": "^7.1.5", + "react-map-gl": "^7.1.6", "react-markdown": "^8.0.6", "react-modal": "^3.15.1", "react-redux": "^8.0.4", diff --git a/front/src/common/Map/Layers/OSM.tsx b/front/src/common/Map/Layers/OSM.tsx index 4c0fee68f2c..70ccdedb0a8 100644 --- a/front/src/common/Map/Layers/OSM.tsx +++ b/front/src/common/Map/Layers/OSM.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useEffect, useState } from 'react'; import PropTypes from 'prop-types'; import { Source, LayerProps } from 'react-map-gl/maplibre'; @@ -34,7 +34,7 @@ export function genOSMLayerProps( const osmStyle = getMapStyle(mapStyle); return osmStyle.map((layer) => ({ ...layer, - key: layer.id, + key: `${layer.id}-${mapStyle}`, id: `osm/${layer.id}`, layerOrder, })); @@ -47,11 +47,19 @@ export function genOSMLayers(mapStyle: string, layerOrder?: number) { function OSM(props: OSMProps) { const { mapStyle, layerOrder } = props; - return ( + // Hack to full reload layers to avoid glitches + // when switching map style (see #5777) + const [reload, setReload] = useState(true); + useEffect(() => setReload(true), [mapStyle]); + useEffect(() => { + if (reload) setReload(false); + }, [reload]); + + return !reload ? ( {genOSMLayers(mapStyle, layerOrder)} - ); + ) : null; } OSM.propTypes = { diff --git a/front/yarn.lock b/front/yarn.lock index 089e084649f..fa5616178ff 100644 --- a/front/yarn.lock +++ b/front/yarn.lock @@ -1636,7 +1636,7 @@ resolved "https://registry.yarnpkg.com/@mapbox/whoots-js/-/whoots-js-3.1.0.tgz#497c67a1cef50d1a2459ba60f315e448d2ad87fe" integrity sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q== -"@maplibre/maplibre-gl-style-spec@^19.2.1", "@maplibre/maplibre-gl-style-spec@^19.3.2": +"@maplibre/maplibre-gl-style-spec@^19.2.1": version "19.3.2" resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.2.tgz#9c36f0bf4ec54ae8c307d782672903ec44f9eab2" integrity sha512-C2JAk64XUz9v78+bpyTk1zvgjjnDsB8CCjNumyAYdWK2dvdDtILzh1AGBMdS/llX3KaHjGYxAE5wOwfdwq4Pog== @@ -1648,6 +1648,18 @@ rw "^1.3.3" sort-object "^3.0.3" +"@maplibre/maplibre-gl-style-spec@^19.3.3": + version "19.3.3" + resolved "https://registry.yarnpkg.com/@maplibre/maplibre-gl-style-spec/-/maplibre-gl-style-spec-19.3.3.tgz#a106248bd2e25e77c963a362aeaf630e00f924e9" + integrity sha512-cOZZOVhDSulgK0meTsTkmNXb1ahVvmTmWmfx9gRBwc6hq98wS9JP35ESIoNq3xqEan+UN+gn8187Z6E4NKhLsw== + dependencies: + "@mapbox/jsonlint-lines-primitives" "~2.0.2" + "@mapbox/unitbezier" "^0.0.1" + json-stringify-pretty-compact "^3.0.0" + minimist "^1.2.8" + rw "^1.3.3" + sort-object "^3.0.3" + "@math.gl/web-mercator@^3.5.5": version "3.6.3" resolved "https://registry.yarnpkg.com/@math.gl/web-mercator/-/web-mercator-3.6.3.tgz#ef91168e030eecffc788618d686e8a6c1d7a0bf8" @@ -3888,7 +3900,7 @@ resolved "https://registry.yarnpkg.com/@types/find-cache-dir/-/find-cache-dir-3.2.1.tgz#7b959a4b9643a1e6a1a5fe49032693cc36773501" integrity sha512-frsJrz2t/CeGifcu/6uRo4b+SzAwT4NYCVPu1GN8IB9XTzrpPkGuV0tmh9mN+/L0PklAlsC3u5Fxt0ju00LXIw== -"@types/geojson@*", "@types/geojson@^7946.0.11": +"@types/geojson@*": version "7946.0.11" resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.11.tgz#012c17cb2256ad8de78560da851ab914a7b9b40e" integrity sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg== @@ -3898,6 +3910,11 @@ resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.8.tgz#30744afdb385e2945e22f3b033f897f76b1f12ca" integrity sha512-1rkryxURpr6aWP7R786/UQOkJ3PcpQiWkAXBmdWc7ryFWqN6a4xfK7BtjXvFBKO9LjQ+MWQSWxYeZX1OApnArA== +"@types/geojson@^7946.0.13": + version "7946.0.13" + resolved "https://registry.yarnpkg.com/@types/geojson/-/geojson-7946.0.13.tgz#e6e77ea9ecf36564980a861e24e62a095988775e" + integrity sha512-bmrNrgKMOhM3WsafmbGmC+6dsF2Z308vLFsQ3a/bT8X8Sv5clVYpPars/UPq+sAaJP+5OoLAYgwbkS5QEJdLUQ== + "@types/glob@^7.1.3": version "7.2.0" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.2.0.tgz#bc1b5bf3aa92f25bd5dd39f35c57361bdce5b2eb" @@ -3990,15 +4007,20 @@ dependencies: "@types/geojson" "*" -"@types/mapbox__point-geometry@*", "@types/mapbox__point-geometry@^0.1.2": +"@types/mapbox__point-geometry@*": version "0.1.2" resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.2.tgz#488a9b76e8457d6792ea2504cdd4ecdd9860a27e" integrity sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA== -"@types/mapbox__vector-tile@^1.3.1": - version "1.3.1" - resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.1.tgz#938f013caccfc924344fd94f2834744d411d0f07" - integrity sha512-RpwGE57xM4a/YCH6XWzfcPVRPAu/jiCll0bEGRn6a4iubN2k4xZizskQoRj8fuXyo9BpI7F3bwz3uxs0pWbGNw== +"@types/mapbox__point-geometry@^0.1.4": + version "0.1.4" + resolved "https://registry.yarnpkg.com/@types/mapbox__point-geometry/-/mapbox__point-geometry-0.1.4.tgz#0ef017b75eedce02ff6243b4189210e2e6d5e56d" + integrity sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA== + +"@types/mapbox__vector-tile@^1.3.3": + version "1.3.4" + resolved "https://registry.yarnpkg.com/@types/mapbox__vector-tile/-/mapbox__vector-tile-1.3.4.tgz#ad757441ef1d34628d9e098afd9c91423c1f8734" + integrity sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg== dependencies: "@types/geojson" "*" "@types/mapbox__point-geometry" "*" @@ -4079,11 +4101,16 @@ resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.0.tgz#2f8bb441434d163b35fb8ffdccd7138927ffb8c0" integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA== -"@types/pbf@*", "@types/pbf@^3.0.3": +"@types/pbf@*": version "3.0.3" resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.3.tgz#7983338f5a3f83f8b3449f2217a167749c3f5089" integrity sha512-hw6bDMjvm+QTvEC+pRLpnTknQXoPu8Fnf+A+zX9HB7j/7RfYajFSbdukabo3adPwvvEHhIMafQl0R0Tpej7clQ== +"@types/pbf@^3.0.4": + version "3.0.5" + resolved "https://registry.yarnpkg.com/@types/pbf/-/pbf-3.0.5.tgz#a9495a58d8c75be4ffe9a0bd749a307715c07404" + integrity sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA== + "@types/pretty-hrtime@^1.0.0": version "1.0.1" resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601" @@ -4191,10 +4218,10 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-2.0.1.tgz#20f18294f797f2209b5f65c8e3b5c8e8261d127c" integrity sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw== -"@types/supercluster@^7.1.1": - version "7.1.1" - resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-7.1.1.tgz#b7bd11dc793c1e658d0549ead4a93e594a8fb478" - integrity sha512-dNK02GO1UApgo+1KpY4jOfm3uWb2eBCMB/VMM2y8cMoF49FiqVVcOawEg19wxYcaX7SvEs370incOuFtFGrVLg== +"@types/supercluster@^7.1.3": + version "7.1.3" + resolved "https://registry.yarnpkg.com/@types/supercluster/-/supercluster-7.1.3.tgz#1a1bc2401b09174d9c9e44124931ec7874a72b27" + integrity sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA== dependencies: "@types/geojson" "*" @@ -9323,10 +9350,10 @@ map-or-similar@^1.5.0: resolved "https://registry.yarnpkg.com/map-or-similar/-/map-or-similar-1.5.0.tgz#6de2653174adfb5d9edc33c69d3e92a1b76faf08" integrity sha512-0aF7ZmVon1igznGI4VS30yugpduQW3y3GkcgGJOp7d8x8QrizhigUxjI/m2UojsXXto+jLAH3KSz+xOJTiORjg== -maplibre-gl@^3.3.0: - version "3.4.0" - resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-3.4.0.tgz#e0f48b658a983a0339a4f85eb4c41c95df2d33a2" - integrity sha512-5Q36HD2mJoPcd85O2wIDq2t6kl9KMBpITO12A9wPKpQ6ieYKKf5Dp4U/XNjmZWtSTIX2hnx+OwlInkAVLdav6Q== +maplibre-gl@^3.6.1: + version "3.6.1" + resolved "https://registry.yarnpkg.com/maplibre-gl/-/maplibre-gl-3.6.1.tgz#44d55c6376fc500569933a1037a1ac5500eb1909" + integrity sha512-XQpLkNTD6WYJXqF7vTxgHbAyShoZMm5o8fohXCn9PC/S/g3zBk92m7GUsN6KfuECh2rO01uiYbSNCSURkOODyQ== dependencies: "@mapbox/geojson-rewind" "^0.5.2" "@mapbox/jsonlint-lines-primitives" "^2.0.2" @@ -9335,12 +9362,12 @@ maplibre-gl@^3.3.0: "@mapbox/unitbezier" "^0.0.1" "@mapbox/vector-tile" "^1.3.1" "@mapbox/whoots-js" "^3.1.0" - "@maplibre/maplibre-gl-style-spec" "^19.3.2" - "@types/geojson" "^7946.0.11" - "@types/mapbox__point-geometry" "^0.1.2" - "@types/mapbox__vector-tile" "^1.3.1" - "@types/pbf" "^3.0.3" - "@types/supercluster" "^7.1.1" + "@maplibre/maplibre-gl-style-spec" "^19.3.3" + "@types/geojson" "^7946.0.13" + "@types/mapbox__point-geometry" "^0.1.4" + "@types/mapbox__vector-tile" "^1.3.3" + "@types/pbf" "^3.0.4" + "@types/supercluster" "^7.1.3" earcut "^2.2.4" geojson-vt "^3.2.1" gl-matrix "^3.4.3" @@ -11232,7 +11259,7 @@ react-lifecycles-compat@^3.0.0, react-lifecycles-compat@^3.0.4: resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362" integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA== -react-map-gl@^7.1.5: +react-map-gl@^7.1.6: version "7.1.6" resolved "https://registry.yarnpkg.com/react-map-gl/-/react-map-gl-7.1.6.tgz#4ea239cd49493cfc9ed15aa52436b024c757c0a9" integrity sha512-9XbrvpFF67Fyi+e6vRLJFnGpo3UF6ZHifIa8cS/wUYSsnv9sVyzGsN++FJy57zkz3Jh3kmf0xKZemR8K0FZLVw==