MapConductorMapConductor React SDK의 각 모듈을 갱신했습니다. npm 상의 21개 패키지 중 19개가 움직였습니다. 대부분은 의존의 갱신이지만, MapLibre 주변에 2개, 밟으면 원인을 알기 어려운 불량의 수정이 들어 있습니다.
버전은 맞추지 않았습니다. react-for-maplibre 와 react-for-openlayers 가 0.2.2, react-icons・react-kml 은 그대로 두고, 나머지가 0.2.1 입니다. 0.2.0 때처럼 전부를 같은 숫자로 하는 것은 그만두었습니다. 내용이 바뀌지 않은 패키지의 판만 올려도, 이용하는 쪽에는 「무언가가 바뀌었다」고밖에 전해지지 않기 때문입니다.
지도가 배경색만 남고, 게다가 오류가 나오지 않는다
react-for-maplibre 0.2.2 의 본제입니다.
MapLibre GL JS v6은 Web Worker를 별도 파일로 배포하고, 그 URL을 자신의 import.meta.url 에서 조립합니다. 번들러를 통과시키면 이 값은 빌드 시에 접혀 들어가고(Rspack이라면 file:// 경로, Vite라면 사전 번들 대상), worker의 실제 파일은 어디에도 출력되지 않으므로 해결에 실패합니다.
성가신 것은 실패해도 예외가 날아가지 않는다 는 점입니다. new Worker("") 같은 것이 조용히 만들어지고, 타일 요청이 한 건도 나가지 않은 채 멈춥니다. 화면에 나오는 것은 배경색뿐인 지도입니다. 네트워크 패널에서 .pbf 의 요청이 0건이라면, 이 증상이라고 생각해 주세요.
0.2.2는, 묶은 worker를 패키지에 동봉하고, 최초의 지도를 생성하는 시점에 자동으로 등록합니다. 설정은 필요 없습니다. Vite에서도 webpack / Rspack에서도, dev・본번 빌드 어느 쪽에서도 같습니다.
예외는 하나, worker를 자체 URL에서 배포하는 경우(공유 CDN이나, 이미 출력하고 있는 빌드)입니다. 최초의 지도를 생성하기 전에 setMapLibreWorkerUrl(url) 을 호출하면, 동봉 worker는 건너뛰고, 다운로드도 되지 않습니다.
import { setMapLibreWorkerUrl } from '@mapconductor/react-for-maplibre';
setMapLibreWorkerUrl('https://cdn.example.com/maplibre-worker.mjs');덧붙여 Vite의 dev 서버는 동봉 worker를 변환 파이프라인에 통과시키기 때문에, /@vite/client 의 import가 주입되고 파일 크기도 부풉니다(약 478KB → 약 2.8MB). 겉보기에는 불온하지만 동작에 영향은 없고, 본번 빌드에서는 순수한 애셋으로서 출력됩니다.
worker의 코드를 Blob URL로 만들어 넘기는 방법은 v6에서는 동작하지 않습니다. worker 자체는 오류 없이 기동하지만, 역시 타일 요청이 한 건도 나가지 않습니다. 실제 파일로서 배포할 필요가 있습니다.
onMapLoaded 가 한 번도 발화하지 않는다
마찬가지로 react-for-maplibre 0.2.2 입니다.
MapLibreProvider.initialize() 는 map.once('load') 를 await 한 뒤에 컨트롤러를 생성합니다. 즉 컨트롤러가 생긴 시점에 load는 끝나 있고, setupEventListeners 가 거는 on('load') 는 두 번 다시 발화하지 않습니다.
생성자에서의 「초기화 완료인지」의 판정이 그 대신이었을 터였지만, 기능하고 있지 않았습니다. loaded() 도 isStyleLoaded() 도 load 직후에는 false 를 반환하기 때문입니다. MapLibre v6의 isStyleLoaded() 는 Style.loaded() 를 호출하고, 모든 tileManager의 완료까지 보러 갑니다.
0.2.2에서 고쳤습니다. onMapLoaded 를 쓰고 있던 경우, 그때까지는 한 번도 불리지 않았습니다.
js-sdk-core 0.2.1 ── 아이콘의 종류가 많으면 Service Worker가 떨어진다
타일을 배포하는 Service Worker에는, 마커의 아이콘을 비트맵으로 넘기고 있습니다. 넘길 것을 하나씩 모아 마지막에 한꺼번에 보내는 만듦새였으므로, 캐시가 가지고 있는 수보다 많은 종류의 아이콘을 쓰면, 먼저 모은 것은 보내는 시점에 이미 해제되어 있었습니다. 해제된 ImageBitmap 을 structured clone에 통과시키면 DataCloneError 가 날아가, Service Worker의 등록째로 떨어집니다.
등록이 떨어지면 타일이 한 장도 오지 않으므로, 증상은 「지도가 나오지 않는다」입니다. 게다가 아이콘의 종류가 캐시의 크기를 넘을 때까지 재현하지 않으므로, 손에서는 움직이던 것이 본번에서 멈춘다, 는 식으로 나옵니다.
고치는 법은 캐시를 크게 하는 것이 아닙니다. 소유권을 나눴습니다 ── 보내는 쪽은 자신의 사본을 가지고, 다 보내고 나서 자기 몫만 해제합니다. 캐시가 가지고 있는 것에는 손대지 않습니다.
TomTom이 MapLibre를 2개 안지 않게 되었다
0.2.0에서는 react-for-tomtom 만 maplibre-gl 을 5.x로 두고 있었습니다. @tomtom-org/maps-sdk 가 maplibre-gl@^5.24.0 에 의존하고 있었기 때문이며, 6.x로 올리면 MapLibre가 2개 들어가, TomTom SDK가 상정하고 있지 않은 map 객체를 넘기게 되기 때문입니다.
TomTom 쪽이 0.51.5에서 maplibre-gl@^6.4.0 으로 옮겼습니다. react-for-tomtom 0.2.1 은 이에 맞춰 ^6.6.0 으로 해 두었습니다. react-for-maplibre・react-for-maptiler 와 같은 MapLibre를 공유하게 되어, 0.2.0의 주기는 필요 없어졌습니다.
부산물로서, react-for-tomtom 은 Node의 ESM 해결기에서 읽을 수 있게 되었습니다. 0.2.0에서는 읽히지 않았고, 이유는 「maplibre-gl/package.json 을 import attribute 없이 읽는다」였습니다. 빈 프로젝트에 공개된 패키지를 넣어 확인하고 있습니다.
import | require() | |
|---|---|---|
react-for-tomtom 0.2.0 | no | no |
react-for-tomtom 0.2.1 | yes | no |
require() 가 통하지 않는 것은 maplibre-gl v6이 ESM만이고 CommonJS의 입구를 가지지 않기 때문이며, 이것은 react-for-maplibre・react-for-maptiler 와 같은 이유입니다. 이 3개는 ESM으로 써 주세요.
내용이 바뀌지 않은 0.2.1이 4개 있습니다
js-sdk-react・react-geojson・react-heatmap・react-marker-clustering 의 0.2.1은, JavaScript가 0.2.0과 동일합니다. 움직인 것은 패키지에 동봉하고 있는 빌드 정의뿐이고, web의 빌드는 그것을 읽지 않습니다. 서둘러 올릴 이유는 없지만, 올려도 해는 없습니다.
지도 SDK의 갱신
선언 범위 내의 최신에 맞추고 있습니다. 움직인 것은 다음과 같습니다.
| 의존 | 0.2.0 | 이번 |
|---|---|---|
mapbox-gl | ^3.15.0 | ^3.29.0 |
maplibre-gl | ^6.0.0 | ^6.6.0 |
cesium | ^1.131.0 | ^1.144.0 |
ol | ^10.2.1 | ^10.10.0 |
@arcgis/core | ^5.1.16 | ^5.1.20 |
@tomtom-org/maps-sdk | ^0.51.0 | ^0.51.5 |
azure-maps-control | ^3.7.0 | ^3.7.4 |
@turf/turf | ^7.3.5 | ^7.4.0 |
그대로 둔 것은 leaflet ^1.9.4, @googlemaps/js-api-loader ^2.1.1, mappls-web-maps ^3.8.1 의 3개로, 어느 것이나 상류에 움직임이 없습니다. React는 peerDependencies가 ^18.0.0 || ^19.0.0 인 채이고, 바꾼 것은 개발 시에 쓰는 판(19.2.7 → 19.2.8)뿐입니다.
패키지와, 각각이 쓰는 지도 SDK
HERE・Apple MapKit JS・Longdo 의 3개가 의존에 지도 SDK를 가지지 않는 것은, SDK가 npm으로 배포되고 있지 않기 때문입니다. 실행 시에 벤더의 CDN에서 읽히므로, 실제로 동작하는 버전은 벤더가 배포하고 있는 것이 됩니다.
올리는 법
npm install @mapconductor/js-sdk-core@latest @mapconductor/js-sdk-react@latest \ @mapconductor/react-for-maplibre@latest
js-sdk-core 도 0.2.1이 되었습니다. 위의 Service Worker의 수정이 들어 있으므로, 마커의 아이콘을 여러 종류 쓰고 있다면, 이것은 올려 주세요.
ESM・CommonJS・SSR의 취급은, 위의 react-for-tomtom 을 제외하고 0.2.0에서 바뀌지 않았습니다. 어느 패키지가 Node의 해결기에서 읽히고 읽히지 않는지는 React SDK 0.2.0 기사 에 일람이 있습니다. 각 패키지는 각각 독립된 저장소에 있습니다. github.com/MapConductor 를 봐 주세요.