@kystverket/styrbord-kart 1.0.0 → 1.0.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +79 -13
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -70,20 +70,86 @@ Styrbord Kart har følgende peer dependencies som må være tilgjengelige i appl
|
|
|
70
70
|
- `terra-draw-maplibre-gl-adapter`
|
|
71
71
|
- `geojson`
|
|
72
72
|
|
|
73
|
-
### maplibre-gl v6
|
|
73
|
+
### maplibre-gl v6: oppsett av worker
|
|
74
74
|
|
|
75
|
-
maplibre-gl
|
|
76
|
-
`
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
75
|
+
Fra og med v6 må applikasjonen selv fortelle maplibre-gl hvor worker-filen ligger. maplibre-gl
|
|
76
|
+
leter etter `maplibre-gl-worker.mjs` ved siden av sin egen fil, men når en bundler har pakket
|
|
77
|
+
maplibre-gl inn i en egen chunk, ligger det ingen worker der. Kartet får da 404 på
|
|
78
|
+
`maplibre-gl-worker.mjs` og tegner verken data eller bakgrunnskart. Styrbord Kart kan ikke løse
|
|
79
|
+
dette for deg, fordi det er applikasjonens bundler som bestemmer hvor filene havner.
|
|
80
|
+
|
|
81
|
+
Løsningen er å kalle `setWorkerUrl()` én gang, før det første kartet opprettes. Workeren
|
|
82
|
+
importerer `maplibre-gl-shared.mjs` med relativ sti, så begge filene må ende opp i samme mappe,
|
|
83
|
+
eller være bundlet sammen. Hvordan du får til det, avhenger av bundleren. Se også
|
|
84
|
+
[MapLibre sin installasjonsguide](https://maplibre.org/maplibre-gl-js/docs/).
|
|
85
|
+
|
|
86
|
+
Dette gjelder bare v6. I v4 og v5 er workeren bygget inn i maplibre-gl.
|
|
87
|
+
|
|
88
|
+
#### Vite
|
|
89
|
+
|
|
90
|
+
Med `?worker&url` bundler Vite workeren og filen den importerer til én fil, både i dev og i
|
|
91
|
+
produksjonsbygg. Bruk ikke `?url` alene, for da mangler `maplibre-gl-shared.mjs` i bygget.
|
|
92
|
+
|
|
93
|
+
```ts
|
|
94
|
+
// main.tsx (eller et annet sted som kjører før kartet vises)
|
|
95
|
+
import { setWorkerUrl } from "maplibre-gl";
|
|
96
|
+
import maplibreWorkerUrl from "maplibre-gl/dist/maplibre-gl-worker.mjs?worker&url";
|
|
97
|
+
|
|
98
|
+
setWorkerUrl(maplibreWorkerUrl);
|
|
99
|
+
```
|
|
100
|
+
|
|
101
|
+
Med dette oppsettet trengs ikke `optimizeDeps.exclude: ["maplibre-gl"]`, som tidligere versjoner av
|
|
102
|
+
denne README-en anbefalte. Det løste bare problemet i `vite dev`, ikke i produksjonsbygget.
|
|
103
|
+
|
|
104
|
+
#### Next.js med Turbopack
|
|
105
|
+
|
|
106
|
+
Turbopack legger ut worker-filen, men ikke `maplibre-gl-shared.mjs` som den importerer. Kopier
|
|
107
|
+
derfor begge filene til `public/` før dev og build, for eksempel med et lite skript:
|
|
81
108
|
|
|
82
109
|
```js
|
|
83
|
-
//
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
110
|
+
// scripts/copy-maplibre-worker.mjs
|
|
111
|
+
import { cpSync, mkdirSync } from "node:fs";
|
|
112
|
+
|
|
113
|
+
const dir = "public/maplibre";
|
|
114
|
+
mkdirSync(dir, { recursive: true });
|
|
115
|
+
for (const file of ["maplibre-gl-worker.mjs", "maplibre-gl-shared.mjs"]) {
|
|
116
|
+
cpSync(`node_modules/maplibre-gl/dist/${file}`, `${dir}/${file}`);
|
|
117
|
+
}
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
```json
|
|
121
|
+
// package.json
|
|
122
|
+
"scripts": {
|
|
123
|
+
"predev": "node scripts/copy-maplibre-worker.mjs",
|
|
124
|
+
"prebuild": "node scripts/copy-maplibre-worker.mjs"
|
|
125
|
+
}
|
|
89
126
|
```
|
|
127
|
+
|
|
128
|
+
Legg `public/maplibre/` i `.gitignore`, og pek på filene fra en klientkomponent:
|
|
129
|
+
|
|
130
|
+
```ts
|
|
131
|
+
"use client";
|
|
132
|
+
import { setWorkerUrl } from "maplibre-gl";
|
|
133
|
+
|
|
134
|
+
setWorkerUrl("/maplibre/maplibre-gl-worker.mjs");
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
Hvis applikasjonen har middleware eller en proxy som beskytter ruter, må `/maplibre/` slippes
|
|
138
|
+
gjennom uten innlogging.
|
|
139
|
+
|
|
140
|
+
#### webpack 5
|
|
141
|
+
|
|
142
|
+
```ts
|
|
143
|
+
import { setWorkerUrl } from "maplibre-gl";
|
|
144
|
+
|
|
145
|
+
setWorkerUrl(
|
|
146
|
+
new URL(
|
|
147
|
+
"maplibre-gl/dist/maplibre-gl-worker.mjs",
|
|
148
|
+
import.meta.url,
|
|
149
|
+
).toString(),
|
|
150
|
+
);
|
|
151
|
+
```
|
|
152
|
+
|
|
153
|
+
#### Content Security Policy
|
|
154
|
+
|
|
155
|
+
Hvis applikasjonen har en CSP, må den tillate `worker-src 'self'` og `img-src data: blob: 'self'`.
|