├── .gitignore ├── LICENSE ├── README.md ├── react-example ├── .gitignore ├── README.md ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── styles │ │ └── dark.json ├── src │ ├── app.tsx │ ├── components │ │ └── you-are-here.tsx │ ├── index.css │ ├── lib │ │ ├── api.ts │ │ └── constants.ts │ ├── main.tsx │ └── vite-env.d.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── svelte-example ├── .gitignore ├── .vscode │ └── extensions.json ├── README.md ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public │ └── styles │ │ └── dark.json ├── src │ ├── app.css │ ├── app.svelte │ ├── components │ │ └── you-are-here.svelte │ ├── lib │ │ ├── api.ts │ │ └── constants.ts │ ├── main.ts │ └── vite-env.d.ts ├── svelte.config.js ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts ├── vanilla-example ├── README.md ├── app.js ├── index.html ├── styles.css └── styles │ └── dark.json ├── vanilla-leaflet-example ├── README.md ├── app.js ├── index.html ├── styles.css └── styles │ └── dark.json └── vue-example ├── .editorconfig ├── .gitignore ├── .prettierrc.json ├── .vscode └── extensions.json ├── README.md ├── env.d.ts ├── eslint.config.js ├── index.html ├── package.json ├── pnpm-lock.yaml ├── public └── styles │ └── dark.json ├── src ├── app.vue ├── components │ └── you-are-here.vue ├── lib │ ├── api.ts │ └── constants.ts └── main.ts ├── tsconfig.app.json ├── tsconfig.json ├── tsconfig.node.json └── vite.config.ts /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | lerna-debug.log* 8 | .pnpm-debug.log* 9 | 10 | # Diagnostic reports (https://nodejs.org/api/report.html) 11 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json 12 | 13 | # Runtime data 14 | pids 15 | *.pid 16 | *.seed 17 | *.pid.lock 18 | 19 | # Directory for instrumented libs generated by jscoverage/JSCover 20 | lib-cov 21 | 22 | # Coverage directory used by tools like istanbul 23 | coverage 24 | *.lcov 25 | 26 | # nyc test coverage 27 | .nyc_output 28 | 29 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files) 30 | .grunt 31 | 32 | # Bower dependency directory (https://bower.io/) 33 | bower_components 34 | 35 | # node-waf configuration 36 | .lock-wscript 37 | 38 | # Compiled binary addons (https://nodejs.org/api/addons.html) 39 | build/Release 40 | 41 | # Dependency directories 42 | node_modules/ 43 | jspm_packages/ 44 | 45 | # Snowpack dependency directory (https://snowpack.dev/) 46 | web_modules/ 47 | 48 | # TypeScript cache 49 | *.tsbuildinfo 50 | 51 | # Optional npm cache directory 52 | .npm 53 | 54 | # Optional eslint cache 55 | .eslintcache 56 | 57 | # Optional stylelint cache 58 | .stylelintcache 59 | 60 | # Microbundle cache 61 | .rpt2_cache/ 62 | .rts2_cache_cjs/ 63 | .rts2_cache_es/ 64 | .rts2_cache_umd/ 65 | 66 | # Optional REPL history 67 | .node_repl_history 68 | 69 | # Output of 'npm pack' 70 | *.tgz 71 | 72 | # Yarn Integrity file 73 | .yarn-integrity 74 | 75 | # dotenv environment variable files 76 | .env 77 | .env.development.local 78 | .env.test.local 79 | .env.production.local 80 | .env.local 81 | 82 | # parcel-bundler cache (https://parceljs.org/) 83 | .cache 84 | .parcel-cache 85 | 86 | # Next.js build output 87 | .next 88 | out 89 | 90 | # Nuxt.js build / generate output 91 | .nuxt 92 | dist 93 | 94 | # Gatsby files 95 | .cache/ 96 | # Comment in the public line in if your project uses Gatsby and not Next.js 97 | # https://nextjs.org/blog/next-9-1#public-directory-support 98 | # public 99 | 100 | # vuepress build output 101 | .vuepress/dist 102 | 103 | # vuepress v2.x temp and cache directory 104 | .temp 105 | .cache 106 | 107 | # Docusaurus cache and generated files 108 | .docusaurus 109 | 110 | # Serverless directories 111 | .serverless/ 112 | 113 | # FuseBox cache 114 | .fusebox/ 115 | 116 | # DynamoDB Local files 117 | .dynamodb/ 118 | 119 | # TernJS port file 120 | .tern-port 121 | 122 | # Stores VSCode versions used for testing VSCode extensions 123 | .vscode-test 124 | 125 | # yarn v2 126 | .yarn/cache 127 | .yarn/unplugged 128 | .yarn/build-state.yml 129 | .yarn/install-state.gz 130 | .pnp.* 131 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License Copyright (c) 2024 w3cj 2 | 3 | Permission is hereby granted, free of 4 | charge, to any person obtaining a copy of this software and associated 5 | documentation files (the "Software"), to deal in the Software without 6 | restriction, including without limitation the rights to use, copy, modify, merge, 7 | publish, distribute, sublicense, and/or sell copies of the Software, and to 8 | permit persons to whom the Software is furnished to do so, subject to the 9 | following conditions: 10 | 11 | The above copyright notice and this permission notice 12 | (including the next paragraph) shall be included in all copies or substantial 13 | portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF 16 | ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 17 | MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO 18 | EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR 19 | OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING 20 | FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 21 | THE SOFTWARE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + MapLibre GL JS Examples 2 | 3 | Basic examples using [OpenFreeMap.org](https://openfreemap.org/) tiles with [MapLibre GL JS](https://maplibre.org/maplibre-gl-js/docs/) libraries. 4 | 5 | * Each example: 6 | 1. Loads the base MapLibre GL JS map 7 | * style url set to `https://tiles.openfreemap.org/styles/liberty` 8 | * option to set style url to `/styles/dark.json` 9 | * hosted in the public folder of each app 10 | * dark style adapted from maptiler.com basic-v2-dark style 11 | 2. Gets the users location via [http://ip-api.com/json/](http://ip-api.com/json/) 12 | 3. Uses [`map.flyTo`](https://maplibre.org/maplibre-gl-js/docs/API/classes/Map/#flyto) to animate / zoom to the users location 13 | 4. Displays a Popup on the map at the users location 14 | 15 | ## Examples 16 | 17 | * [Vanilla JS / HTML](./vanilla-example/) 18 | * built with core MapLibre GL JS loaded from unpkg cdn 19 | * [React Example](./react-example/) 20 | * built with [@vis.gl/react-maplibre](https://visgl.github.io/react-maplibre/) 21 | * [Vue Example](./vue-example/) 22 | * built with [@indoorequal/vue-maplibre-gl](https://indoorequal.github.io/vue-maplibre-gl/) 23 | * [Svelte Example](./svelte-example/) 24 | * built with [svelte-maplibre](https://github.com/dimfeld/svelte-maplibre) 25 | * [Vanilla JS / HTML + LeafletJS](./vanilla-leaflet-example/) 26 | * same as vanilla-example but uses [leaflet](https://leafletjs.com/) instead -------------------------------------------------------------------------------- /react-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /react-example/README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + @vis.gl/react-maplibre Example 2 | 3 | Built with [@vis.gl/react-maplibre](https://visgl.github.io/react-maplibre/) 4 | 5 | ```sh 6 | pnpm install 7 | pnpm dev 8 | ``` 9 | -------------------------------------------------------------------------------- /react-example/eslint.config.js: -------------------------------------------------------------------------------- 1 | import js from '@eslint/js' 2 | import globals from 'globals' 3 | import reactHooks from 'eslint-plugin-react-hooks' 4 | import reactRefresh from 'eslint-plugin-react-refresh' 5 | import tseslint from 'typescript-eslint' 6 | 7 | export default tseslint.config( 8 | { ignores: ['dist'] }, 9 | { 10 | extends: [js.configs.recommended, ...tseslint.configs.recommended], 11 | files: ['**/*.{ts,tsx}'], 12 | languageOptions: { 13 | ecmaVersion: 2020, 14 | globals: globals.browser, 15 | }, 16 | plugins: { 17 | 'react-hooks': reactHooks, 18 | 'react-refresh': reactRefresh, 19 | }, 20 | rules: { 21 | ...reactHooks.configs.recommended.rules, 22 | 'react-refresh/only-export-components': [ 23 | 'warn', 24 | { allowConstantExport: true }, 25 | ], 26 | }, 27 | }, 28 | ) 29 | -------------------------------------------------------------------------------- /react-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello World React 8 | 9 | 10 |
11 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /react-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "react-example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "tsc -b && vite build", 9 | "lint": "eslint .", 10 | "preview": "vite preview" 11 | }, 12 | "dependencies": { 13 | "@vis.gl/react-maplibre": "1.0.0-alpha.4", 14 | "maplibre-gl": "^4.7.1", 15 | "react": "^18.3.1", 16 | "react-dom": "^18.3.1" 17 | }, 18 | "devDependencies": { 19 | "@eslint/js": "^9.11.1", 20 | "@types/react": "^18.3.10", 21 | "@types/react-dom": "^18.3.0", 22 | "@vitejs/plugin-react": "^4.3.2", 23 | "eslint": "^9.11.1", 24 | "eslint-plugin-react-hooks": "^5.1.0-rc.0", 25 | "eslint-plugin-react-refresh": "^0.4.12", 26 | "globals": "^15.9.0", 27 | "typescript": "^5.5.3", 28 | "typescript-eslint": "^8.7.0", 29 | "vite": "^5.4.8" 30 | } 31 | } 32 | -------------------------------------------------------------------------------- /react-example/public/styles/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "id": "dark", 4 | "name": "Dark", 5 | "sources": { 6 | "openmaptiles": { 7 | "type": "vector", 8 | "url": "https://tiles.openfreemap.org/planet" 9 | } 10 | }, 11 | "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm", 12 | "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", 13 | "layers": [ 14 | { 15 | "id": "Background", 16 | "type": "background", 17 | "layout": { "visibility": "visible" }, 18 | "paint": { 19 | "background-color": [ 20 | "interpolate", 21 | ["exponential", 1], 22 | ["zoom"], 23 | 6, 24 | "hsl(0, 0%, 17%)", 25 | 20, 26 | "hsl(0, 0%, 18%)" 27 | ] 28 | } 29 | }, 30 | { 31 | "id": "Residential", 32 | "type": "fill", 33 | "source": "openmaptiles", 34 | "source-layer": "landuse", 35 | "maxzoom": 14, 36 | "layout": { "visibility": "visible" }, 37 | "paint": { 38 | "fill-color": { 39 | "stops": [ 40 | [2, "hsl(0, 0%, 16%)"], 41 | [14, "hsl(0, 0%, 17%)"] 42 | ] 43 | } 44 | }, 45 | "filter": ["in", "class", "neighbourhood", "residential", "suburb"] 46 | }, 47 | { 48 | "id": "Sand", 49 | "type": "fill", 50 | "source": "openmaptiles", 51 | "source-layer": "landcover", 52 | "minzoom": 8, 53 | "layout": { "visibility": "visible" }, 54 | "paint": { 55 | "fill-antialias": false, 56 | "fill-color": "hsla(83, 77%, 8%, 0.24)", 57 | "fill-opacity": { 58 | "stops": [ 59 | [7, 0.7], 60 | [12, 1] 61 | ] 62 | } 63 | }, 64 | "filter": ["==", "class", "sand"] 65 | }, 66 | { 67 | "id": "Grass", 68 | "type": "fill", 69 | "source": "openmaptiles", 70 | "source-layer": "landcover", 71 | "minzoom": 8, 72 | "layout": { "visibility": "visible" }, 73 | "paint": { 74 | "fill-antialias": false, 75 | "fill-color": "hsla(83, 38%, 12%, 0.6)", 76 | "fill-opacity": { 77 | "stops": [ 78 | [7, 0.7], 79 | [12, 1] 80 | ] 81 | } 82 | }, 83 | "filter": ["==", "class", "grass"] 84 | }, 85 | { 86 | "id": "Wood", 87 | "type": "fill", 88 | "source": "openmaptiles", 89 | "source-layer": "landcover", 90 | "minzoom": 8, 91 | "layout": { "visibility": "visible" }, 92 | "paint": { 93 | "fill-antialias": false, 94 | "fill-color": "hsla(83, 38%, 11%, 0.6)", 95 | "fill-opacity": { 96 | "stops": [ 97 | [7, 0.7], 98 | [12, 1] 99 | ] 100 | } 101 | }, 102 | "filter": ["==", "class", "wood"] 103 | }, 104 | { 105 | "id": "Water", 106 | "type": "fill", 107 | "source": "openmaptiles", 108 | "source-layer": "water", 109 | "layout": { "visibility": "visible" }, 110 | "paint": { 111 | "fill-color": "hsl(205, 36%, 21%)", 112 | "fill-opacity": ["match", ["get", "intermittent"], 1, 0.7, 1] 113 | }, 114 | "filter": ["all", ["!=", "brunnel", "tunnel"]] 115 | }, 116 | { 117 | "id": "River", 118 | "type": "line", 119 | "source": "openmaptiles", 120 | "source-layer": "waterway", 121 | "layout": { "visibility": "visible" }, 122 | "paint": { 123 | "line-color": "hsl(205, 36%, 21%)", 124 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.7, 1], 125 | "line-width": { 126 | "stops": [ 127 | [9, 1], 128 | [18, 3] 129 | ] 130 | } 131 | }, 132 | "filter": ["!=", "brunnel", "tunnel"] 133 | }, 134 | { 135 | "id": "River intermittent", 136 | "type": "line", 137 | "source": "openmaptiles", 138 | "source-layer": "waterway", 139 | "layout": { "visibility": "visible" }, 140 | "paint": { 141 | "line-color": "hsl(205, 36%, 21%)", 142 | "line-dasharray": [2, 1], 143 | "line-opacity": 1, 144 | "line-width": { 145 | "stops": [ 146 | [9, 1], 147 | [18, 3] 148 | ] 149 | } 150 | }, 151 | "filter": ["==", "intermittent", 1] 152 | }, 153 | { 154 | "id": "Transit tunnel", 155 | "type": "line", 156 | "source": "openmaptiles", 157 | "source-layer": "transportation", 158 | "minzoom": 4, 159 | "layout": { 160 | "line-cap": "butt", 161 | "line-join": "miter", 162 | "visibility": "visible" 163 | }, 164 | "paint": { 165 | "line-color": "hsl(239, 12%, 18%)", 166 | "line-dasharray": [3, 3], 167 | "line-opacity": 0.5, 168 | "line-width": { 169 | "stops": [ 170 | [14, 0.5], 171 | [16, 1.2], 172 | [18, 2] 173 | ] 174 | } 175 | }, 176 | "filter": ["all", ["==", "brunnel", "tunnel"], ["==", "class", "transit"]] 177 | }, 178 | { 179 | "id": "Bridge", 180 | "type": "fill", 181 | "source": "openmaptiles", 182 | "source-layer": "transportation", 183 | "layout": { "visibility": "visible" }, 184 | "paint": { "fill-color": "hsl(0, 0%, 18%)", "fill-opacity": 0.7 }, 185 | "filter": ["==", "brunnel", "bridge"] 186 | }, 187 | { 188 | "id": "Pier", 189 | "type": "fill", 190 | "source": "openmaptiles", 191 | "source-layer": "transportation", 192 | "layout": { "visibility": "visible" }, 193 | "paint": { 194 | "fill-antialias": true, 195 | "fill-color": "hsl(0, 0%, 18%)", 196 | "fill-opacity": 1 197 | }, 198 | "metadata": {}, 199 | "filter": ["==", "class", "pier"] 200 | }, 201 | { 202 | "id": "Road network", 203 | "type": "line", 204 | "source": "openmaptiles", 205 | "source-layer": "transportation", 206 | "minzoom": 4, 207 | "layout": { 208 | "line-cap": "round", 209 | "line-join": "round", 210 | "visibility": "visible" 211 | }, 212 | "paint": { 213 | "line-color": "hsl(205, 0%, 27%)", 214 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.5, 1], 215 | "line-width": [ 216 | "interpolate", 217 | ["linear", 2], 218 | ["zoom"], 219 | 4, 220 | 0.5, 221 | 5, 222 | 0.75, 223 | 6, 224 | 1, 225 | 10, 226 | [ 227 | "match", 228 | ["get", "class"], 229 | ["motorway"], 230 | ["match", ["get", "brunnel"], ["bridge"], 0, 2.5], 231 | ["trunk"], 232 | 1.5, 233 | 1 234 | ], 235 | 12, 236 | [ 237 | "match", 238 | ["get", "class"], 239 | ["motorway"], 240 | ["match", ["get", "ramp"], 1, 1, 4], 241 | ["trunk"], 242 | 2, 243 | ["primary"], 244 | 2.5, 245 | ["secondary", "tertiary"], 246 | 2, 247 | ["minor"], 248 | 1, 249 | ["pier", "service", "track"], 250 | 0.5, 251 | 0.5 252 | ], 253 | 14, 254 | [ 255 | "match", 256 | ["get", "class"], 257 | ["motorway"], 258 | ["match", ["get", "ramp"], 1, 5, 6], 259 | ["trunk"], 260 | 3, 261 | ["primary"], 262 | 5, 263 | ["secondary"], 264 | 4, 265 | ["tertiary"], 266 | 3, 267 | ["minor"], 268 | 2, 269 | ["pier", "service", "track"], 270 | 1, 271 | 2 272 | ], 273 | 16, 274 | [ 275 | "match", 276 | ["get", "class"], 277 | ["motorway", "trunk", "primary"], 278 | 8, 279 | ["secondary"], 280 | 7, 281 | ["tertiary"], 282 | 6, 283 | ["minor"], 284 | 4, 285 | ["pier", "service", "track"], 286 | 2, 287 | 4 288 | ], 289 | 20, 290 | [ 291 | "match", 292 | ["get", "class"], 293 | ["motorway", "trunk", "primary"], 294 | 28, 295 | ["secondary"], 296 | 24, 297 | ["tertiary"], 298 | 20, 299 | ["minor", "service", "track", "pier"], 300 | 16, 301 | 16 302 | ] 303 | ] 304 | }, 305 | "filter": ["!in", "class", "bridge", "ferry", "path", "rail", "transit"] 306 | }, 307 | { 308 | "id": "Path", 309 | "type": "line", 310 | "source": "openmaptiles", 311 | "source-layer": "transportation", 312 | "minzoom": 15, 313 | "layout": { 314 | "line-cap": "square", 315 | "line-join": "bevel", 316 | "visibility": "visible" 317 | }, 318 | "paint": { 319 | "line-color": "hsl(205, 0%, 27%)", 320 | "line-dasharray": [1, 1], 321 | "line-width": { 322 | "base": 1.55, 323 | "stops": [ 324 | [15, 0.5], 325 | [16, 1], 326 | [18, 2], 327 | [20, 3], 328 | [22, 4] 329 | ] 330 | } 331 | }, 332 | "filter": ["==", "class", "path"] 333 | }, 334 | { 335 | "id": "Building", 336 | "type": "fill", 337 | "source": "openmaptiles", 338 | "source-layer": "building", 339 | "layout": { "visibility": "visible" }, 340 | "paint": { 341 | "fill-antialias": true, 342 | "fill-color": { 343 | "stops": [ 344 | [13, "hsl(0, 0%, 14%)"], 345 | [16, "hsl(0, 0%, 15%)"] 346 | ] 347 | }, 348 | "fill-opacity": 1 349 | } 350 | }, 351 | { 352 | "id": "Railway", 353 | "type": "line", 354 | "source": "openmaptiles", 355 | "source-layer": "transportation", 356 | "minzoom": 9, 357 | "layout": { "visibility": "visible" }, 358 | "paint": { 359 | "line-color": "hsla(238, 12%, 18%, 0.8)", 360 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.25, 1], 361 | "line-width": [ 362 | "interpolate", 363 | ["linear", 1], 364 | ["zoom"], 365 | 9, 366 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.5], 367 | 12, 368 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.6], 369 | 16, 370 | ["match", ["get", "service"], ["yard", "spur"], 0.75, 2], 371 | 22, 372 | ["match", ["get", "service"], ["yard", "spur"], 1.5, 3] 373 | ] 374 | }, 375 | "filter": ["==", "class", "rail"] 376 | }, 377 | { 378 | "id": "Transit", 379 | "type": "line", 380 | "source": "openmaptiles", 381 | "source-layer": "transportation", 382 | "layout": { "visibility": "visible" }, 383 | "paint": { 384 | "line-color": "hsl(239, 12%, 18%)", 385 | "line-opacity": 0.5, 386 | "line-width": { 387 | "stops": [ 388 | [14, 0.5], 389 | [16, 1.2], 390 | [18, 2] 391 | ] 392 | } 393 | }, 394 | "filter": ["all", ["==", "class", "transit"], ["!=", "brunnel", "tunnel"]] 395 | }, 396 | { 397 | "id": "Aeroway", 398 | "type": "line", 399 | "source": "openmaptiles", 400 | "source-layer": "aeroway", 401 | "minzoom": 10, 402 | "layout": { 403 | "line-cap": "round", 404 | "line-join": "round", 405 | "visibility": "visible" 406 | }, 407 | "paint": { 408 | "line-color": "hsl(205, 0%, 27%)", 409 | "line-opacity": 1, 410 | "line-width": [ 411 | "interpolate", 412 | ["linear", 2], 413 | ["zoom"], 414 | 10, 415 | ["match", ["get", "class"], ["runway"], 1, ["taxiway"], 0.5, 0], 416 | 14, 417 | ["match", ["get", "class"], ["runway"], 3, ["taxiway"], 2, 0], 418 | 16, 419 | ["match", ["get", "class"], ["runway"], 10, ["taxiway"], 6, 0] 420 | ] 421 | } 422 | }, 423 | { 424 | "id": "Airport labels", 425 | "type": "symbol", 426 | "source": "openmaptiles", 427 | "source-layer": "aerodrome_label", 428 | "minzoom": 10, 429 | "layout": { 430 | "text-anchor": "top", 431 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 432 | "text-font": ["Noto Sans Regular"], 433 | "text-max-width": 8, 434 | "text-offset": [0, 0.5], 435 | "text-size": { 436 | "stops": [ 437 | [10, 10], 438 | [14, 12], 439 | [16, 14] 440 | ] 441 | }, 442 | "visibility": "visible" 443 | }, 444 | "paint": { 445 | "text-color": "hsl(83, 0%, 76%)", 446 | "text-halo-blur": 1, 447 | "text-halo-color": "hsl(0, 0%, 0%)", 448 | "text-halo-width": 1.4 449 | }, 450 | "filter": ["has", "iata"] 451 | }, 452 | { 453 | "id": "Station labels", 454 | "type": "symbol", 455 | "source": "openmaptiles", 456 | "source-layer": "poi", 457 | "minzoom": 12, 458 | "layout": { 459 | "text-anchor": "top", 460 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 461 | "text-font": ["Noto Sans Regular"], 462 | "text-max-width": 8, 463 | "text-offset": [0, 0.5], 464 | "text-size": { 465 | "stops": [ 466 | [10, 10], 467 | [14, 12], 468 | [16, 14] 469 | ] 470 | }, 471 | "visibility": "visible" 472 | }, 473 | "paint": { 474 | "text-color": "hsl(83, 0%, 76%)", 475 | "text-halo-blur": 1, 476 | "text-halo-color": "hsl(83, 0%, 0%)", 477 | "text-halo-width": 1.4 478 | }, 479 | "filter": ["all", ["==", "class", "railway"], ["has", "subclass"]] 480 | }, 481 | { 482 | "id": "Road labels", 483 | "type": "symbol", 484 | "source": "openmaptiles", 485 | "source-layer": "transportation_name", 486 | "minzoom": 14, 487 | "layout": { 488 | "symbol-placement": "line", 489 | "symbol-spacing": { 490 | "stops": [ 491 | [13, 250], 492 | [20, 350], 493 | [22, 600] 494 | ] 495 | }, 496 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 497 | "text-font": ["Noto Sans Regular"], 498 | "text-letter-spacing": 0.1, 499 | "text-rotation-alignment": "map", 500 | "text-size": { 501 | "base": 1.4, 502 | "stops": [ 503 | [14, 8], 504 | [17, 10], 505 | [20, 12] 506 | ] 507 | }, 508 | "text-transform": "uppercase", 509 | "visibility": "visible" 510 | }, 511 | "paint": { 512 | "text-color": "hsl(83, 0%, 76%)", 513 | "text-halo-color": "hsl(83, 0%, 0%)", 514 | "text-halo-width": 1 515 | }, 516 | "filter": [ 517 | "all", 518 | ["==", "$type", "LineString"], 519 | ["!in", "class", "aerialway", "ferry", "service"] 520 | ] 521 | }, 522 | { 523 | "id": "Other border", 524 | "type": "line", 525 | "source": "openmaptiles", 526 | "source-layer": "boundary", 527 | "minzoom": 3, 528 | "layout": { "visibility": "visible" }, 529 | "paint": { 530 | "line-color": "hsla(83, 0%, 28%, 0.65)", 531 | "line-dasharray": [2, 1], 532 | "line-width": { 533 | "stops": [ 534 | [4, 0.8], 535 | [11, 1.75], 536 | [18, 2.5] 537 | ] 538 | } 539 | }, 540 | "filter": [ 541 | "all", 542 | ["in", "admin_level", 3, 4, 5, 6, 7, 8, 9, 10], 543 | ["==", "maritime", 0] 544 | ] 545 | }, 546 | { 547 | "id": "Disputed border", 548 | "type": "line", 549 | "source": "openmaptiles", 550 | "source-layer": "boundary", 551 | "minzoom": 0, 552 | "layout": { 553 | "line-cap": "round", 554 | "line-join": "round", 555 | "visibility": "visible" 556 | }, 557 | "paint": { 558 | "line-color": "hsl(0,0%,30%)", 559 | "line-dasharray": [2, 2], 560 | "line-width": { 561 | "stops": [ 562 | [1, 1], 563 | [5, 1.5], 564 | [10, 2] 565 | ] 566 | } 567 | }, 568 | "filter": [ 569 | "all", 570 | ["==", "admin_level", 2], 571 | ["==", "maritime", 0], 572 | ["==", "disputed", 1] 573 | ] 574 | }, 575 | { 576 | "id": "Country border", 577 | "type": "line", 578 | "source": "openmaptiles", 579 | "source-layer": "boundary", 580 | "minzoom": 0, 581 | "layout": { 582 | "line-cap": "round", 583 | "line-join": "round", 584 | "visibility": "visible" 585 | }, 586 | "paint": { 587 | "line-blur": { 588 | "stops": [ 589 | [4, 0.5], 590 | [10, 0] 591 | ] 592 | }, 593 | "line-color": "hsl(0,0%,30%)", 594 | "line-width": { 595 | "stops": [ 596 | [1, 1], 597 | [5, 1.5], 598 | [10, 2] 599 | ] 600 | } 601 | }, 602 | "filter": [ 603 | "all", 604 | ["==", "admin_level", 2], 605 | ["==", "disputed", 0], 606 | ["==", "maritime", 0] 607 | ] 608 | }, 609 | { 610 | "id": "Place labels", 611 | "type": "symbol", 612 | "source": "openmaptiles", 613 | "source-layer": "place", 614 | "minzoom": 0, 615 | "maxzoom": 16, 616 | "layout": { 617 | "symbol-sort-key": ["to-number", ["get", "rank"]], 618 | "text-field": "{name}", 619 | "text-font": ["Noto Sans Regular"], 620 | "text-max-width": 10, 621 | "text-size": [ 622 | "interpolate", 623 | ["linear", 1], 624 | ["zoom"], 625 | 3, 626 | 11, 627 | 8, 628 | ["match", ["get", "class"], "city", 15, 13], 629 | 11, 630 | [ 631 | "match", 632 | ["get", "class"], 633 | "city", 634 | 16, 635 | [ 636 | "suburb", 637 | "neighbourhood", 638 | "quarter", 639 | "hamlet", 640 | "isolated_dwelling" 641 | ], 642 | 10, 643 | 13 644 | ], 645 | 16, 646 | [ 647 | "match", 648 | ["get", "class"], 649 | "city", 650 | 21, 651 | [ 652 | "suburb", 653 | "neighbourhood", 654 | "quarter", 655 | "hamlet", 656 | "isolated_dwelling" 657 | ], 658 | 14, 659 | 16 660 | ] 661 | ], 662 | "visibility": "visible" 663 | }, 664 | "paint": { 665 | "text-color": "hsl(0, 0%, 86%)", 666 | "text-halo-blur": 0, 667 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 668 | "text-halo-width": 2 669 | }, 670 | "filter": [ 671 | "in", 672 | "class", 673 | "hamlet", 674 | "isolated_dwelling", 675 | "neighbourhood", 676 | "province", 677 | "quarter", 678 | "suburb", 679 | "town", 680 | "village" 681 | ] 682 | }, 683 | { 684 | "id": "City labels", 685 | "type": "symbol", 686 | "source": "openmaptiles", 687 | "source-layer": "place", 688 | "maxzoom": 16, 689 | "layout": { 690 | "symbol-sort-key": ["to-number", ["get", "rank"]], 691 | "text-field": "{name:en}", 692 | "text-font": ["Noto Sans Regular"], 693 | "text-max-width": 10, 694 | "text-size": [ 695 | "interpolate", 696 | ["linear", 1], 697 | ["zoom"], 698 | 3, 699 | 11, 700 | 8, 701 | 15, 702 | 11, 703 | 16, 704 | 16, 705 | 21 706 | ], 707 | "visibility": "visible" 708 | }, 709 | "paint": { 710 | "text-color": "hsl(0, 0%, 86%)", 711 | "text-halo-blur": 0, 712 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 713 | "text-halo-width": 2 714 | }, 715 | "filter": ["==", "class", "city"] 716 | }, 717 | { 718 | "id": "Country labels", 719 | "type": "symbol", 720 | "source": "openmaptiles", 721 | "source-layer": "place", 722 | "minzoom": 1, 723 | "maxzoom": 12, 724 | "layout": { 725 | "symbol-sort-key": ["to-number", ["get", "rank"]], 726 | "text-field": "{name:en}", 727 | "text-font": ["Noto Sans Bold"], 728 | "text-max-width": 8, 729 | "text-padding": { 730 | "stops": [ 731 | [1, 0], 732 | [4, 2] 733 | ] 734 | }, 735 | "text-size": [ 736 | "interpolate", 737 | ["linear", 1], 738 | ["zoom"], 739 | 0, 740 | 8, 741 | 1, 742 | 10, 743 | 4, 744 | ["case", [">", ["get", "rank"], 2], 13, 15], 745 | 8, 746 | ["case", [">", ["get", "rank"], 2], 18, 22] 747 | ], 748 | "visibility": "visible" 749 | }, 750 | "paint": { 751 | "text-color": "hsl(0, 0%, 75%)", 752 | "text-halo-blur": 1, 753 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 754 | "text-halo-width": 2 755 | }, 756 | "filter": ["all", ["==", "class", "country"], ["!=", "iso_a2", "VA"]] 757 | }, 758 | { 759 | "id": "Continent labels", 760 | "type": "symbol", 761 | "source": "openmaptiles", 762 | "source-layer": "place", 763 | "maxzoom": 1, 764 | "layout": { 765 | "text-field": "{name:en}", 766 | "text-font": ["Noto Sans Bold"], 767 | "text-justify": "center", 768 | "text-size": { 769 | "stops": [ 770 | [0, 12], 771 | [2, 13] 772 | ] 773 | }, 774 | "text-transform": "uppercase", 775 | "visibility": "visible" 776 | }, 777 | "paint": { 778 | "text-color": "hsl(0, 0%, 75%)", 779 | "text-halo-blur": 1, 780 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 781 | "text-halo-width": 2 782 | }, 783 | "metadata": {}, 784 | "filter": ["==", "class", "continent"] 785 | } 786 | ], 787 | "bearing": 0, 788 | "pitch": 0, 789 | "center": [0, 0], 790 | "zoom": 1 791 | } 792 | -------------------------------------------------------------------------------- /react-example/src/app.tsx: -------------------------------------------------------------------------------- 1 | import { Map } from '@vis.gl/react-maplibre'; 2 | import { middleOfUSA } from './lib/constants'; 3 | import YouAreHere from './components/you-are-here'; 4 | 5 | export default function App() { 6 | return ( 7 | 16 | 17 | 18 | ); 19 | } -------------------------------------------------------------------------------- /react-example/src/components/you-are-here.tsx: -------------------------------------------------------------------------------- 1 | import { useEffect, useState } from "react"; 2 | import { middleOfUSA } from "../lib/constants"; 3 | import { Popup, useMap } from "@vis.gl/react-maplibre"; 4 | import { getLocation } from "../lib/api"; 5 | 6 | export default function YouAreHere() { 7 | const [popupLocation, setPopupLocation] = useState(middleOfUSA); 8 | const { current: map } = useMap(); 9 | 10 | useEffect(() => { 11 | if (!map) return; 12 | (async () => { 13 | const location = await getLocation(); 14 | if (location !== middleOfUSA) { 15 | setPopupLocation(location); 16 | map.flyTo({ center: location, zoom: 8 }); 17 | } 18 | })(); 19 | }, [map]); 20 | 21 | if (!map) return null; 22 | 23 | return ( 24 | 27 |

You are approximately here!

28 | 29 | ); 30 | } -------------------------------------------------------------------------------- /react-example/src/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | } 7 | 8 | #root { 9 | width: 100%; 10 | height: 100%; 11 | } -------------------------------------------------------------------------------- /react-example/src/lib/api.ts: -------------------------------------------------------------------------------- 1 | import { middleOfUSA } from "./constants"; 2 | 3 | export interface LocationResponse { 4 | status: string; 5 | country: string; 6 | countryCode: string; 7 | region: string; 8 | regionName: string; 9 | city: string; 10 | zip: string; 11 | lat: number; 12 | lon: number; 13 | timezone: string; 14 | isp: string; 15 | org: string; 16 | as: string; 17 | query: string; 18 | } 19 | 20 | export async function getLocation() { 21 | try { 22 | const response = await fetch("http://ip-api.com/json/"); 23 | const json = (await response.json() as LocationResponse); 24 | if (typeof json.lat === "number" && typeof json.lon === "number") { 25 | return [json.lon, json.lat]; 26 | } 27 | // eslint-disable-next-line no-empty 28 | } catch {} 29 | return middleOfUSA; 30 | } -------------------------------------------------------------------------------- /react-example/src/lib/constants.ts: -------------------------------------------------------------------------------- 1 | export const middleOfUSA = [-100, 40]; -------------------------------------------------------------------------------- /react-example/src/main.tsx: -------------------------------------------------------------------------------- 1 | import { createRoot } from 'react-dom/client' 2 | import 'maplibre-gl/dist/maplibre-gl.css'; 3 | import './index.css' 4 | import App from './app.tsx' 5 | 6 | createRoot(document.getElementById('root')!).render( 7 | 8 | ) 9 | -------------------------------------------------------------------------------- /react-example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /react-example/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2020", 4 | "useDefineForClassFields": true, 5 | "lib": ["ES2020", "DOM", "DOM.Iterable"], 6 | "module": "ESNext", 7 | "skipLibCheck": true, 8 | 9 | /* Bundler mode */ 10 | "moduleResolution": "bundler", 11 | "allowImportingTsExtensions": true, 12 | "isolatedModules": true, 13 | "moduleDetection": "force", 14 | "noEmit": true, 15 | "jsx": "react-jsx", 16 | 17 | /* Linting */ 18 | "strict": true, 19 | "noUnusedLocals": true, 20 | "noUnusedParameters": true, 21 | "noFallthroughCasesInSwitch": true 22 | }, 23 | "include": ["src"] 24 | } 25 | -------------------------------------------------------------------------------- /react-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { "path": "./tsconfig.app.json" }, 5 | { "path": "./tsconfig.node.json" } 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /react-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "target": "ES2022", 4 | "lib": ["ES2023"], 5 | "module": "ESNext", 6 | "skipLibCheck": true, 7 | 8 | /* Bundler mode */ 9 | "moduleResolution": "bundler", 10 | "allowImportingTsExtensions": true, 11 | "isolatedModules": true, 12 | "moduleDetection": "force", 13 | "noEmit": true, 14 | 15 | /* Linting */ 16 | "strict": true, 17 | "noUnusedLocals": true, 18 | "noUnusedParameters": true, 19 | "noFallthroughCasesInSwitch": true 20 | }, 21 | "include": ["vite.config.ts"] 22 | } 23 | -------------------------------------------------------------------------------- /react-example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import react from '@vitejs/plugin-react' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [react()], 7 | }) 8 | -------------------------------------------------------------------------------- /svelte-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | dist 12 | dist-ssr 13 | *.local 14 | 15 | # Editor directories and files 16 | .vscode/* 17 | !.vscode/extensions.json 18 | .idea 19 | .DS_Store 20 | *.suo 21 | *.ntvs* 22 | *.njsproj 23 | *.sln 24 | *.sw? 25 | -------------------------------------------------------------------------------- /svelte-example/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": ["svelte.svelte-vscode"] 3 | } 4 | -------------------------------------------------------------------------------- /svelte-example/README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + svelte-maplibre Example 2 | 3 | Built with [svelte-maplibre](https://github.com/dimfeld/svelte-maplibre) 4 | 5 | ```sh 6 | pnpm install 7 | pnpm dev 8 | ``` 9 | -------------------------------------------------------------------------------- /svelte-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | Hello World Svelte 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /svelte-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "svelte-example", 3 | "private": true, 4 | "version": "0.0.0", 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "vite build", 9 | "preview": "vite preview", 10 | "check": "svelte-check --tsconfig ./tsconfig.json && tsc -p tsconfig.node.json" 11 | }, 12 | "devDependencies": { 13 | "@sveltejs/vite-plugin-svelte": "^3.1.2", 14 | "@tsconfig/svelte": "^5.0.4", 15 | "svelte": "^4.2.19", 16 | "svelte-check": "^4.0.4", 17 | "tslib": "^2.7.0", 18 | "typescript": "^5.5.3", 19 | "vite": "^5.4.8" 20 | }, 21 | "dependencies": { 22 | "maplibre-gl": "^4.7.1", 23 | "svelte-maplibre": "^0.9.14" 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /svelte-example/pnpm-lock.yaml: -------------------------------------------------------------------------------- 1 | lockfileVersion: '9.0' 2 | 3 | settings: 4 | autoInstallPeers: true 5 | excludeLinksFromLockfile: false 6 | 7 | importers: 8 | 9 | .: 10 | dependencies: 11 | maplibre-gl: 12 | specifier: ^4.7.1 13 | version: 4.7.1 14 | svelte-maplibre: 15 | specifier: ^0.9.14 16 | version: 0.9.14(svelte@4.2.19) 17 | devDependencies: 18 | '@sveltejs/vite-plugin-svelte': 19 | specifier: ^3.1.2 20 | version: 3.1.2(svelte@4.2.19)(vite@5.4.9) 21 | '@tsconfig/svelte': 22 | specifier: ^5.0.4 23 | version: 5.0.4 24 | svelte: 25 | specifier: ^4.2.19 26 | version: 4.2.19 27 | svelte-check: 28 | specifier: ^4.0.4 29 | version: 4.0.5(svelte@4.2.19)(typescript@5.6.3) 30 | tslib: 31 | specifier: ^2.7.0 32 | version: 2.8.0 33 | typescript: 34 | specifier: ^5.5.3 35 | version: 5.6.3 36 | vite: 37 | specifier: ^5.4.8 38 | version: 5.4.9 39 | 40 | packages: 41 | 42 | '@ampproject/remapping@2.3.0': 43 | resolution: {integrity: sha512-30iZtAPgz+LTIYoeivqYo853f02jBYSd5uGnGpkFV0M3xOt9aN73erkgYAmZU43x4VfqcnLxW9Kpg3R5LC4YYw==} 44 | engines: {node: '>=6.0.0'} 45 | 46 | '@esbuild/aix-ppc64@0.21.5': 47 | resolution: {integrity: sha512-1SDgH6ZSPTlggy1yI6+Dbkiz8xzpHJEVAlF/AM1tHPLsf5STom9rwtjE4hKAF20FfXXNTFqEYXyJNWh1GiZedQ==} 48 | engines: {node: '>=12'} 49 | cpu: [ppc64] 50 | os: [aix] 51 | 52 | '@esbuild/android-arm64@0.21.5': 53 | resolution: {integrity: sha512-c0uX9VAUBQ7dTDCjq+wdyGLowMdtR/GoC2U5IYk/7D1H1JYC0qseD7+11iMP2mRLN9RcCMRcjC4YMclCzGwS/A==} 54 | engines: {node: '>=12'} 55 | cpu: [arm64] 56 | os: [android] 57 | 58 | '@esbuild/android-arm@0.21.5': 59 | resolution: {integrity: sha512-vCPvzSjpPHEi1siZdlvAlsPxXl7WbOVUBBAowWug4rJHb68Ox8KualB+1ocNvT5fjv6wpkX6o/iEpbDrf68zcg==} 60 | engines: {node: '>=12'} 61 | cpu: [arm] 62 | os: [android] 63 | 64 | '@esbuild/android-x64@0.21.5': 65 | resolution: {integrity: sha512-D7aPRUUNHRBwHxzxRvp856rjUHRFW1SdQATKXH2hqA0kAZb1hKmi02OpYRacl0TxIGz/ZmXWlbZgjwWYaCakTA==} 66 | engines: {node: '>=12'} 67 | cpu: [x64] 68 | os: [android] 69 | 70 | '@esbuild/darwin-arm64@0.21.5': 71 | resolution: {integrity: sha512-DwqXqZyuk5AiWWf3UfLiRDJ5EDd49zg6O9wclZ7kUMv2WRFr4HKjXp/5t8JZ11QbQfUS6/cRCKGwYhtNAY88kQ==} 72 | engines: {node: '>=12'} 73 | cpu: [arm64] 74 | os: [darwin] 75 | 76 | '@esbuild/darwin-x64@0.21.5': 77 | resolution: {integrity: sha512-se/JjF8NlmKVG4kNIuyWMV/22ZaerB+qaSi5MdrXtd6R08kvs2qCN4C09miupktDitvh8jRFflwGFBQcxZRjbw==} 78 | engines: {node: '>=12'} 79 | cpu: [x64] 80 | os: [darwin] 81 | 82 | '@esbuild/freebsd-arm64@0.21.5': 83 | resolution: {integrity: sha512-5JcRxxRDUJLX8JXp/wcBCy3pENnCgBR9bN6JsY4OmhfUtIHe3ZW0mawA7+RDAcMLrMIZaf03NlQiX9DGyB8h4g==} 84 | engines: {node: '>=12'} 85 | cpu: [arm64] 86 | os: [freebsd] 87 | 88 | '@esbuild/freebsd-x64@0.21.5': 89 | resolution: {integrity: sha512-J95kNBj1zkbMXtHVH29bBriQygMXqoVQOQYA+ISs0/2l3T9/kj42ow2mpqerRBxDJnmkUDCaQT/dfNXWX/ZZCQ==} 90 | engines: {node: '>=12'} 91 | cpu: [x64] 92 | os: [freebsd] 93 | 94 | '@esbuild/linux-arm64@0.21.5': 95 | resolution: {integrity: sha512-ibKvmyYzKsBeX8d8I7MH/TMfWDXBF3db4qM6sy+7re0YXya+K1cem3on9XgdT2EQGMu4hQyZhan7TeQ8XkGp4Q==} 96 | engines: {node: '>=12'} 97 | cpu: [arm64] 98 | os: [linux] 99 | 100 | '@esbuild/linux-arm@0.21.5': 101 | resolution: {integrity: sha512-bPb5AHZtbeNGjCKVZ9UGqGwo8EUu4cLq68E95A53KlxAPRmUyYv2D6F0uUI65XisGOL1hBP5mTronbgo+0bFcA==} 102 | engines: {node: '>=12'} 103 | cpu: [arm] 104 | os: [linux] 105 | 106 | '@esbuild/linux-ia32@0.21.5': 107 | resolution: {integrity: sha512-YvjXDqLRqPDl2dvRODYmmhz4rPeVKYvppfGYKSNGdyZkA01046pLWyRKKI3ax8fbJoK5QbxblURkwK/MWY18Tg==} 108 | engines: {node: '>=12'} 109 | cpu: [ia32] 110 | os: [linux] 111 | 112 | '@esbuild/linux-loong64@0.21.5': 113 | resolution: {integrity: sha512-uHf1BmMG8qEvzdrzAqg2SIG/02+4/DHB6a9Kbya0XDvwDEKCoC8ZRWI5JJvNdUjtciBGFQ5PuBlpEOXQj+JQSg==} 114 | engines: {node: '>=12'} 115 | cpu: [loong64] 116 | os: [linux] 117 | 118 | '@esbuild/linux-mips64el@0.21.5': 119 | resolution: {integrity: sha512-IajOmO+KJK23bj52dFSNCMsz1QP1DqM6cwLUv3W1QwyxkyIWecfafnI555fvSGqEKwjMXVLokcV5ygHW5b3Jbg==} 120 | engines: {node: '>=12'} 121 | cpu: [mips64el] 122 | os: [linux] 123 | 124 | '@esbuild/linux-ppc64@0.21.5': 125 | resolution: {integrity: sha512-1hHV/Z4OEfMwpLO8rp7CvlhBDnjsC3CttJXIhBi+5Aj5r+MBvy4egg7wCbe//hSsT+RvDAG7s81tAvpL2XAE4w==} 126 | engines: {node: '>=12'} 127 | cpu: [ppc64] 128 | os: [linux] 129 | 130 | '@esbuild/linux-riscv64@0.21.5': 131 | resolution: {integrity: sha512-2HdXDMd9GMgTGrPWnJzP2ALSokE/0O5HhTUvWIbD3YdjME8JwvSCnNGBnTThKGEB91OZhzrJ4qIIxk/SBmyDDA==} 132 | engines: {node: '>=12'} 133 | cpu: [riscv64] 134 | os: [linux] 135 | 136 | '@esbuild/linux-s390x@0.21.5': 137 | resolution: {integrity: sha512-zus5sxzqBJD3eXxwvjN1yQkRepANgxE9lgOW2qLnmr8ikMTphkjgXu1HR01K4FJg8h1kEEDAqDcZQtbrRnB41A==} 138 | engines: {node: '>=12'} 139 | cpu: [s390x] 140 | os: [linux] 141 | 142 | '@esbuild/linux-x64@0.21.5': 143 | resolution: {integrity: sha512-1rYdTpyv03iycF1+BhzrzQJCdOuAOtaqHTWJZCWvijKD2N5Xu0TtVC8/+1faWqcP9iBCWOmjmhoH94dH82BxPQ==} 144 | engines: {node: '>=12'} 145 | cpu: [x64] 146 | os: [linux] 147 | 148 | '@esbuild/netbsd-x64@0.21.5': 149 | resolution: {integrity: sha512-Woi2MXzXjMULccIwMnLciyZH4nCIMpWQAs049KEeMvOcNADVxo0UBIQPfSmxB3CWKedngg7sWZdLvLczpe0tLg==} 150 | engines: {node: '>=12'} 151 | cpu: [x64] 152 | os: [netbsd] 153 | 154 | '@esbuild/openbsd-x64@0.21.5': 155 | resolution: {integrity: sha512-HLNNw99xsvx12lFBUwoT8EVCsSvRNDVxNpjZ7bPn947b8gJPzeHWyNVhFsaerc0n3TsbOINvRP2byTZ5LKezow==} 156 | engines: {node: '>=12'} 157 | cpu: [x64] 158 | os: [openbsd] 159 | 160 | '@esbuild/sunos-x64@0.21.5': 161 | resolution: {integrity: sha512-6+gjmFpfy0BHU5Tpptkuh8+uw3mnrvgs+dSPQXQOv3ekbordwnzTVEb4qnIvQcYXq6gzkyTnoZ9dZG+D4garKg==} 162 | engines: {node: '>=12'} 163 | cpu: [x64] 164 | os: [sunos] 165 | 166 | '@esbuild/win32-arm64@0.21.5': 167 | resolution: {integrity: sha512-Z0gOTd75VvXqyq7nsl93zwahcTROgqvuAcYDUr+vOv8uHhNSKROyU961kgtCD1e95IqPKSQKH7tBTslnS3tA8A==} 168 | engines: {node: '>=12'} 169 | cpu: [arm64] 170 | os: [win32] 171 | 172 | '@esbuild/win32-ia32@0.21.5': 173 | resolution: {integrity: sha512-SWXFF1CL2RVNMaVs+BBClwtfZSvDgtL//G/smwAc5oVK/UPu2Gu9tIaRgFmYFFKrmg3SyAjSrElf0TiJ1v8fYA==} 174 | engines: {node: '>=12'} 175 | cpu: [ia32] 176 | os: [win32] 177 | 178 | '@esbuild/win32-x64@0.21.5': 179 | resolution: {integrity: sha512-tQd/1efJuzPC6rCFwEvLtci/xNFcTZknmXs98FYDfGE4wP9ClFV98nyKrzJKVPMhdDnjzLhdUyMX4PsQAPjwIw==} 180 | engines: {node: '>=12'} 181 | cpu: [x64] 182 | os: [win32] 183 | 184 | '@jridgewell/gen-mapping@0.3.5': 185 | resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} 186 | engines: {node: '>=6.0.0'} 187 | 188 | '@jridgewell/resolve-uri@3.1.2': 189 | resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} 190 | engines: {node: '>=6.0.0'} 191 | 192 | '@jridgewell/set-array@1.2.1': 193 | resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} 194 | engines: {node: '>=6.0.0'} 195 | 196 | '@jridgewell/sourcemap-codec@1.5.0': 197 | resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} 198 | 199 | '@jridgewell/trace-mapping@0.3.25': 200 | resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} 201 | 202 | '@mapbox/geojson-rewind@0.5.2': 203 | resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==} 204 | hasBin: true 205 | 206 | '@mapbox/jsonlint-lines-primitives@2.0.2': 207 | resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==} 208 | engines: {node: '>= 0.6'} 209 | 210 | '@mapbox/point-geometry@0.1.0': 211 | resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==} 212 | 213 | '@mapbox/tiny-sdf@2.0.6': 214 | resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==} 215 | 216 | '@mapbox/unitbezier@0.0.1': 217 | resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==} 218 | 219 | '@mapbox/vector-tile@1.3.1': 220 | resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==} 221 | 222 | '@mapbox/whoots-js@3.1.0': 223 | resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==} 224 | engines: {node: '>=6.0.0'} 225 | 226 | '@maplibre/maplibre-gl-style-spec@20.4.0': 227 | resolution: {integrity: sha512-AzBy3095fTFPjDjmWpR2w6HVRAZJ6hQZUCwk5Plz6EyfnfuQW1odeW5i2Ai47Y6TBA2hQnC+azscjBSALpaWgw==} 228 | hasBin: true 229 | 230 | '@rollup/rollup-android-arm-eabi@4.24.0': 231 | resolution: {integrity: sha512-Q6HJd7Y6xdB48x8ZNVDOqsbh2uByBhgK8PiQgPhwkIw/HC/YX5Ghq2mQY5sRMZWHb3VsFkWooUVOZHKr7DmDIA==} 232 | cpu: [arm] 233 | os: [android] 234 | 235 | '@rollup/rollup-android-arm64@4.24.0': 236 | resolution: {integrity: sha512-ijLnS1qFId8xhKjT81uBHuuJp2lU4x2yxa4ctFPtG+MqEE6+C5f/+X/bStmxapgmwLwiL3ih122xv8kVARNAZA==} 237 | cpu: [arm64] 238 | os: [android] 239 | 240 | '@rollup/rollup-darwin-arm64@4.24.0': 241 | resolution: {integrity: sha512-bIv+X9xeSs1XCk6DVvkO+S/z8/2AMt/2lMqdQbMrmVpgFvXlmde9mLcbQpztXm1tajC3raFDqegsH18HQPMYtA==} 242 | cpu: [arm64] 243 | os: [darwin] 244 | 245 | '@rollup/rollup-darwin-x64@4.24.0': 246 | resolution: {integrity: sha512-X6/nOwoFN7RT2svEQWUsW/5C/fYMBe4fnLK9DQk4SX4mgVBiTA9h64kjUYPvGQ0F/9xwJ5U5UfTbl6BEjaQdBQ==} 247 | cpu: [x64] 248 | os: [darwin] 249 | 250 | '@rollup/rollup-linux-arm-gnueabihf@4.24.0': 251 | resolution: {integrity: sha512-0KXvIJQMOImLCVCz9uvvdPgfyWo93aHHp8ui3FrtOP57svqrF/roSSR5pjqL2hcMp0ljeGlU4q9o/rQaAQ3AYA==} 252 | cpu: [arm] 253 | os: [linux] 254 | 255 | '@rollup/rollup-linux-arm-musleabihf@4.24.0': 256 | resolution: {integrity: sha512-it2BW6kKFVh8xk/BnHfakEeoLPv8STIISekpoF+nBgWM4d55CZKc7T4Dx1pEbTnYm/xEKMgy1MNtYuoA8RFIWw==} 257 | cpu: [arm] 258 | os: [linux] 259 | 260 | '@rollup/rollup-linux-arm64-gnu@4.24.0': 261 | resolution: {integrity: sha512-i0xTLXjqap2eRfulFVlSnM5dEbTVque/3Pi4g2y7cxrs7+a9De42z4XxKLYJ7+OhE3IgxvfQM7vQc43bwTgPwA==} 262 | cpu: [arm64] 263 | os: [linux] 264 | 265 | '@rollup/rollup-linux-arm64-musl@4.24.0': 266 | resolution: {integrity: sha512-9E6MKUJhDuDh604Qco5yP/3qn3y7SLXYuiC0Rpr89aMScS2UAmK1wHP2b7KAa1nSjWJc/f/Lc0Wl1L47qjiyQw==} 267 | cpu: [arm64] 268 | os: [linux] 269 | 270 | '@rollup/rollup-linux-powerpc64le-gnu@4.24.0': 271 | resolution: {integrity: sha512-2XFFPJ2XMEiF5Zi2EBf4h73oR1V/lycirxZxHZNc93SqDN/IWhYYSYj8I9381ikUFXZrz2v7r2tOVk2NBwxrWw==} 272 | cpu: [ppc64] 273 | os: [linux] 274 | 275 | '@rollup/rollup-linux-riscv64-gnu@4.24.0': 276 | resolution: {integrity: sha512-M3Dg4hlwuntUCdzU7KjYqbbd+BLq3JMAOhCKdBE3TcMGMZbKkDdJ5ivNdehOssMCIokNHFOsv7DO4rlEOfyKpg==} 277 | cpu: [riscv64] 278 | os: [linux] 279 | 280 | '@rollup/rollup-linux-s390x-gnu@4.24.0': 281 | resolution: {integrity: sha512-mjBaoo4ocxJppTorZVKWFpy1bfFj9FeCMJqzlMQGjpNPY9JwQi7OuS1axzNIk0nMX6jSgy6ZURDZ2w0QW6D56g==} 282 | cpu: [s390x] 283 | os: [linux] 284 | 285 | '@rollup/rollup-linux-x64-gnu@4.24.0': 286 | resolution: {integrity: sha512-ZXFk7M72R0YYFN5q13niV0B7G8/5dcQ9JDp8keJSfr3GoZeXEoMHP/HlvqROA3OMbMdfr19IjCeNAnPUG93b6A==} 287 | cpu: [x64] 288 | os: [linux] 289 | 290 | '@rollup/rollup-linux-x64-musl@4.24.0': 291 | resolution: {integrity: sha512-w1i+L7kAXZNdYl+vFvzSZy8Y1arS7vMgIy8wusXJzRrPyof5LAb02KGr1PD2EkRcl73kHulIID0M501lN+vobQ==} 292 | cpu: [x64] 293 | os: [linux] 294 | 295 | '@rollup/rollup-win32-arm64-msvc@4.24.0': 296 | resolution: {integrity: sha512-VXBrnPWgBpVDCVY6XF3LEW0pOU51KbaHhccHw6AS6vBWIC60eqsH19DAeeObl+g8nKAz04QFdl/Cefta0xQtUQ==} 297 | cpu: [arm64] 298 | os: [win32] 299 | 300 | '@rollup/rollup-win32-ia32-msvc@4.24.0': 301 | resolution: {integrity: sha512-xrNcGDU0OxVcPTH/8n/ShH4UevZxKIO6HJFK0e15XItZP2UcaiLFd5kiX7hJnqCbSztUF8Qot+JWBC/QXRPYWQ==} 302 | cpu: [ia32] 303 | os: [win32] 304 | 305 | '@rollup/rollup-win32-x64-msvc@4.24.0': 306 | resolution: {integrity: sha512-fbMkAF7fufku0N2dE5TBXcNlg0pt0cJue4xBRE2Qc5Vqikxr4VCgKj/ht6SMdFcOacVA9rqF70APJ8RN/4vMJw==} 307 | cpu: [x64] 308 | os: [win32] 309 | 310 | '@sveltejs/vite-plugin-svelte-inspector@2.1.0': 311 | resolution: {integrity: sha512-9QX28IymvBlSCqsCll5t0kQVxipsfhFFL+L2t3nTWfXnddYwxBuAEtTtlaVQpRz9c37BhJjltSeY4AJSC03SSg==} 312 | engines: {node: ^18.0.0 || >=20} 313 | peerDependencies: 314 | '@sveltejs/vite-plugin-svelte': ^3.0.0 315 | svelte: ^4.0.0 || ^5.0.0-next.0 316 | vite: ^5.0.0 317 | 318 | '@sveltejs/vite-plugin-svelte@3.1.2': 319 | resolution: {integrity: sha512-Txsm1tJvtiYeLUVRNqxZGKR/mI+CzuIQuc2gn+YCs9rMTowpNZ2Nqt53JdL8KF9bLhAf2ruR/dr9eZCwdTriRA==} 320 | engines: {node: ^18.0.0 || >=20} 321 | peerDependencies: 322 | svelte: ^4.0.0 || ^5.0.0-next.0 323 | vite: ^5.0.0 324 | 325 | '@tsconfig/svelte@5.0.4': 326 | resolution: {integrity: sha512-BV9NplVgLmSi4mwKzD8BD/NQ8erOY/nUE/GpgWe2ckx+wIQF5RyRirn/QsSSCPeulVpc3RA/iJt6DpfTIZps0Q==} 327 | 328 | '@types/estree@1.0.6': 329 | resolution: {integrity: sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==} 330 | 331 | '@types/geojson-vt@3.2.5': 332 | resolution: {integrity: sha512-qDO7wqtprzlpe8FfQ//ClPV9xiuoh2nkIgiouIptON9w5jvD/fA4szvP9GBlDVdJ5dldAl0kX/sy3URbWwLx0g==} 333 | 334 | '@types/geojson@7946.0.14': 335 | resolution: {integrity: sha512-WCfD5Ht3ZesJUsONdhvm84dmzWOiOzOAqOncN0++w0lBw1o8OuDNJF2McvvCef/yBqb/HYRahp1BYtODFQ8bRg==} 336 | 337 | '@types/leaflet@1.9.13': 338 | resolution: {integrity: sha512-wwLL4VKKwYlLmhMQRc/8HT5/8HgkzZyETG0hG3nbsSiHKSdxBWZnHqEkRIOOtpyUks3gbc81dk9WgQMC6bicDw==} 339 | 340 | '@types/mapbox__point-geometry@0.1.4': 341 | resolution: {integrity: sha512-mUWlSxAmYLfwnRBmgYV86tgYmMIICX4kza8YnE/eIlywGe2XoOxlpVnXWwir92xRLjwyarqwpu2EJKD2pk0IUA==} 342 | 343 | '@types/mapbox__vector-tile@1.3.4': 344 | resolution: {integrity: sha512-bpd8dRn9pr6xKvuEBQup8pwQfD4VUyqO/2deGjfpe6AwC8YRlyEipvefyRJUSiCJTZuCb8Pl1ciVV5ekqJ96Bg==} 345 | 346 | '@types/pbf@3.0.5': 347 | resolution: {integrity: sha512-j3pOPiEcWZ34R6a6mN07mUkM4o4Lwf6hPNt8eilOeZhTFbxFXmKhvXl9Y28jotFPaI1bpPDJsbCprUoNke6OrA==} 348 | 349 | '@types/supercluster@7.1.3': 350 | resolution: {integrity: sha512-Z0pOY34GDFl3Q6hUFYf3HkTwKEE02e7QgtJppBt+beEAxnyOpJua+voGFvxINBHa06GwLFFym7gRPY2SiKIfIA==} 351 | 352 | acorn@8.13.0: 353 | resolution: {integrity: sha512-8zSiw54Oxrdym50NlZ9sUusyO1Z1ZchgRLWRaK6c86XJFClyCgFKetdowBg5bKxyp/u+CDBJG4Mpp0m3HLZl9w==} 354 | engines: {node: '>=0.4.0'} 355 | hasBin: true 356 | 357 | aria-query@5.3.2: 358 | resolution: {integrity: sha512-COROpnaoap1E2F000S62r6A60uHZnmlvomhfyT2DlTcrY1OrBKn2UhH7qn5wTC9zMvD0AY7csdPSNwKP+7WiQw==} 359 | engines: {node: '>= 0.4'} 360 | 361 | axobject-query@4.1.0: 362 | resolution: {integrity: sha512-qIj0G9wZbMGNLjLmg1PT6v2mE9AH2zlnADJD/2tC6E00hgmhUOfEB6greHPAfLRSufHqROIUTkw6E+M3lH0PTQ==} 363 | engines: {node: '>= 0.4'} 364 | 365 | chokidar@4.0.1: 366 | resolution: {integrity: sha512-n8enUVCED/KVRQlab1hr3MVpcVMvxtZjmEa956u+4YijlmQED223XMSYj2tLuKvr4jcCTzNNMpQDUer72MMmzA==} 367 | engines: {node: '>= 14.16.0'} 368 | 369 | code-red@1.0.4: 370 | resolution: {integrity: sha512-7qJWqItLA8/VPVlKJlFXU+NBlo/qyfs39aJcuMT/2ere32ZqvF5OSxgdM5xOfJJ7O429gg2HM47y8v9P+9wrNw==} 371 | 372 | css-tree@2.3.1: 373 | resolution: {integrity: sha512-6Fv1DV/TYw//QF5IzQdqsNDjx/wc8TrMBZsqjL9eW01tWb7R7k/mq+/VXfJCl7SoD5emsJop9cOByJZfs8hYIw==} 374 | engines: {node: ^10 || ^12.20.0 || ^14.13.0 || >=15.0.0} 375 | 376 | d3-array@3.2.4: 377 | resolution: {integrity: sha512-tdQAmyA18i4J7wprpYq8ClcxZy3SC31QMeByyCFyRt7BVHdREQZ5lpzoe5mFEYZUWe+oq8HBvk9JjpibyEV4Jg==} 378 | engines: {node: '>=12'} 379 | 380 | d3-geo@3.1.1: 381 | resolution: {integrity: sha512-637ln3gXKXOwhalDzinUgY83KzNWZRKbYubaG+fGVuc/dxO64RRljtCTnf5ecMyE1RIdtqpkVcq0IbtU2S8j2Q==} 382 | engines: {node: '>=12'} 383 | 384 | debug@4.3.7: 385 | resolution: {integrity: sha512-Er2nc/H7RrMXZBFCEim6TCmMk02Z8vLC2Rbi1KEBggpo0fS6l0S1nnapwmIi3yW/+GOJap1Krg4w0Hg80oCqgQ==} 386 | engines: {node: '>=6.0'} 387 | peerDependencies: 388 | supports-color: '*' 389 | peerDependenciesMeta: 390 | supports-color: 391 | optional: true 392 | 393 | deepmerge@4.3.1: 394 | resolution: {integrity: sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==} 395 | engines: {node: '>=0.10.0'} 396 | 397 | dequal@2.0.3: 398 | resolution: {integrity: sha512-0je+qPKHEMohvfRTCEo3CrPG6cAzAYgmzKyxRiYSSDkS6eGJdyVJm7WaYA5ECaAD9wLB2T4EEeymA5aFVcYXCA==} 399 | engines: {node: '>=6'} 400 | 401 | earcut@3.0.0: 402 | resolution: {integrity: sha512-41Fs7Q/PLq1SDbqjsgcY7GA42T0jvaCNGXgGtsNdvg+Yv8eIu06bxv4/PoREkZ9nMDNwnUSG9OFB9+yv8eKhDg==} 403 | 404 | esbuild@0.21.5: 405 | resolution: {integrity: sha512-mg3OPMV4hXywwpoDxu3Qda5xCKQi+vCTZq8S9J/EpkhB2HzKXq4SNFZE3+NK93JYxc8VMSep+lOUSC/RVKaBqw==} 406 | engines: {node: '>=12'} 407 | hasBin: true 408 | 409 | estree-walker@3.0.3: 410 | resolution: {integrity: sha512-7RUKfXgSMMkzt6ZuXmqapOurLGPPfgj6l9uRZ7lRGolvk0y2yocc35LdcxKC5PQZdn2DMqioAQ2NoWcrTKmm6g==} 411 | 412 | fdir@6.4.2: 413 | resolution: {integrity: sha512-KnhMXsKSPZlAhp7+IjUkRZKPb4fUyccpDrdFXbi4QL1qkmFh9kVY09Yox+n4MaOb3lHZ1Tv829C3oaaXoMYPDQ==} 414 | peerDependencies: 415 | picomatch: ^3 || ^4 416 | peerDependenciesMeta: 417 | picomatch: 418 | optional: true 419 | 420 | fflate@0.8.2: 421 | resolution: {integrity: sha512-cPJU47OaAoCbg0pBvzsgpTPhmhqI5eJjh/JIu8tPj5q+T7iLvW/JAYUqmE7KOB4R1ZyEhzBaIQpQpardBF5z8A==} 422 | 423 | fsevents@2.3.3: 424 | resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} 425 | engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} 426 | os: [darwin] 427 | 428 | geojson-vt@4.0.2: 429 | resolution: {integrity: sha512-AV9ROqlNqoZEIJGfm1ncNjEXfkz2hdFlZf0qkVfmkwdKa8vj7H16YUOT81rJw1rdFhyEDlN2Tds91p/glzbl5A==} 430 | 431 | get-stream@6.0.1: 432 | resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==} 433 | engines: {node: '>=10'} 434 | 435 | gl-matrix@3.4.3: 436 | resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==} 437 | 438 | global-prefix@4.0.0: 439 | resolution: {integrity: sha512-w0Uf9Y9/nyHinEk5vMJKRie+wa4kR5hmDbEhGGds/kG1PwGLLHKRoNMeJOyCQjjBkANlnScqgzcFwGHgmgLkVA==} 440 | engines: {node: '>=16'} 441 | 442 | ieee754@1.2.1: 443 | resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} 444 | 445 | ini@4.1.3: 446 | resolution: {integrity: sha512-X7rqawQBvfdjS10YU1y1YVreA3SsLrW9dX2CewP2EbBJM4ypVNLDkO5y04gejPwKIY9lR+7r9gn3rFPt/kmWFg==} 447 | engines: {node: ^14.17.0 || ^16.13.0 || >=18.0.0} 448 | 449 | internmap@2.0.3: 450 | resolution: {integrity: sha512-5Hh7Y1wQbvY5ooGgPbDaL5iYLAPzMTUrjMulskHLH6wnv/A+1q5rgEaiuqEjB+oxGXIVZs1FF+R/KPN3ZSQYYg==} 451 | engines: {node: '>=12'} 452 | 453 | is-reference@3.0.2: 454 | resolution: {integrity: sha512-v3rht/LgVcsdZa3O2Nqs+NMowLOxeOm7Ay9+/ARQ2F+qEoANRcqrjAZKGN0v8ymUetZGgkp26LTnGT7H0Qo9Pg==} 455 | 456 | isexe@3.1.1: 457 | resolution: {integrity: sha512-LpB/54B+/2J5hqQ7imZHfdU31OlgQqx7ZicVlkm9kzg9/w8GKLEcFfJl/t7DCEDueOyBAD6zCCwTO6Fzs0NoEQ==} 458 | engines: {node: '>=16'} 459 | 460 | json-stringify-pretty-compact@4.0.0: 461 | resolution: {integrity: sha512-3CNZ2DnrpByG9Nqj6Xo8vqbjT4F6N+tb4Gb28ESAZjYZ5yqvmc56J+/kuIwkaAMOyblTQhUW7PxMkUb8Q36N3Q==} 462 | 463 | just-compare@2.3.0: 464 | resolution: {integrity: sha512-6shoR7HDT+fzfL3gBahx1jZG3hWLrhPAf+l7nCwahDdT9XDtosB9kIF0ZrzUp5QY8dJWfQVr5rnsPqsbvflDzg==} 465 | 466 | just-flush@2.3.0: 467 | resolution: {integrity: sha512-fBuxQ1gJ61BurmhwKS5LYTzhkbrT5j/2U7ax+UbLm9aRvCTh2h6AfzLteOckE4KKomqOf0Y3zIG3Xu57sRsKUg==} 468 | 469 | kdbush@4.0.2: 470 | resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==} 471 | 472 | kind-of@6.0.3: 473 | resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==} 474 | engines: {node: '>=0.10.0'} 475 | 476 | kleur@4.1.5: 477 | resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==} 478 | engines: {node: '>=6'} 479 | 480 | locate-character@3.0.0: 481 | resolution: {integrity: sha512-SW13ws7BjaeJ6p7Q6CO2nchbYEc3X3J6WrmTTDto7yMPqVSZTUyY5Tjbid+Ab8gLnATtygYtiDIJGQRRn2ZOiA==} 482 | 483 | magic-string@0.30.12: 484 | resolution: {integrity: sha512-Ea8I3sQMVXr8JhN4z+H/d8zwo+tYDgHE9+5G4Wnrwhs0gaK9fXTKx0Tw5Xwsd/bCPTTZNRAdpyzvoeORe9LYpw==} 485 | 486 | maplibre-gl@4.7.1: 487 | resolution: {integrity: sha512-lgL7XpIwsgICiL82ITplfS7IGwrB1OJIw/pCvprDp2dhmSSEBgmPzYRvwYYYvJGJD7fxUv1Tvpih4nZ6VrLuaA==} 488 | engines: {node: '>=16.14.0', npm: '>=8.1.0'} 489 | 490 | mdn-data@2.0.30: 491 | resolution: {integrity: sha512-GaqWWShW4kv/G9IEucWScBx9G1/vsFZZJUO+tD26M8J8z3Kw5RDQjaoZe03YAClgeS/SWPOcb4nkFBTEi5DUEA==} 492 | 493 | minimist@1.2.8: 494 | resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==} 495 | 496 | mri@1.2.0: 497 | resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==} 498 | engines: {node: '>=4'} 499 | 500 | ms@2.1.3: 501 | resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==} 502 | 503 | murmurhash-js@1.0.0: 504 | resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==} 505 | 506 | nanoid@3.3.7: 507 | resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} 508 | engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} 509 | hasBin: true 510 | 511 | pbf@3.3.0: 512 | resolution: {integrity: sha512-XDF38WCH3z5OV/OVa8GKUNtLAyneuzbCisx7QUCF8Q6Nutx0WnJrQe5O+kOtBlLfRNUws98Y58Lblp+NJG5T4Q==} 513 | hasBin: true 514 | 515 | periscopic@3.1.0: 516 | resolution: {integrity: sha512-vKiQ8RRtkl9P+r/+oefh25C3fhybptkHKCZSPlcXiJux2tJF55GnEj3BVn4A5gKfq9NWWXXrxkHBwVPUfH0opw==} 517 | 518 | picocolors@1.1.1: 519 | resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} 520 | 521 | pmtiles@3.2.0: 522 | resolution: {integrity: sha512-4v3Nw5xeMxaUReLZQTz3PyM4VM/Lx/Xp/rc2GGEWMl0nqAmcb+gjyi+eOTwfPu8LnB0ash36hz0dV76uYvih5A==} 523 | 524 | postcss@8.4.47: 525 | resolution: {integrity: sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ==} 526 | engines: {node: ^10 || ^12 || >=14} 527 | 528 | potpack@2.0.0: 529 | resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==} 530 | 531 | protocol-buffers-schema@3.6.0: 532 | resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==} 533 | 534 | quickselect@2.0.0: 535 | resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==} 536 | 537 | quickselect@3.0.0: 538 | resolution: {integrity: sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==} 539 | 540 | readdirp@4.0.2: 541 | resolution: {integrity: sha512-yDMz9g+VaZkqBYS/ozoBJwaBhTbZo3UNYQHNRw1D3UFQB8oHB4uS/tAODO+ZLjGWmUbKnIlOWO+aaIiAxrUWHA==} 542 | engines: {node: '>= 14.16.0'} 543 | 544 | resolve-protobuf-schema@2.1.0: 545 | resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==} 546 | 547 | rollup@4.24.0: 548 | resolution: {integrity: sha512-DOmrlGSXNk1DM0ljiQA+i+o0rSLhtii1je5wgk60j49d1jHT5YYttBv1iWOnYSTG+fZZESUOSNiAl89SIet+Cg==} 549 | engines: {node: '>=18.0.0', npm: '>=8.0.0'} 550 | hasBin: true 551 | 552 | rw@1.3.3: 553 | resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==} 554 | 555 | sade@1.8.1: 556 | resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==} 557 | engines: {node: '>=6'} 558 | 559 | source-map-js@1.2.1: 560 | resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} 561 | engines: {node: '>=0.10.0'} 562 | 563 | supercluster@8.0.1: 564 | resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==} 565 | 566 | svelte-check@4.0.5: 567 | resolution: {integrity: sha512-icBTBZ3ibBaywbXUat3cK6hB5Du+Kq9Z8CRuyLmm64XIe2/r+lQcbuBx/IQgsbrC+kT2jQ0weVpZSSRIPwB6jQ==} 568 | engines: {node: '>= 18.0.0'} 569 | hasBin: true 570 | peerDependencies: 571 | svelte: ^4.0.0 || ^5.0.0-next.0 572 | typescript: '>=5.0.0' 573 | 574 | svelte-hmr@0.16.0: 575 | resolution: {integrity: sha512-Gyc7cOS3VJzLlfj7wKS0ZnzDVdv3Pn2IuVeJPk9m2skfhcu5bq3wtIZyQGggr7/Iim5rH5cncyQft/kRLupcnA==} 576 | engines: {node: ^12.20 || ^14.13.1 || >= 16} 577 | peerDependencies: 578 | svelte: ^3.19.0 || ^4.0.0 579 | 580 | svelte-maplibre@0.9.14: 581 | resolution: {integrity: sha512-5HBvibzU/Uf3g8eEz4Hty5XAwoBhW9Tp7NQEvb80U/glR/M1IHyzUKss6XMq8Zbci2wtsASeoPc6dA5R4+0e0w==} 582 | peerDependencies: 583 | '@deck.gl/core': ^8.8.0 584 | '@deck.gl/layers': ^8.8.0 585 | '@deck.gl/mapbox': ^8.8.0 586 | svelte: ^3.54.0 || ^4.0.0 || ^5.0.0 587 | peerDependenciesMeta: 588 | '@deck.gl/core': 589 | optional: true 590 | '@deck.gl/layers': 591 | optional: true 592 | '@deck.gl/mapbox': 593 | optional: true 594 | 595 | svelte@4.2.19: 596 | resolution: {integrity: sha512-IY1rnGr6izd10B0A8LqsBfmlT5OILVuZ7XsI0vdGPEvuonFV7NYEUK4dAkm9Zg2q0Um92kYjTpS1CAP3Nh/KWw==} 597 | engines: {node: '>=16'} 598 | 599 | tinyqueue@3.0.0: 600 | resolution: {integrity: sha512-gRa9gwYU3ECmQYv3lslts5hxuIa90veaEcxDYuu3QGOIAEM2mOZkVHp48ANJuu1CURtRdHKUBY5Lm1tHV+sD4g==} 601 | 602 | tslib@2.8.0: 603 | resolution: {integrity: sha512-jWVzBLplnCmoaTr13V9dYbiQ99wvZRd0vNWaDRg+aVYRcjDF3nDksxFDE/+fkXnKhpnUUkmx5pK/v8mCtLVqZA==} 604 | 605 | typescript@5.6.3: 606 | resolution: {integrity: sha512-hjcS1mhfuyi4WW8IWtjP7brDrG2cuDZukyrYrSauoXGNgx0S7zceP07adYkJycEr56BOUTNPzbInooiN3fn1qw==} 607 | engines: {node: '>=14.17'} 608 | hasBin: true 609 | 610 | vite@5.4.9: 611 | resolution: {integrity: sha512-20OVpJHh0PAM0oSOELa5GaZNWeDjcAvQjGXy2Uyr+Tp+/D2/Hdz6NLgpJLsarPTA2QJ6v8mX2P1ZfbsSKvdMkg==} 612 | engines: {node: ^18.0.0 || >=20.0.0} 613 | hasBin: true 614 | peerDependencies: 615 | '@types/node': ^18.0.0 || >=20.0.0 616 | less: '*' 617 | lightningcss: ^1.21.0 618 | sass: '*' 619 | sass-embedded: '*' 620 | stylus: '*' 621 | sugarss: '*' 622 | terser: ^5.4.0 623 | peerDependenciesMeta: 624 | '@types/node': 625 | optional: true 626 | less: 627 | optional: true 628 | lightningcss: 629 | optional: true 630 | sass: 631 | optional: true 632 | sass-embedded: 633 | optional: true 634 | stylus: 635 | optional: true 636 | sugarss: 637 | optional: true 638 | terser: 639 | optional: true 640 | 641 | vitefu@0.2.5: 642 | resolution: {integrity: sha512-SgHtMLoqaeeGnd2evZ849ZbACbnwQCIwRH57t18FxcXoZop0uQu0uzlIhJBlF/eWVzuce0sHeqPcDo+evVcg8Q==} 643 | peerDependencies: 644 | vite: ^3.0.0 || ^4.0.0 || ^5.0.0 645 | peerDependenciesMeta: 646 | vite: 647 | optional: true 648 | 649 | vt-pbf@3.1.3: 650 | resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==} 651 | 652 | which@4.0.0: 653 | resolution: {integrity: sha512-GlaYyEb07DPxYCKhKzplCWBJtvxZcZMrL+4UkrTSJHHPyZU4mYYTv3qaOe77H7EODLSSopAUFAc6W8U4yqvscg==} 654 | engines: {node: ^16.13.0 || >=18.0.0} 655 | hasBin: true 656 | 657 | snapshots: 658 | 659 | '@ampproject/remapping@2.3.0': 660 | dependencies: 661 | '@jridgewell/gen-mapping': 0.3.5 662 | '@jridgewell/trace-mapping': 0.3.25 663 | 664 | '@esbuild/aix-ppc64@0.21.5': 665 | optional: true 666 | 667 | '@esbuild/android-arm64@0.21.5': 668 | optional: true 669 | 670 | '@esbuild/android-arm@0.21.5': 671 | optional: true 672 | 673 | '@esbuild/android-x64@0.21.5': 674 | optional: true 675 | 676 | '@esbuild/darwin-arm64@0.21.5': 677 | optional: true 678 | 679 | '@esbuild/darwin-x64@0.21.5': 680 | optional: true 681 | 682 | '@esbuild/freebsd-arm64@0.21.5': 683 | optional: true 684 | 685 | '@esbuild/freebsd-x64@0.21.5': 686 | optional: true 687 | 688 | '@esbuild/linux-arm64@0.21.5': 689 | optional: true 690 | 691 | '@esbuild/linux-arm@0.21.5': 692 | optional: true 693 | 694 | '@esbuild/linux-ia32@0.21.5': 695 | optional: true 696 | 697 | '@esbuild/linux-loong64@0.21.5': 698 | optional: true 699 | 700 | '@esbuild/linux-mips64el@0.21.5': 701 | optional: true 702 | 703 | '@esbuild/linux-ppc64@0.21.5': 704 | optional: true 705 | 706 | '@esbuild/linux-riscv64@0.21.5': 707 | optional: true 708 | 709 | '@esbuild/linux-s390x@0.21.5': 710 | optional: true 711 | 712 | '@esbuild/linux-x64@0.21.5': 713 | optional: true 714 | 715 | '@esbuild/netbsd-x64@0.21.5': 716 | optional: true 717 | 718 | '@esbuild/openbsd-x64@0.21.5': 719 | optional: true 720 | 721 | '@esbuild/sunos-x64@0.21.5': 722 | optional: true 723 | 724 | '@esbuild/win32-arm64@0.21.5': 725 | optional: true 726 | 727 | '@esbuild/win32-ia32@0.21.5': 728 | optional: true 729 | 730 | '@esbuild/win32-x64@0.21.5': 731 | optional: true 732 | 733 | '@jridgewell/gen-mapping@0.3.5': 734 | dependencies: 735 | '@jridgewell/set-array': 1.2.1 736 | '@jridgewell/sourcemap-codec': 1.5.0 737 | '@jridgewell/trace-mapping': 0.3.25 738 | 739 | '@jridgewell/resolve-uri@3.1.2': {} 740 | 741 | '@jridgewell/set-array@1.2.1': {} 742 | 743 | '@jridgewell/sourcemap-codec@1.5.0': {} 744 | 745 | '@jridgewell/trace-mapping@0.3.25': 746 | dependencies: 747 | '@jridgewell/resolve-uri': 3.1.2 748 | '@jridgewell/sourcemap-codec': 1.5.0 749 | 750 | '@mapbox/geojson-rewind@0.5.2': 751 | dependencies: 752 | get-stream: 6.0.1 753 | minimist: 1.2.8 754 | 755 | '@mapbox/jsonlint-lines-primitives@2.0.2': {} 756 | 757 | '@mapbox/point-geometry@0.1.0': {} 758 | 759 | '@mapbox/tiny-sdf@2.0.6': {} 760 | 761 | '@mapbox/unitbezier@0.0.1': {} 762 | 763 | '@mapbox/vector-tile@1.3.1': 764 | dependencies: 765 | '@mapbox/point-geometry': 0.1.0 766 | 767 | '@mapbox/whoots-js@3.1.0': {} 768 | 769 | '@maplibre/maplibre-gl-style-spec@20.4.0': 770 | dependencies: 771 | '@mapbox/jsonlint-lines-primitives': 2.0.2 772 | '@mapbox/unitbezier': 0.0.1 773 | json-stringify-pretty-compact: 4.0.0 774 | minimist: 1.2.8 775 | quickselect: 2.0.0 776 | rw: 1.3.3 777 | tinyqueue: 3.0.0 778 | 779 | '@rollup/rollup-android-arm-eabi@4.24.0': 780 | optional: true 781 | 782 | '@rollup/rollup-android-arm64@4.24.0': 783 | optional: true 784 | 785 | '@rollup/rollup-darwin-arm64@4.24.0': 786 | optional: true 787 | 788 | '@rollup/rollup-darwin-x64@4.24.0': 789 | optional: true 790 | 791 | '@rollup/rollup-linux-arm-gnueabihf@4.24.0': 792 | optional: true 793 | 794 | '@rollup/rollup-linux-arm-musleabihf@4.24.0': 795 | optional: true 796 | 797 | '@rollup/rollup-linux-arm64-gnu@4.24.0': 798 | optional: true 799 | 800 | '@rollup/rollup-linux-arm64-musl@4.24.0': 801 | optional: true 802 | 803 | '@rollup/rollup-linux-powerpc64le-gnu@4.24.0': 804 | optional: true 805 | 806 | '@rollup/rollup-linux-riscv64-gnu@4.24.0': 807 | optional: true 808 | 809 | '@rollup/rollup-linux-s390x-gnu@4.24.0': 810 | optional: true 811 | 812 | '@rollup/rollup-linux-x64-gnu@4.24.0': 813 | optional: true 814 | 815 | '@rollup/rollup-linux-x64-musl@4.24.0': 816 | optional: true 817 | 818 | '@rollup/rollup-win32-arm64-msvc@4.24.0': 819 | optional: true 820 | 821 | '@rollup/rollup-win32-ia32-msvc@4.24.0': 822 | optional: true 823 | 824 | '@rollup/rollup-win32-x64-msvc@4.24.0': 825 | optional: true 826 | 827 | '@sveltejs/vite-plugin-svelte-inspector@2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9))(svelte@4.2.19)(vite@5.4.9)': 828 | dependencies: 829 | '@sveltejs/vite-plugin-svelte': 3.1.2(svelte@4.2.19)(vite@5.4.9) 830 | debug: 4.3.7 831 | svelte: 4.2.19 832 | vite: 5.4.9 833 | transitivePeerDependencies: 834 | - supports-color 835 | 836 | '@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9)': 837 | dependencies: 838 | '@sveltejs/vite-plugin-svelte-inspector': 2.1.0(@sveltejs/vite-plugin-svelte@3.1.2(svelte@4.2.19)(vite@5.4.9))(svelte@4.2.19)(vite@5.4.9) 839 | debug: 4.3.7 840 | deepmerge: 4.3.1 841 | kleur: 4.1.5 842 | magic-string: 0.30.12 843 | svelte: 4.2.19 844 | svelte-hmr: 0.16.0(svelte@4.2.19) 845 | vite: 5.4.9 846 | vitefu: 0.2.5(vite@5.4.9) 847 | transitivePeerDependencies: 848 | - supports-color 849 | 850 | '@tsconfig/svelte@5.0.4': {} 851 | 852 | '@types/estree@1.0.6': {} 853 | 854 | '@types/geojson-vt@3.2.5': 855 | dependencies: 856 | '@types/geojson': 7946.0.14 857 | 858 | '@types/geojson@7946.0.14': {} 859 | 860 | '@types/leaflet@1.9.13': 861 | dependencies: 862 | '@types/geojson': 7946.0.14 863 | 864 | '@types/mapbox__point-geometry@0.1.4': {} 865 | 866 | '@types/mapbox__vector-tile@1.3.4': 867 | dependencies: 868 | '@types/geojson': 7946.0.14 869 | '@types/mapbox__point-geometry': 0.1.4 870 | '@types/pbf': 3.0.5 871 | 872 | '@types/pbf@3.0.5': {} 873 | 874 | '@types/supercluster@7.1.3': 875 | dependencies: 876 | '@types/geojson': 7946.0.14 877 | 878 | acorn@8.13.0: {} 879 | 880 | aria-query@5.3.2: {} 881 | 882 | axobject-query@4.1.0: {} 883 | 884 | chokidar@4.0.1: 885 | dependencies: 886 | readdirp: 4.0.2 887 | 888 | code-red@1.0.4: 889 | dependencies: 890 | '@jridgewell/sourcemap-codec': 1.5.0 891 | '@types/estree': 1.0.6 892 | acorn: 8.13.0 893 | estree-walker: 3.0.3 894 | periscopic: 3.1.0 895 | 896 | css-tree@2.3.1: 897 | dependencies: 898 | mdn-data: 2.0.30 899 | source-map-js: 1.2.1 900 | 901 | d3-array@3.2.4: 902 | dependencies: 903 | internmap: 2.0.3 904 | 905 | d3-geo@3.1.1: 906 | dependencies: 907 | d3-array: 3.2.4 908 | 909 | debug@4.3.7: 910 | dependencies: 911 | ms: 2.1.3 912 | 913 | deepmerge@4.3.1: {} 914 | 915 | dequal@2.0.3: {} 916 | 917 | earcut@3.0.0: {} 918 | 919 | esbuild@0.21.5: 920 | optionalDependencies: 921 | '@esbuild/aix-ppc64': 0.21.5 922 | '@esbuild/android-arm': 0.21.5 923 | '@esbuild/android-arm64': 0.21.5 924 | '@esbuild/android-x64': 0.21.5 925 | '@esbuild/darwin-arm64': 0.21.5 926 | '@esbuild/darwin-x64': 0.21.5 927 | '@esbuild/freebsd-arm64': 0.21.5 928 | '@esbuild/freebsd-x64': 0.21.5 929 | '@esbuild/linux-arm': 0.21.5 930 | '@esbuild/linux-arm64': 0.21.5 931 | '@esbuild/linux-ia32': 0.21.5 932 | '@esbuild/linux-loong64': 0.21.5 933 | '@esbuild/linux-mips64el': 0.21.5 934 | '@esbuild/linux-ppc64': 0.21.5 935 | '@esbuild/linux-riscv64': 0.21.5 936 | '@esbuild/linux-s390x': 0.21.5 937 | '@esbuild/linux-x64': 0.21.5 938 | '@esbuild/netbsd-x64': 0.21.5 939 | '@esbuild/openbsd-x64': 0.21.5 940 | '@esbuild/sunos-x64': 0.21.5 941 | '@esbuild/win32-arm64': 0.21.5 942 | '@esbuild/win32-ia32': 0.21.5 943 | '@esbuild/win32-x64': 0.21.5 944 | 945 | estree-walker@3.0.3: 946 | dependencies: 947 | '@types/estree': 1.0.6 948 | 949 | fdir@6.4.2: {} 950 | 951 | fflate@0.8.2: {} 952 | 953 | fsevents@2.3.3: 954 | optional: true 955 | 956 | geojson-vt@4.0.2: {} 957 | 958 | get-stream@6.0.1: {} 959 | 960 | gl-matrix@3.4.3: {} 961 | 962 | global-prefix@4.0.0: 963 | dependencies: 964 | ini: 4.1.3 965 | kind-of: 6.0.3 966 | which: 4.0.0 967 | 968 | ieee754@1.2.1: {} 969 | 970 | ini@4.1.3: {} 971 | 972 | internmap@2.0.3: {} 973 | 974 | is-reference@3.0.2: 975 | dependencies: 976 | '@types/estree': 1.0.6 977 | 978 | isexe@3.1.1: {} 979 | 980 | json-stringify-pretty-compact@4.0.0: {} 981 | 982 | just-compare@2.3.0: {} 983 | 984 | just-flush@2.3.0: {} 985 | 986 | kdbush@4.0.2: {} 987 | 988 | kind-of@6.0.3: {} 989 | 990 | kleur@4.1.5: {} 991 | 992 | locate-character@3.0.0: {} 993 | 994 | magic-string@0.30.12: 995 | dependencies: 996 | '@jridgewell/sourcemap-codec': 1.5.0 997 | 998 | maplibre-gl@4.7.1: 999 | dependencies: 1000 | '@mapbox/geojson-rewind': 0.5.2 1001 | '@mapbox/jsonlint-lines-primitives': 2.0.2 1002 | '@mapbox/point-geometry': 0.1.0 1003 | '@mapbox/tiny-sdf': 2.0.6 1004 | '@mapbox/unitbezier': 0.0.1 1005 | '@mapbox/vector-tile': 1.3.1 1006 | '@mapbox/whoots-js': 3.1.0 1007 | '@maplibre/maplibre-gl-style-spec': 20.4.0 1008 | '@types/geojson': 7946.0.14 1009 | '@types/geojson-vt': 3.2.5 1010 | '@types/mapbox__point-geometry': 0.1.4 1011 | '@types/mapbox__vector-tile': 1.3.4 1012 | '@types/pbf': 3.0.5 1013 | '@types/supercluster': 7.1.3 1014 | earcut: 3.0.0 1015 | geojson-vt: 4.0.2 1016 | gl-matrix: 3.4.3 1017 | global-prefix: 4.0.0 1018 | kdbush: 4.0.2 1019 | murmurhash-js: 1.0.0 1020 | pbf: 3.3.0 1021 | potpack: 2.0.0 1022 | quickselect: 3.0.0 1023 | supercluster: 8.0.1 1024 | tinyqueue: 3.0.0 1025 | vt-pbf: 3.1.3 1026 | 1027 | mdn-data@2.0.30: {} 1028 | 1029 | minimist@1.2.8: {} 1030 | 1031 | mri@1.2.0: {} 1032 | 1033 | ms@2.1.3: {} 1034 | 1035 | murmurhash-js@1.0.0: {} 1036 | 1037 | nanoid@3.3.7: {} 1038 | 1039 | pbf@3.3.0: 1040 | dependencies: 1041 | ieee754: 1.2.1 1042 | resolve-protobuf-schema: 2.1.0 1043 | 1044 | periscopic@3.1.0: 1045 | dependencies: 1046 | '@types/estree': 1.0.6 1047 | estree-walker: 3.0.3 1048 | is-reference: 3.0.2 1049 | 1050 | picocolors@1.1.1: {} 1051 | 1052 | pmtiles@3.2.0: 1053 | dependencies: 1054 | '@types/leaflet': 1.9.13 1055 | fflate: 0.8.2 1056 | 1057 | postcss@8.4.47: 1058 | dependencies: 1059 | nanoid: 3.3.7 1060 | picocolors: 1.1.1 1061 | source-map-js: 1.2.1 1062 | 1063 | potpack@2.0.0: {} 1064 | 1065 | protocol-buffers-schema@3.6.0: {} 1066 | 1067 | quickselect@2.0.0: {} 1068 | 1069 | quickselect@3.0.0: {} 1070 | 1071 | readdirp@4.0.2: {} 1072 | 1073 | resolve-protobuf-schema@2.1.0: 1074 | dependencies: 1075 | protocol-buffers-schema: 3.6.0 1076 | 1077 | rollup@4.24.0: 1078 | dependencies: 1079 | '@types/estree': 1.0.6 1080 | optionalDependencies: 1081 | '@rollup/rollup-android-arm-eabi': 4.24.0 1082 | '@rollup/rollup-android-arm64': 4.24.0 1083 | '@rollup/rollup-darwin-arm64': 4.24.0 1084 | '@rollup/rollup-darwin-x64': 4.24.0 1085 | '@rollup/rollup-linux-arm-gnueabihf': 4.24.0 1086 | '@rollup/rollup-linux-arm-musleabihf': 4.24.0 1087 | '@rollup/rollup-linux-arm64-gnu': 4.24.0 1088 | '@rollup/rollup-linux-arm64-musl': 4.24.0 1089 | '@rollup/rollup-linux-powerpc64le-gnu': 4.24.0 1090 | '@rollup/rollup-linux-riscv64-gnu': 4.24.0 1091 | '@rollup/rollup-linux-s390x-gnu': 4.24.0 1092 | '@rollup/rollup-linux-x64-gnu': 4.24.0 1093 | '@rollup/rollup-linux-x64-musl': 4.24.0 1094 | '@rollup/rollup-win32-arm64-msvc': 4.24.0 1095 | '@rollup/rollup-win32-ia32-msvc': 4.24.0 1096 | '@rollup/rollup-win32-x64-msvc': 4.24.0 1097 | fsevents: 2.3.3 1098 | 1099 | rw@1.3.3: {} 1100 | 1101 | sade@1.8.1: 1102 | dependencies: 1103 | mri: 1.2.0 1104 | 1105 | source-map-js@1.2.1: {} 1106 | 1107 | supercluster@8.0.1: 1108 | dependencies: 1109 | kdbush: 4.0.2 1110 | 1111 | svelte-check@4.0.5(svelte@4.2.19)(typescript@5.6.3): 1112 | dependencies: 1113 | '@jridgewell/trace-mapping': 0.3.25 1114 | chokidar: 4.0.1 1115 | fdir: 6.4.2 1116 | picocolors: 1.1.1 1117 | sade: 1.8.1 1118 | svelte: 4.2.19 1119 | typescript: 5.6.3 1120 | transitivePeerDependencies: 1121 | - picomatch 1122 | 1123 | svelte-hmr@0.16.0(svelte@4.2.19): 1124 | dependencies: 1125 | svelte: 4.2.19 1126 | 1127 | svelte-maplibre@0.9.14(svelte@4.2.19): 1128 | dependencies: 1129 | d3-geo: 3.1.1 1130 | dequal: 2.0.3 1131 | just-compare: 2.3.0 1132 | just-flush: 2.3.0 1133 | maplibre-gl: 4.7.1 1134 | pmtiles: 3.2.0 1135 | svelte: 4.2.19 1136 | 1137 | svelte@4.2.19: 1138 | dependencies: 1139 | '@ampproject/remapping': 2.3.0 1140 | '@jridgewell/sourcemap-codec': 1.5.0 1141 | '@jridgewell/trace-mapping': 0.3.25 1142 | '@types/estree': 1.0.6 1143 | acorn: 8.13.0 1144 | aria-query: 5.3.2 1145 | axobject-query: 4.1.0 1146 | code-red: 1.0.4 1147 | css-tree: 2.3.1 1148 | estree-walker: 3.0.3 1149 | is-reference: 3.0.2 1150 | locate-character: 3.0.0 1151 | magic-string: 0.30.12 1152 | periscopic: 3.1.0 1153 | 1154 | tinyqueue@3.0.0: {} 1155 | 1156 | tslib@2.8.0: {} 1157 | 1158 | typescript@5.6.3: {} 1159 | 1160 | vite@5.4.9: 1161 | dependencies: 1162 | esbuild: 0.21.5 1163 | postcss: 8.4.47 1164 | rollup: 4.24.0 1165 | optionalDependencies: 1166 | fsevents: 2.3.3 1167 | 1168 | vitefu@0.2.5(vite@5.4.9): 1169 | optionalDependencies: 1170 | vite: 5.4.9 1171 | 1172 | vt-pbf@3.1.3: 1173 | dependencies: 1174 | '@mapbox/point-geometry': 0.1.0 1175 | '@mapbox/vector-tile': 1.3.1 1176 | pbf: 3.3.0 1177 | 1178 | which@4.0.0: 1179 | dependencies: 1180 | isexe: 3.1.1 1181 | -------------------------------------------------------------------------------- /svelte-example/public/styles/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "id": "dark", 4 | "name": "Dark", 5 | "sources": { 6 | "openmaptiles": { 7 | "type": "vector", 8 | "url": "https://tiles.openfreemap.org/planet" 9 | } 10 | }, 11 | "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm", 12 | "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", 13 | "layers": [ 14 | { 15 | "id": "Background", 16 | "type": "background", 17 | "layout": { "visibility": "visible" }, 18 | "paint": { 19 | "background-color": [ 20 | "interpolate", 21 | ["exponential", 1], 22 | ["zoom"], 23 | 6, 24 | "hsl(0, 0%, 17%)", 25 | 20, 26 | "hsl(0, 0%, 18%)" 27 | ] 28 | } 29 | }, 30 | { 31 | "id": "Residential", 32 | "type": "fill", 33 | "source": "openmaptiles", 34 | "source-layer": "landuse", 35 | "maxzoom": 14, 36 | "layout": { "visibility": "visible" }, 37 | "paint": { 38 | "fill-color": { 39 | "stops": [ 40 | [2, "hsl(0, 0%, 16%)"], 41 | [14, "hsl(0, 0%, 17%)"] 42 | ] 43 | } 44 | }, 45 | "filter": [ 46 | "in", 47 | "class", 48 | "neighbourhood", 49 | "residential", 50 | "suburb" 51 | ] 52 | }, 53 | { 54 | "id": "Sand", 55 | "type": "fill", 56 | "source": "openmaptiles", 57 | "source-layer": "landcover", 58 | "minzoom": 8, 59 | "layout": { "visibility": "visible" }, 60 | "paint": { 61 | "fill-antialias": false, 62 | "fill-color": "hsla(83, 77%, 8%, 0.24)", 63 | "fill-opacity": { 64 | "stops": [ 65 | [7, 0.7], 66 | [12, 1] 67 | ] 68 | } 69 | }, 70 | "filter": ["==", "class", "sand"] 71 | }, 72 | { 73 | "id": "Grass", 74 | "type": "fill", 75 | "source": "openmaptiles", 76 | "source-layer": "landcover", 77 | "minzoom": 8, 78 | "layout": { "visibility": "visible" }, 79 | "paint": { 80 | "fill-antialias": false, 81 | "fill-color": "hsla(83, 38%, 12%, 0.6)", 82 | "fill-opacity": { 83 | "stops": [ 84 | [7, 0.7], 85 | [12, 1] 86 | ] 87 | } 88 | }, 89 | "filter": ["==", "class", "grass"] 90 | }, 91 | { 92 | "id": "Wood", 93 | "type": "fill", 94 | "source": "openmaptiles", 95 | "source-layer": "landcover", 96 | "minzoom": 8, 97 | "layout": { "visibility": "visible" }, 98 | "paint": { 99 | "fill-antialias": false, 100 | "fill-color": "hsla(83, 38%, 11%, 0.6)", 101 | "fill-opacity": { 102 | "stops": [ 103 | [7, 0.7], 104 | [12, 1] 105 | ] 106 | } 107 | }, 108 | "filter": ["==", "class", "wood"] 109 | }, 110 | { 111 | "id": "Water", 112 | "type": "fill", 113 | "source": "openmaptiles", 114 | "source-layer": "water", 115 | "layout": { "visibility": "visible" }, 116 | "paint": { 117 | "fill-color": "hsl(205, 36%, 21%)", 118 | "fill-opacity": [ 119 | "match", 120 | ["get", "intermittent"], 121 | 1, 122 | 0.7, 123 | 1 124 | ] 125 | }, 126 | "filter": [ 127 | "all", 128 | ["!=", "brunnel", "tunnel"] 129 | ] 130 | }, 131 | { 132 | "id": "River", 133 | "type": "line", 134 | "source": "openmaptiles", 135 | "source-layer": "waterway", 136 | "layout": { "visibility": "visible" }, 137 | "paint": { 138 | "line-color": "hsl(205, 36%, 21%)", 139 | "line-opacity": [ 140 | "match", 141 | ["get", "brunnel"], 142 | "tunnel", 143 | 0.7, 144 | 1 145 | ], 146 | "line-width": { 147 | "stops": [ 148 | [9, 1], 149 | [18, 3] 150 | ] 151 | } 152 | }, 153 | "filter": ["!=", "brunnel", "tunnel"] 154 | }, 155 | { 156 | "id": "River intermittent", 157 | "type": "line", 158 | "source": "openmaptiles", 159 | "source-layer": "waterway", 160 | "layout": { "visibility": "visible" }, 161 | "paint": { 162 | "line-color": "hsl(205, 36%, 21%)", 163 | "line-dasharray": [2, 1], 164 | "line-opacity": 1, 165 | "line-width": { 166 | "stops": [ 167 | [9, 1], 168 | [18, 3] 169 | ] 170 | } 171 | }, 172 | "filter": ["==", "intermittent", 1] 173 | }, 174 | { 175 | "id": "Transit tunnel", 176 | "type": "line", 177 | "source": "openmaptiles", 178 | "source-layer": "transportation", 179 | "minzoom": 4, 180 | "layout": { 181 | "line-cap": "butt", 182 | "line-join": "miter", 183 | "visibility": "visible" 184 | }, 185 | "paint": { 186 | "line-color": "hsl(239, 12%, 18%)", 187 | "line-dasharray": [3, 3], 188 | "line-opacity": 0.5, 189 | "line-width": { 190 | "stops": [ 191 | [14, 0.5], 192 | [16, 1.2], 193 | [18, 2] 194 | ] 195 | } 196 | }, 197 | "filter": [ 198 | "all", 199 | ["==", "brunnel", "tunnel"], 200 | ["==", "class", "transit"] 201 | ] 202 | }, 203 | { 204 | "id": "Bridge", 205 | "type": "fill", 206 | "source": "openmaptiles", 207 | "source-layer": "transportation", 208 | "layout": { "visibility": "visible" }, 209 | "paint": { 210 | "fill-color": "hsl(0, 0%, 18%)", 211 | "fill-opacity": 0.7 212 | }, 213 | "filter": ["==", "brunnel", "bridge"] 214 | }, 215 | { 216 | "id": "Pier", 217 | "type": "fill", 218 | "source": "openmaptiles", 219 | "source-layer": "transportation", 220 | "layout": { "visibility": "visible" }, 221 | "paint": { 222 | "fill-antialias": true, 223 | "fill-color": "hsl(0, 0%, 18%)", 224 | "fill-opacity": 1 225 | }, 226 | "metadata": {}, 227 | "filter": ["==", "class", "pier"] 228 | }, 229 | { 230 | "id": "Road network", 231 | "type": "line", 232 | "source": "openmaptiles", 233 | "source-layer": "transportation", 234 | "minzoom": 4, 235 | "layout": { 236 | "line-cap": "round", 237 | "line-join": "round", 238 | "visibility": "visible" 239 | }, 240 | "paint": { 241 | "line-color": "hsl(205, 0%, 27%)", 242 | "line-opacity": [ 243 | "match", 244 | ["get", "brunnel"], 245 | "tunnel", 246 | 0.5, 247 | 1 248 | ], 249 | "line-width": [ 250 | "interpolate", 251 | ["linear", 2], 252 | ["zoom"], 253 | 4, 254 | 0.5, 255 | 5, 256 | 0.75, 257 | 6, 258 | 1, 259 | 10, 260 | [ 261 | "match", 262 | ["get", "class"], 263 | ["motorway"], 264 | [ 265 | "match", 266 | ["get", "brunnel"], 267 | ["bridge"], 268 | 0, 269 | 2.5 270 | ], 271 | ["trunk"], 272 | 1.5, 273 | 1 274 | ], 275 | 12, 276 | [ 277 | "match", 278 | ["get", "class"], 279 | ["motorway"], 280 | ["match", ["get", "ramp"], 1, 1, 4], 281 | ["trunk"], 282 | 2, 283 | ["primary"], 284 | 2.5, 285 | ["secondary", "tertiary"], 286 | 2, 287 | ["minor"], 288 | 1, 289 | ["pier", "service", "track"], 290 | 0.5, 291 | 0.5 292 | ], 293 | 14, 294 | [ 295 | "match", 296 | ["get", "class"], 297 | ["motorway"], 298 | ["match", ["get", "ramp"], 1, 5, 6], 299 | ["trunk"], 300 | 3, 301 | ["primary"], 302 | 5, 303 | ["secondary"], 304 | 4, 305 | ["tertiary"], 306 | 3, 307 | ["minor"], 308 | 2, 309 | ["pier", "service", "track"], 310 | 1, 311 | 2 312 | ], 313 | 16, 314 | [ 315 | "match", 316 | ["get", "class"], 317 | ["motorway", "trunk", "primary"], 318 | 8, 319 | ["secondary"], 320 | 7, 321 | ["tertiary"], 322 | 6, 323 | ["minor"], 324 | 4, 325 | ["pier", "service", "track"], 326 | 2, 327 | 4 328 | ], 329 | 20, 330 | [ 331 | "match", 332 | ["get", "class"], 333 | ["motorway", "trunk", "primary"], 334 | 28, 335 | ["secondary"], 336 | 24, 337 | ["tertiary"], 338 | 20, 339 | ["minor", "service", "track", "pier"], 340 | 16, 341 | 16 342 | ] 343 | ] 344 | }, 345 | "filter": [ 346 | "!in", 347 | "class", 348 | "bridge", 349 | "ferry", 350 | "path", 351 | "rail", 352 | "transit" 353 | ] 354 | }, 355 | { 356 | "id": "Path", 357 | "type": "line", 358 | "source": "openmaptiles", 359 | "source-layer": "transportation", 360 | "minzoom": 15, 361 | "layout": { 362 | "line-cap": "square", 363 | "line-join": "bevel", 364 | "visibility": "visible" 365 | }, 366 | "paint": { 367 | "line-color": "hsl(205, 0%, 27%)", 368 | "line-dasharray": [1, 1], 369 | "line-width": { 370 | "base": 1.55, 371 | "stops": [ 372 | [15, 0.5], 373 | [16, 1], 374 | [18, 2], 375 | [20, 3], 376 | [22, 4] 377 | ] 378 | } 379 | }, 380 | "filter": ["==", "class", "path"] 381 | }, 382 | { 383 | "id": "Building", 384 | "type": "fill", 385 | "source": "openmaptiles", 386 | "source-layer": "building", 387 | "layout": { "visibility": "visible" }, 388 | "paint": { 389 | "fill-antialias": true, 390 | "fill-color": { 391 | "stops": [ 392 | [13, "hsl(0, 0%, 14%)"], 393 | [16, "hsl(0, 0%, 15%)"] 394 | ] 395 | }, 396 | "fill-opacity": 1 397 | } 398 | }, 399 | { 400 | "id": "Railway", 401 | "type": "line", 402 | "source": "openmaptiles", 403 | "source-layer": "transportation", 404 | "minzoom": 9, 405 | "layout": { "visibility": "visible" }, 406 | "paint": { 407 | "line-color": "hsla(238, 12%, 18%, 0.8)", 408 | "line-opacity": [ 409 | "match", 410 | ["get", "brunnel"], 411 | "tunnel", 412 | 0.25, 413 | 1 414 | ], 415 | "line-width": [ 416 | "interpolate", 417 | ["linear", 1], 418 | ["zoom"], 419 | 9, 420 | [ 421 | "match", 422 | ["get", "service"], 423 | ["yard", "spur"], 424 | 0, 425 | 0.5 426 | ], 427 | 12, 428 | [ 429 | "match", 430 | ["get", "service"], 431 | ["yard", "spur"], 432 | 0, 433 | 0.6 434 | ], 435 | 16, 436 | [ 437 | "match", 438 | ["get", "service"], 439 | ["yard", "spur"], 440 | 0.75, 441 | 2 442 | ], 443 | 22, 444 | [ 445 | "match", 446 | ["get", "service"], 447 | ["yard", "spur"], 448 | 1.5, 449 | 3 450 | ] 451 | ] 452 | }, 453 | "filter": ["==", "class", "rail"] 454 | }, 455 | { 456 | "id": "Transit", 457 | "type": "line", 458 | "source": "openmaptiles", 459 | "source-layer": "transportation", 460 | "layout": { "visibility": "visible" }, 461 | "paint": { 462 | "line-color": "hsl(239, 12%, 18%)", 463 | "line-opacity": 0.5, 464 | "line-width": { 465 | "stops": [ 466 | [14, 0.5], 467 | [16, 1.2], 468 | [18, 2] 469 | ] 470 | } 471 | }, 472 | "filter": [ 473 | "all", 474 | ["==", "class", "transit"], 475 | ["!=", "brunnel", "tunnel"] 476 | ] 477 | }, 478 | { 479 | "id": "Aeroway", 480 | "type": "line", 481 | "source": "openmaptiles", 482 | "source-layer": "aeroway", 483 | "minzoom": 10, 484 | "layout": { 485 | "line-cap": "round", 486 | "line-join": "round", 487 | "visibility": "visible" 488 | }, 489 | "paint": { 490 | "line-color": "hsl(205, 0%, 27%)", 491 | "line-opacity": 1, 492 | "line-width": [ 493 | "interpolate", 494 | ["linear", 2], 495 | ["zoom"], 496 | 10, 497 | [ 498 | "match", 499 | ["get", "class"], 500 | ["runway"], 501 | 1, 502 | ["taxiway"], 503 | 0.5, 504 | 0 505 | ], 506 | 14, 507 | [ 508 | "match", 509 | ["get", "class"], 510 | ["runway"], 511 | 3, 512 | ["taxiway"], 513 | 2, 514 | 0 515 | ], 516 | 16, 517 | [ 518 | "match", 519 | ["get", "class"], 520 | ["runway"], 521 | 10, 522 | ["taxiway"], 523 | 6, 524 | 0 525 | ] 526 | ] 527 | } 528 | }, 529 | { 530 | "id": "Airport labels", 531 | "type": "symbol", 532 | "source": "openmaptiles", 533 | "source-layer": "aerodrome_label", 534 | "minzoom": 10, 535 | "layout": { 536 | "text-anchor": "top", 537 | "text-field": [ 538 | "coalesce", 539 | ["get", "name:en"], 540 | ["get", "name"] 541 | ], 542 | "text-font": ["Noto Sans Regular"], 543 | "text-max-width": 8, 544 | "text-offset": [0, 0.5], 545 | "text-size": { 546 | "stops": [ 547 | [10, 10], 548 | [14, 12], 549 | [16, 14] 550 | ] 551 | }, 552 | "visibility": "visible" 553 | }, 554 | "paint": { 555 | "text-color": "hsl(83, 0%, 76%)", 556 | "text-halo-blur": 1, 557 | "text-halo-color": "hsl(0, 0%, 0%)", 558 | "text-halo-width": 1.4 559 | }, 560 | "filter": ["has", "iata"] 561 | }, 562 | { 563 | "id": "Station labels", 564 | "type": "symbol", 565 | "source": "openmaptiles", 566 | "source-layer": "poi", 567 | "minzoom": 12, 568 | "layout": { 569 | "text-anchor": "top", 570 | "text-field": [ 571 | "coalesce", 572 | ["get", "name:en"], 573 | ["get", "name"] 574 | ], 575 | "text-font": ["Noto Sans Regular"], 576 | "text-max-width": 8, 577 | "text-offset": [0, 0.5], 578 | "text-size": { 579 | "stops": [ 580 | [10, 10], 581 | [14, 12], 582 | [16, 14] 583 | ] 584 | }, 585 | "visibility": "visible" 586 | }, 587 | "paint": { 588 | "text-color": "hsl(83, 0%, 76%)", 589 | "text-halo-blur": 1, 590 | "text-halo-color": "hsl(83, 0%, 0%)", 591 | "text-halo-width": 1.4 592 | }, 593 | "filter": [ 594 | "all", 595 | ["==", "class", "railway"], 596 | ["has", "subclass"] 597 | ] 598 | }, 599 | { 600 | "id": "Road labels", 601 | "type": "symbol", 602 | "source": "openmaptiles", 603 | "source-layer": "transportation_name", 604 | "minzoom": 14, 605 | "layout": { 606 | "symbol-placement": "line", 607 | "symbol-spacing": { 608 | "stops": [ 609 | [13, 250], 610 | [20, 350], 611 | [22, 600] 612 | ] 613 | }, 614 | "text-field": [ 615 | "coalesce", 616 | ["get", "name:en"], 617 | ["get", "name"] 618 | ], 619 | "text-font": ["Noto Sans Regular"], 620 | "text-letter-spacing": 0.1, 621 | "text-rotation-alignment": "map", 622 | "text-size": { 623 | "base": 1.4, 624 | "stops": [ 625 | [14, 8], 626 | [17, 10], 627 | [20, 12] 628 | ] 629 | }, 630 | "text-transform": "uppercase", 631 | "visibility": "visible" 632 | }, 633 | "paint": { 634 | "text-color": "hsl(83, 0%, 76%)", 635 | "text-halo-color": "hsl(83, 0%, 0%)", 636 | "text-halo-width": 1 637 | }, 638 | "filter": [ 639 | "all", 640 | ["==", "$type", "LineString"], 641 | [ 642 | "!in", 643 | "class", 644 | "aerialway", 645 | "ferry", 646 | "service" 647 | ] 648 | ] 649 | }, 650 | { 651 | "id": "Other border", 652 | "type": "line", 653 | "source": "openmaptiles", 654 | "source-layer": "boundary", 655 | "minzoom": 3, 656 | "layout": { "visibility": "visible" }, 657 | "paint": { 658 | "line-color": "hsla(83, 0%, 28%, 0.65)", 659 | "line-dasharray": [2, 1], 660 | "line-width": { 661 | "stops": [ 662 | [4, 0.8], 663 | [11, 1.75], 664 | [18, 2.5] 665 | ] 666 | } 667 | }, 668 | "filter": [ 669 | "all", 670 | [ 671 | "in", 672 | "admin_level", 673 | 3, 674 | 4, 675 | 5, 676 | 6, 677 | 7, 678 | 8, 679 | 9, 680 | 10 681 | ], 682 | ["==", "maritime", 0] 683 | ] 684 | }, 685 | { 686 | "id": "Disputed border", 687 | "type": "line", 688 | "source": "openmaptiles", 689 | "source-layer": "boundary", 690 | "minzoom": 0, 691 | "layout": { 692 | "line-cap": "round", 693 | "line-join": "round", 694 | "visibility": "visible" 695 | }, 696 | "paint": { 697 | "line-color": "hsl(0,0%,30%)", 698 | "line-dasharray": [2, 2], 699 | "line-width": { 700 | "stops": [ 701 | [1, 1], 702 | [5, 1.5], 703 | [10, 2] 704 | ] 705 | } 706 | }, 707 | "filter": [ 708 | "all", 709 | ["==", "admin_level", 2], 710 | ["==", "maritime", 0], 711 | ["==", "disputed", 1] 712 | ] 713 | }, 714 | { 715 | "id": "Country border", 716 | "type": "line", 717 | "source": "openmaptiles", 718 | "source-layer": "boundary", 719 | "minzoom": 0, 720 | "layout": { 721 | "line-cap": "round", 722 | "line-join": "round", 723 | "visibility": "visible" 724 | }, 725 | "paint": { 726 | "line-blur": { 727 | "stops": [ 728 | [4, 0.5], 729 | [10, 0] 730 | ] 731 | }, 732 | "line-color": "hsl(0,0%,30%)", 733 | "line-width": { 734 | "stops": [ 735 | [1, 1], 736 | [5, 1.5], 737 | [10, 2] 738 | ] 739 | } 740 | }, 741 | "filter": [ 742 | "all", 743 | ["==", "admin_level", 2], 744 | ["==", "disputed", 0], 745 | ["==", "maritime", 0] 746 | ] 747 | }, 748 | { 749 | "id": "Place labels", 750 | "type": "symbol", 751 | "source": "openmaptiles", 752 | "source-layer": "place", 753 | "minzoom": 0, 754 | "maxzoom": 16, 755 | "layout": { 756 | "symbol-sort-key": [ 757 | "to-number", 758 | ["get", "rank"] 759 | ], 760 | "text-field": "{name}", 761 | "text-font": ["Noto Sans Regular"], 762 | "text-max-width": 10, 763 | "text-size": [ 764 | "interpolate", 765 | ["linear", 1], 766 | ["zoom"], 767 | 3, 768 | 11, 769 | 8, 770 | [ 771 | "match", 772 | ["get", "class"], 773 | "city", 774 | 15, 775 | 13 776 | ], 777 | 11, 778 | [ 779 | "match", 780 | ["get", "class"], 781 | "city", 782 | 16, 783 | [ 784 | "suburb", 785 | "neighbourhood", 786 | "quarter", 787 | "hamlet", 788 | "isolated_dwelling" 789 | ], 790 | 10, 791 | 13 792 | ], 793 | 16, 794 | [ 795 | "match", 796 | ["get", "class"], 797 | "city", 798 | 21, 799 | [ 800 | "suburb", 801 | "neighbourhood", 802 | "quarter", 803 | "hamlet", 804 | "isolated_dwelling" 805 | ], 806 | 14, 807 | 16 808 | ] 809 | ], 810 | "visibility": "visible" 811 | }, 812 | "paint": { 813 | "text-color": "hsl(0, 0%, 86%)", 814 | "text-halo-blur": 0, 815 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 816 | "text-halo-width": 2 817 | }, 818 | "filter": [ 819 | "in", 820 | "class", 821 | "hamlet", 822 | "isolated_dwelling", 823 | "neighbourhood", 824 | "province", 825 | "quarter", 826 | "suburb", 827 | "town", 828 | "village" 829 | ] 830 | }, 831 | { 832 | "id": "City labels", 833 | "type": "symbol", 834 | "source": "openmaptiles", 835 | "source-layer": "place", 836 | "maxzoom": 16, 837 | "layout": { 838 | "symbol-sort-key": [ 839 | "to-number", 840 | ["get", "rank"] 841 | ], 842 | "text-field": "{name:en}", 843 | "text-font": ["Noto Sans Regular"], 844 | "text-max-width": 10, 845 | "text-size": [ 846 | "interpolate", 847 | ["linear", 1], 848 | ["zoom"], 849 | 3, 850 | 11, 851 | 8, 852 | 15, 853 | 11, 854 | 16, 855 | 16, 856 | 21 857 | ], 858 | "visibility": "visible" 859 | }, 860 | "paint": { 861 | "text-color": "hsl(0, 0%, 86%)", 862 | "text-halo-blur": 0, 863 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 864 | "text-halo-width": 2 865 | }, 866 | "filter": ["==", "class", "city"] 867 | }, 868 | { 869 | "id": "Country labels", 870 | "type": "symbol", 871 | "source": "openmaptiles", 872 | "source-layer": "place", 873 | "minzoom": 1, 874 | "maxzoom": 12, 875 | "layout": { 876 | "symbol-sort-key": [ 877 | "to-number", 878 | ["get", "rank"] 879 | ], 880 | "text-field": "{name:en}", 881 | "text-font": ["Noto Sans Bold"], 882 | "text-max-width": 8, 883 | "text-padding": { 884 | "stops": [ 885 | [1, 0], 886 | [4, 2] 887 | ] 888 | }, 889 | "text-size": [ 890 | "interpolate", 891 | ["linear", 1], 892 | ["zoom"], 893 | 0, 894 | 8, 895 | 1, 896 | 10, 897 | 4, 898 | [ 899 | "case", 900 | [">", ["get", "rank"], 2], 901 | 13, 902 | 15 903 | ], 904 | 8, 905 | [ 906 | "case", 907 | [">", ["get", "rank"], 2], 908 | 18, 909 | 22 910 | ] 911 | ], 912 | "visibility": "visible" 913 | }, 914 | "paint": { 915 | "text-color": "hsl(0, 0%, 75%)", 916 | "text-halo-blur": 1, 917 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 918 | "text-halo-width": 2 919 | }, 920 | "filter": [ 921 | "all", 922 | ["==", "class", "country"], 923 | ["!=", "iso_a2", "VA"] 924 | ] 925 | }, 926 | { 927 | "id": "Continent labels", 928 | "type": "symbol", 929 | "source": "openmaptiles", 930 | "source-layer": "place", 931 | "maxzoom": 1, 932 | "layout": { 933 | "text-field": "{name:en}", 934 | "text-font": ["Noto Sans Bold"], 935 | "text-justify": "center", 936 | "text-size": { 937 | "stops": [ 938 | [0, 12], 939 | [2, 13] 940 | ] 941 | }, 942 | "text-transform": "uppercase", 943 | "visibility": "visible" 944 | }, 945 | "paint": { 946 | "text-color": "hsl(0, 0%, 75%)", 947 | "text-halo-blur": 1, 948 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 949 | "text-halo-width": 2 950 | }, 951 | "metadata": {}, 952 | "filter": ["==", "class", "continent"] 953 | } 954 | ], 955 | "bearing": 0, 956 | "pitch": 0, 957 | "center": [0, 0], 958 | "zoom": 1 959 | } 960 | -------------------------------------------------------------------------------- /svelte-example/src/app.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | width: 100%; 5 | height: 100vh; 6 | } 7 | 8 | #app { 9 | width: 100%; 10 | height: 100%; 11 | } -------------------------------------------------------------------------------- /svelte-example/src/app.svelte: -------------------------------------------------------------------------------- 1 | 6 | 7 | 8 | 9 | 14 | 15 | 16 | -------------------------------------------------------------------------------- /svelte-example/src/components/you-are-here.svelte: -------------------------------------------------------------------------------- 1 | 25 | -------------------------------------------------------------------------------- /svelte-example/src/lib/api.ts: -------------------------------------------------------------------------------- 1 | import type { LngLatLike } from "maplibre-gl"; 2 | import { middleOfUSA } from "./constants"; 3 | 4 | export interface LocationResponse { 5 | status: string; 6 | country: string; 7 | countryCode: string; 8 | region: string; 9 | regionName: string; 10 | city: string; 11 | zip: string; 12 | lat: number; 13 | lon: number; 14 | timezone: string; 15 | isp: string; 16 | org: string; 17 | as: string; 18 | query: string; 19 | } 20 | 21 | export async function getLocation() { 22 | try { 23 | const response = await fetch("http://ip-api.com/json/"); 24 | const json = (await response.json() as LocationResponse); 25 | if (typeof json.lat === "number" && typeof json.lon === "number") { 26 | return [json.lon, json.lat] as LngLatLike; 27 | } 28 | } catch { } 29 | return middleOfUSA; 30 | } -------------------------------------------------------------------------------- /svelte-example/src/lib/constants.ts: -------------------------------------------------------------------------------- 1 | import type { LngLatLike } from "maplibre-gl"; 2 | 3 | export const middleOfUSA = [-100, 40] as LngLatLike; -------------------------------------------------------------------------------- /svelte-example/src/main.ts: -------------------------------------------------------------------------------- 1 | import './app.css' 2 | import App from './app.svelte' 3 | 4 | const app = new App({ 5 | target: document.getElementById('app')!, 6 | }) 7 | 8 | export default app 9 | -------------------------------------------------------------------------------- /svelte-example/src/vite-env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | /// 3 | -------------------------------------------------------------------------------- /svelte-example/svelte.config.js: -------------------------------------------------------------------------------- 1 | import { vitePreprocess } from '@sveltejs/vite-plugin-svelte' 2 | 3 | export default { 4 | // Consult https://svelte.dev/docs#compile-time-svelte-preprocess 5 | // for more information about preprocessors 6 | preprocess: vitePreprocess(), 7 | } 8 | -------------------------------------------------------------------------------- /svelte-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/svelte/tsconfig.json", 3 | "compilerOptions": { 4 | "target": "ESNext", 5 | "useDefineForClassFields": true, 6 | "module": "ESNext", 7 | "resolveJsonModule": true, 8 | /** 9 | * Typecheck JS in `.svelte` and `.js` files by default. 10 | * Disable checkJs if you'd like to use dynamic types in JS. 11 | * Note that setting allowJs false does not prevent the use 12 | * of JS in `.svelte` files. 13 | */ 14 | "allowJs": true, 15 | "checkJs": true, 16 | "isolatedModules": true, 17 | "moduleDetection": "force" 18 | }, 19 | "include": ["src/**/*.ts", "src/**/*.js", "src/**/*.svelte"], 20 | "references": [{ "path": "./tsconfig.node.json" }] 21 | } 22 | -------------------------------------------------------------------------------- /svelte-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "compilerOptions": { 3 | "composite": true, 4 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 5 | "skipLibCheck": true, 6 | "module": "ESNext", 7 | "moduleResolution": "bundler", 8 | "strict": true, 9 | "noEmit": true 10 | }, 11 | "include": ["vite.config.ts"] 12 | } 13 | -------------------------------------------------------------------------------- /svelte-example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { defineConfig } from 'vite' 2 | import { svelte } from '@sveltejs/vite-plugin-svelte' 3 | 4 | // https://vitejs.dev/config/ 5 | export default defineConfig({ 6 | plugins: [svelte()], 7 | }) 8 | -------------------------------------------------------------------------------- /vanilla-example/README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + Vanilla MapLibre GL JS / HTML Example 2 | 3 | > Built with script type="module", so requires an http server 4 | 5 | Open with [VS Code Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), [live-server](https://www.npmjs.com/package/live-server) or any other basic HTTP server. 6 | -------------------------------------------------------------------------------- /vanilla-example/app.js: -------------------------------------------------------------------------------- 1 | import "https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"; 2 | 3 | const middleOfUSA = [-100, 40]; 4 | 5 | async function getLocation() { 6 | try { 7 | const response = await fetch("http://ip-api.com/json/"); 8 | const json = await response.json(); 9 | if (typeof json.lat === "number" && typeof json.lon === "number") { 10 | return [json.lon, json.lat]; 11 | } 12 | } catch (error) {} 13 | return middleOfUSA; 14 | } 15 | 16 | async function init() { 17 | const map = new maplibregl.Map({ 18 | style: "/styles/dark.json", 19 | // style: "https://tiles.openfreemap.org/styles/liberty", 20 | center: middleOfUSA, 21 | zoom: 2, 22 | container: "map", 23 | }); 24 | 25 | const location = await getLocation(); 26 | if (location !== middleOfUSA) { 27 | map.flyTo({ center: location, zoom: 8 }); 28 | 29 | new maplibregl.Popup({ 30 | closeOnClick: false, 31 | }) 32 | .setLngLat(location) 33 | .setHTML("

You are approximately here!

") 34 | .addTo(map); 35 | } 36 | } 37 | 38 | init(); 39 | -------------------------------------------------------------------------------- /vanilla-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello World 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /vanilla-example/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | margin: 0; 4 | padding: 0; 5 | width: 100%; 6 | height: 100vh; 7 | } 8 | 9 | #map { 10 | width: 100%; 11 | height: 100%; 12 | } -------------------------------------------------------------------------------- /vanilla-example/styles/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "id": "dark", 4 | "name": "Dark", 5 | "sources": { 6 | "openmaptiles": { 7 | "type": "vector", 8 | "url": "https://tiles.openfreemap.org/planet" 9 | } 10 | }, 11 | "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm", 12 | "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", 13 | "layers": [ 14 | { 15 | "id": "Background", 16 | "type": "background", 17 | "layout": { "visibility": "visible" }, 18 | "paint": { 19 | "background-color": [ 20 | "interpolate", 21 | ["exponential", 1], 22 | ["zoom"], 23 | 6, 24 | "hsl(0, 0%, 17%)", 25 | 20, 26 | "hsl(0, 0%, 18%)" 27 | ] 28 | } 29 | }, 30 | { 31 | "id": "Residential", 32 | "type": "fill", 33 | "source": "openmaptiles", 34 | "source-layer": "landuse", 35 | "maxzoom": 14, 36 | "layout": { "visibility": "visible" }, 37 | "paint": { 38 | "fill-color": { 39 | "stops": [ 40 | [2, "hsl(0, 0%, 16%)"], 41 | [14, "hsl(0, 0%, 17%)"] 42 | ] 43 | } 44 | }, 45 | "filter": ["in", "class", "neighbourhood", "residential", "suburb"] 46 | }, 47 | { 48 | "id": "Sand", 49 | "type": "fill", 50 | "source": "openmaptiles", 51 | "source-layer": "landcover", 52 | "minzoom": 8, 53 | "layout": { "visibility": "visible" }, 54 | "paint": { 55 | "fill-antialias": false, 56 | "fill-color": "hsla(83, 77%, 8%, 0.24)", 57 | "fill-opacity": { 58 | "stops": [ 59 | [7, 0.7], 60 | [12, 1] 61 | ] 62 | } 63 | }, 64 | "filter": ["==", "class", "sand"] 65 | }, 66 | { 67 | "id": "Grass", 68 | "type": "fill", 69 | "source": "openmaptiles", 70 | "source-layer": "landcover", 71 | "minzoom": 8, 72 | "layout": { "visibility": "visible" }, 73 | "paint": { 74 | "fill-antialias": false, 75 | "fill-color": "hsla(83, 38%, 12%, 0.6)", 76 | "fill-opacity": { 77 | "stops": [ 78 | [7, 0.7], 79 | [12, 1] 80 | ] 81 | } 82 | }, 83 | "filter": ["==", "class", "grass"] 84 | }, 85 | { 86 | "id": "Wood", 87 | "type": "fill", 88 | "source": "openmaptiles", 89 | "source-layer": "landcover", 90 | "minzoom": 8, 91 | "layout": { "visibility": "visible" }, 92 | "paint": { 93 | "fill-antialias": false, 94 | "fill-color": "hsla(83, 38%, 11%, 0.6)", 95 | "fill-opacity": { 96 | "stops": [ 97 | [7, 0.7], 98 | [12, 1] 99 | ] 100 | } 101 | }, 102 | "filter": ["==", "class", "wood"] 103 | }, 104 | { 105 | "id": "Water", 106 | "type": "fill", 107 | "source": "openmaptiles", 108 | "source-layer": "water", 109 | "layout": { "visibility": "visible" }, 110 | "paint": { 111 | "fill-color": "hsl(205, 36%, 21%)", 112 | "fill-opacity": ["match", ["get", "intermittent"], 1, 0.7, 1] 113 | }, 114 | "filter": ["all", ["!=", "brunnel", "tunnel"]] 115 | }, 116 | { 117 | "id": "River", 118 | "type": "line", 119 | "source": "openmaptiles", 120 | "source-layer": "waterway", 121 | "layout": { "visibility": "visible" }, 122 | "paint": { 123 | "line-color": "hsl(205, 36%, 21%)", 124 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.7, 1], 125 | "line-width": { 126 | "stops": [ 127 | [9, 1], 128 | [18, 3] 129 | ] 130 | } 131 | }, 132 | "filter": ["!=", "brunnel", "tunnel"] 133 | }, 134 | { 135 | "id": "River intermittent", 136 | "type": "line", 137 | "source": "openmaptiles", 138 | "source-layer": "waterway", 139 | "layout": { "visibility": "visible" }, 140 | "paint": { 141 | "line-color": "hsl(205, 36%, 21%)", 142 | "line-dasharray": [2, 1], 143 | "line-opacity": 1, 144 | "line-width": { 145 | "stops": [ 146 | [9, 1], 147 | [18, 3] 148 | ] 149 | } 150 | }, 151 | "filter": ["==", "intermittent", 1] 152 | }, 153 | { 154 | "id": "Transit tunnel", 155 | "type": "line", 156 | "source": "openmaptiles", 157 | "source-layer": "transportation", 158 | "minzoom": 4, 159 | "layout": { 160 | "line-cap": "butt", 161 | "line-join": "miter", 162 | "visibility": "visible" 163 | }, 164 | "paint": { 165 | "line-color": "hsl(239, 12%, 18%)", 166 | "line-dasharray": [3, 3], 167 | "line-opacity": 0.5, 168 | "line-width": { 169 | "stops": [ 170 | [14, 0.5], 171 | [16, 1.2], 172 | [18, 2] 173 | ] 174 | } 175 | }, 176 | "filter": ["all", ["==", "brunnel", "tunnel"], ["==", "class", "transit"]] 177 | }, 178 | { 179 | "id": "Bridge", 180 | "type": "fill", 181 | "source": "openmaptiles", 182 | "source-layer": "transportation", 183 | "layout": { "visibility": "visible" }, 184 | "paint": { "fill-color": "hsl(0, 0%, 18%)", "fill-opacity": 0.7 }, 185 | "filter": ["==", "brunnel", "bridge"] 186 | }, 187 | { 188 | "id": "Pier", 189 | "type": "fill", 190 | "source": "openmaptiles", 191 | "source-layer": "transportation", 192 | "layout": { "visibility": "visible" }, 193 | "paint": { 194 | "fill-antialias": true, 195 | "fill-color": "hsl(0, 0%, 18%)", 196 | "fill-opacity": 1 197 | }, 198 | "metadata": {}, 199 | "filter": ["==", "class", "pier"] 200 | }, 201 | { 202 | "id": "Road network", 203 | "type": "line", 204 | "source": "openmaptiles", 205 | "source-layer": "transportation", 206 | "minzoom": 4, 207 | "layout": { 208 | "line-cap": "round", 209 | "line-join": "round", 210 | "visibility": "visible" 211 | }, 212 | "paint": { 213 | "line-color": "hsl(205, 0%, 27%)", 214 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.5, 1], 215 | "line-width": [ 216 | "interpolate", 217 | ["linear", 2], 218 | ["zoom"], 219 | 4, 220 | 0.5, 221 | 5, 222 | 0.75, 223 | 6, 224 | 1, 225 | 10, 226 | [ 227 | "match", 228 | ["get", "class"], 229 | ["motorway"], 230 | ["match", ["get", "brunnel"], ["bridge"], 0, 2.5], 231 | ["trunk"], 232 | 1.5, 233 | 1 234 | ], 235 | 12, 236 | [ 237 | "match", 238 | ["get", "class"], 239 | ["motorway"], 240 | ["match", ["get", "ramp"], 1, 1, 4], 241 | ["trunk"], 242 | 2, 243 | ["primary"], 244 | 2.5, 245 | ["secondary", "tertiary"], 246 | 2, 247 | ["minor"], 248 | 1, 249 | ["pier", "service", "track"], 250 | 0.5, 251 | 0.5 252 | ], 253 | 14, 254 | [ 255 | "match", 256 | ["get", "class"], 257 | ["motorway"], 258 | ["match", ["get", "ramp"], 1, 5, 6], 259 | ["trunk"], 260 | 3, 261 | ["primary"], 262 | 5, 263 | ["secondary"], 264 | 4, 265 | ["tertiary"], 266 | 3, 267 | ["minor"], 268 | 2, 269 | ["pier", "service", "track"], 270 | 1, 271 | 2 272 | ], 273 | 16, 274 | [ 275 | "match", 276 | ["get", "class"], 277 | ["motorway", "trunk", "primary"], 278 | 8, 279 | ["secondary"], 280 | 7, 281 | ["tertiary"], 282 | 6, 283 | ["minor"], 284 | 4, 285 | ["pier", "service", "track"], 286 | 2, 287 | 4 288 | ], 289 | 20, 290 | [ 291 | "match", 292 | ["get", "class"], 293 | ["motorway", "trunk", "primary"], 294 | 28, 295 | ["secondary"], 296 | 24, 297 | ["tertiary"], 298 | 20, 299 | ["minor", "service", "track", "pier"], 300 | 16, 301 | 16 302 | ] 303 | ] 304 | }, 305 | "filter": ["!in", "class", "bridge", "ferry", "path", "rail", "transit"] 306 | }, 307 | { 308 | "id": "Path", 309 | "type": "line", 310 | "source": "openmaptiles", 311 | "source-layer": "transportation", 312 | "minzoom": 15, 313 | "layout": { 314 | "line-cap": "square", 315 | "line-join": "bevel", 316 | "visibility": "visible" 317 | }, 318 | "paint": { 319 | "line-color": "hsl(205, 0%, 27%)", 320 | "line-dasharray": [1, 1], 321 | "line-width": { 322 | "base": 1.55, 323 | "stops": [ 324 | [15, 0.5], 325 | [16, 1], 326 | [18, 2], 327 | [20, 3], 328 | [22, 4] 329 | ] 330 | } 331 | }, 332 | "filter": ["==", "class", "path"] 333 | }, 334 | { 335 | "id": "Building", 336 | "type": "fill", 337 | "source": "openmaptiles", 338 | "source-layer": "building", 339 | "layout": { "visibility": "visible" }, 340 | "paint": { 341 | "fill-antialias": true, 342 | "fill-color": { 343 | "stops": [ 344 | [13, "hsl(0, 0%, 14%)"], 345 | [16, "hsl(0, 0%, 15%)"] 346 | ] 347 | }, 348 | "fill-opacity": 1 349 | } 350 | }, 351 | { 352 | "id": "Railway", 353 | "type": "line", 354 | "source": "openmaptiles", 355 | "source-layer": "transportation", 356 | "minzoom": 9, 357 | "layout": { "visibility": "visible" }, 358 | "paint": { 359 | "line-color": "hsla(238, 12%, 18%, 0.8)", 360 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.25, 1], 361 | "line-width": [ 362 | "interpolate", 363 | ["linear", 1], 364 | ["zoom"], 365 | 9, 366 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.5], 367 | 12, 368 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.6], 369 | 16, 370 | ["match", ["get", "service"], ["yard", "spur"], 0.75, 2], 371 | 22, 372 | ["match", ["get", "service"], ["yard", "spur"], 1.5, 3] 373 | ] 374 | }, 375 | "filter": ["==", "class", "rail"] 376 | }, 377 | { 378 | "id": "Transit", 379 | "type": "line", 380 | "source": "openmaptiles", 381 | "source-layer": "transportation", 382 | "layout": { "visibility": "visible" }, 383 | "paint": { 384 | "line-color": "hsl(239, 12%, 18%)", 385 | "line-opacity": 0.5, 386 | "line-width": { 387 | "stops": [ 388 | [14, 0.5], 389 | [16, 1.2], 390 | [18, 2] 391 | ] 392 | } 393 | }, 394 | "filter": ["all", ["==", "class", "transit"], ["!=", "brunnel", "tunnel"]] 395 | }, 396 | { 397 | "id": "Aeroway", 398 | "type": "line", 399 | "source": "openmaptiles", 400 | "source-layer": "aeroway", 401 | "minzoom": 10, 402 | "layout": { 403 | "line-cap": "round", 404 | "line-join": "round", 405 | "visibility": "visible" 406 | }, 407 | "paint": { 408 | "line-color": "hsl(205, 0%, 27%)", 409 | "line-opacity": 1, 410 | "line-width": [ 411 | "interpolate", 412 | ["linear", 2], 413 | ["zoom"], 414 | 10, 415 | ["match", ["get", "class"], ["runway"], 1, ["taxiway"], 0.5, 0], 416 | 14, 417 | ["match", ["get", "class"], ["runway"], 3, ["taxiway"], 2, 0], 418 | 16, 419 | ["match", ["get", "class"], ["runway"], 10, ["taxiway"], 6, 0] 420 | ] 421 | } 422 | }, 423 | { 424 | "id": "Airport labels", 425 | "type": "symbol", 426 | "source": "openmaptiles", 427 | "source-layer": "aerodrome_label", 428 | "minzoom": 10, 429 | "layout": { 430 | "text-anchor": "top", 431 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 432 | "text-font": ["Noto Sans Regular"], 433 | "text-max-width": 8, 434 | "text-offset": [0, 0.5], 435 | "text-size": { 436 | "stops": [ 437 | [10, 10], 438 | [14, 12], 439 | [16, 14] 440 | ] 441 | }, 442 | "visibility": "visible" 443 | }, 444 | "paint": { 445 | "text-color": "hsl(83, 0%, 76%)", 446 | "text-halo-blur": 1, 447 | "text-halo-color": "hsl(0, 0%, 0%)", 448 | "text-halo-width": 1.4 449 | }, 450 | "filter": ["has", "iata"] 451 | }, 452 | { 453 | "id": "Station labels", 454 | "type": "symbol", 455 | "source": "openmaptiles", 456 | "source-layer": "poi", 457 | "minzoom": 12, 458 | "layout": { 459 | "text-anchor": "top", 460 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 461 | "text-font": ["Noto Sans Regular"], 462 | "text-max-width": 8, 463 | "text-offset": [0, 0.5], 464 | "text-size": { 465 | "stops": [ 466 | [10, 10], 467 | [14, 12], 468 | [16, 14] 469 | ] 470 | }, 471 | "visibility": "visible" 472 | }, 473 | "paint": { 474 | "text-color": "hsl(83, 0%, 76%)", 475 | "text-halo-blur": 1, 476 | "text-halo-color": "hsl(83, 0%, 0%)", 477 | "text-halo-width": 1.4 478 | }, 479 | "filter": ["all", ["==", "class", "railway"], ["has", "subclass"]] 480 | }, 481 | { 482 | "id": "Road labels", 483 | "type": "symbol", 484 | "source": "openmaptiles", 485 | "source-layer": "transportation_name", 486 | "minzoom": 14, 487 | "layout": { 488 | "symbol-placement": "line", 489 | "symbol-spacing": { 490 | "stops": [ 491 | [13, 250], 492 | [20, 350], 493 | [22, 600] 494 | ] 495 | }, 496 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 497 | "text-font": ["Noto Sans Regular"], 498 | "text-letter-spacing": 0.1, 499 | "text-rotation-alignment": "map", 500 | "text-size": { 501 | "base": 1.4, 502 | "stops": [ 503 | [14, 8], 504 | [17, 10], 505 | [20, 12] 506 | ] 507 | }, 508 | "text-transform": "uppercase", 509 | "visibility": "visible" 510 | }, 511 | "paint": { 512 | "text-color": "hsl(83, 0%, 76%)", 513 | "text-halo-color": "hsl(83, 0%, 0%)", 514 | "text-halo-width": 1 515 | }, 516 | "filter": [ 517 | "all", 518 | ["==", "$type", "LineString"], 519 | ["!in", "class", "aerialway", "ferry", "service"] 520 | ] 521 | }, 522 | { 523 | "id": "Other border", 524 | "type": "line", 525 | "source": "openmaptiles", 526 | "source-layer": "boundary", 527 | "minzoom": 3, 528 | "layout": { "visibility": "visible" }, 529 | "paint": { 530 | "line-color": "hsla(83, 0%, 28%, 0.65)", 531 | "line-dasharray": [2, 1], 532 | "line-width": { 533 | "stops": [ 534 | [4, 0.8], 535 | [11, 1.75], 536 | [18, 2.5] 537 | ] 538 | } 539 | }, 540 | "filter": [ 541 | "all", 542 | ["in", "admin_level", 3, 4, 5, 6, 7, 8, 9, 10], 543 | ["==", "maritime", 0] 544 | ] 545 | }, 546 | { 547 | "id": "Disputed border", 548 | "type": "line", 549 | "source": "openmaptiles", 550 | "source-layer": "boundary", 551 | "minzoom": 0, 552 | "layout": { 553 | "line-cap": "round", 554 | "line-join": "round", 555 | "visibility": "visible" 556 | }, 557 | "paint": { 558 | "line-color": "hsl(0,0%,30%)", 559 | "line-dasharray": [2, 2], 560 | "line-width": { 561 | "stops": [ 562 | [1, 1], 563 | [5, 1.5], 564 | [10, 2] 565 | ] 566 | } 567 | }, 568 | "filter": [ 569 | "all", 570 | ["==", "admin_level", 2], 571 | ["==", "maritime", 0], 572 | ["==", "disputed", 1] 573 | ] 574 | }, 575 | { 576 | "id": "Country border", 577 | "type": "line", 578 | "source": "openmaptiles", 579 | "source-layer": "boundary", 580 | "minzoom": 0, 581 | "layout": { 582 | "line-cap": "round", 583 | "line-join": "round", 584 | "visibility": "visible" 585 | }, 586 | "paint": { 587 | "line-blur": { 588 | "stops": [ 589 | [4, 0.5], 590 | [10, 0] 591 | ] 592 | }, 593 | "line-color": "hsl(0,0%,30%)", 594 | "line-width": { 595 | "stops": [ 596 | [1, 1], 597 | [5, 1.5], 598 | [10, 2] 599 | ] 600 | } 601 | }, 602 | "filter": [ 603 | "all", 604 | ["==", "admin_level", 2], 605 | ["==", "disputed", 0], 606 | ["==", "maritime", 0] 607 | ] 608 | }, 609 | { 610 | "id": "Place labels", 611 | "type": "symbol", 612 | "source": "openmaptiles", 613 | "source-layer": "place", 614 | "minzoom": 0, 615 | "maxzoom": 16, 616 | "layout": { 617 | "symbol-sort-key": ["to-number", ["get", "rank"]], 618 | "text-field": "{name}", 619 | "text-font": ["Noto Sans Regular"], 620 | "text-max-width": 10, 621 | "text-size": [ 622 | "interpolate", 623 | ["linear", 1], 624 | ["zoom"], 625 | 3, 626 | 11, 627 | 8, 628 | ["match", ["get", "class"], "city", 15, 13], 629 | 11, 630 | [ 631 | "match", 632 | ["get", "class"], 633 | "city", 634 | 16, 635 | [ 636 | "suburb", 637 | "neighbourhood", 638 | "quarter", 639 | "hamlet", 640 | "isolated_dwelling" 641 | ], 642 | 10, 643 | 13 644 | ], 645 | 16, 646 | [ 647 | "match", 648 | ["get", "class"], 649 | "city", 650 | 21, 651 | [ 652 | "suburb", 653 | "neighbourhood", 654 | "quarter", 655 | "hamlet", 656 | "isolated_dwelling" 657 | ], 658 | 14, 659 | 16 660 | ] 661 | ], 662 | "visibility": "visible" 663 | }, 664 | "paint": { 665 | "text-color": "hsl(0, 0%, 86%)", 666 | "text-halo-blur": 0, 667 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 668 | "text-halo-width": 2 669 | }, 670 | "filter": [ 671 | "in", 672 | "class", 673 | "hamlet", 674 | "isolated_dwelling", 675 | "neighbourhood", 676 | "province", 677 | "quarter", 678 | "suburb", 679 | "town", 680 | "village" 681 | ] 682 | }, 683 | { 684 | "id": "City labels", 685 | "type": "symbol", 686 | "source": "openmaptiles", 687 | "source-layer": "place", 688 | "maxzoom": 16, 689 | "layout": { 690 | "symbol-sort-key": ["to-number", ["get", "rank"]], 691 | "text-field": "{name:en}", 692 | "text-font": ["Noto Sans Regular"], 693 | "text-max-width": 10, 694 | "text-size": [ 695 | "interpolate", 696 | ["linear", 1], 697 | ["zoom"], 698 | 3, 699 | 11, 700 | 8, 701 | 15, 702 | 11, 703 | 16, 704 | 16, 705 | 21 706 | ], 707 | "visibility": "visible" 708 | }, 709 | "paint": { 710 | "text-color": "hsl(0, 0%, 86%)", 711 | "text-halo-blur": 0, 712 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 713 | "text-halo-width": 2 714 | }, 715 | "filter": ["==", "class", "city"] 716 | }, 717 | { 718 | "id": "Country labels", 719 | "type": "symbol", 720 | "source": "openmaptiles", 721 | "source-layer": "place", 722 | "minzoom": 1, 723 | "maxzoom": 12, 724 | "layout": { 725 | "symbol-sort-key": ["to-number", ["get", "rank"]], 726 | "text-field": "{name:en}", 727 | "text-font": ["Noto Sans Bold"], 728 | "text-max-width": 8, 729 | "text-padding": { 730 | "stops": [ 731 | [1, 0], 732 | [4, 2] 733 | ] 734 | }, 735 | "text-size": [ 736 | "interpolate", 737 | ["linear", 1], 738 | ["zoom"], 739 | 0, 740 | 8, 741 | 1, 742 | 10, 743 | 4, 744 | ["case", [">", ["get", "rank"], 2], 13, 15], 745 | 8, 746 | ["case", [">", ["get", "rank"], 2], 18, 22] 747 | ], 748 | "visibility": "visible" 749 | }, 750 | "paint": { 751 | "text-color": "hsl(0, 0%, 75%)", 752 | "text-halo-blur": 1, 753 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 754 | "text-halo-width": 2 755 | }, 756 | "filter": ["all", ["==", "class", "country"], ["!=", "iso_a2", "VA"]] 757 | }, 758 | { 759 | "id": "Continent labels", 760 | "type": "symbol", 761 | "source": "openmaptiles", 762 | "source-layer": "place", 763 | "maxzoom": 1, 764 | "layout": { 765 | "text-field": "{name:en}", 766 | "text-font": ["Noto Sans Bold"], 767 | "text-justify": "center", 768 | "text-size": { 769 | "stops": [ 770 | [0, 12], 771 | [2, 13] 772 | ] 773 | }, 774 | "text-transform": "uppercase", 775 | "visibility": "visible" 776 | }, 777 | "paint": { 778 | "text-color": "hsl(0, 0%, 75%)", 779 | "text-halo-blur": 1, 780 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 781 | "text-halo-width": 2 782 | }, 783 | "metadata": {}, 784 | "filter": ["==", "class", "continent"] 785 | } 786 | ], 787 | "bearing": 0, 788 | "pitch": 0, 789 | "center": [0, 0], 790 | "zoom": 1 791 | } 792 | -------------------------------------------------------------------------------- /vanilla-leaflet-example/README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + Vanilla MapLibre GL JS / HTML + Leaflet Example 2 | 3 | > Built with script type="module", so requires an http server 4 | 5 | Open with [VS Code Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer), [live-server](https://www.npmjs.com/package/live-server) or any other basic HTTP server. 6 | -------------------------------------------------------------------------------- /vanilla-leaflet-example/app.js: -------------------------------------------------------------------------------- 1 | import "https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"; 2 | import "https://unpkg.com/maplibre-gl@4.7.1/dist/maplibre-gl.js"; 3 | import "https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.22/leaflet-maplibre-gl.js"; 4 | 5 | const middleOfUSA = [40, -100]; 6 | 7 | async function getLocation() { 8 | try { 9 | const response = await fetch("http://ip-api.com/json/"); 10 | const json = await response.json(); 11 | if (typeof json.lat === "number" && typeof json.lon === "number") { 12 | return [json.lat, json.lon]; 13 | } 14 | } catch (error) {} 15 | return middleOfUSA; 16 | } 17 | 18 | async function init() { 19 | const map = L 20 | .map('map') 21 | .setView(middleOfUSA, 3); 22 | 23 | L.maplibreGL({ 24 | // style: "/styles/dark.json", 25 | style: 'https://tiles.openfreemap.org/styles/liberty', 26 | attribution: `OpenFreeMap © OpenMapTiles Data from OpenStreetMap`, 27 | }).addTo(map); 28 | 29 | const location = await getLocation(); 30 | if (location !== middleOfUSA) { 31 | map.flyTo(location, 8); 32 | 33 | L.popup() 34 | .setLatLng(location) 35 | .setContent("

You are approximately here!

") 36 | .openOn(map); 37 | } 38 | } 39 | 40 | init(); 41 | -------------------------------------------------------------------------------- /vanilla-leaflet-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Hello World 8 | 9 | 10 | 11 | 12 | 13 |
14 | 15 | 16 | -------------------------------------------------------------------------------- /vanilla-leaflet-example/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | overflow: hidden; 3 | margin: 0; 4 | padding: 0; 5 | width: 100%; 6 | height: 100vh; 7 | } 8 | 9 | #map { 10 | width: 100%; 11 | height: 100%; 12 | } -------------------------------------------------------------------------------- /vanilla-leaflet-example/styles/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "id": "dark", 4 | "name": "Dark", 5 | "sources": { 6 | "openmaptiles": { 7 | "type": "vector", 8 | "url": "https://tiles.openfreemap.org/planet" 9 | } 10 | }, 11 | "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm", 12 | "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", 13 | "layers": [ 14 | { 15 | "id": "Background", 16 | "type": "background", 17 | "layout": { "visibility": "visible" }, 18 | "paint": { 19 | "background-color": [ 20 | "interpolate", 21 | ["exponential", 1], 22 | ["zoom"], 23 | 6, 24 | "hsl(0, 0%, 17%)", 25 | 20, 26 | "hsl(0, 0%, 18%)" 27 | ] 28 | } 29 | }, 30 | { 31 | "id": "Residential", 32 | "type": "fill", 33 | "source": "openmaptiles", 34 | "source-layer": "landuse", 35 | "maxzoom": 14, 36 | "layout": { "visibility": "visible" }, 37 | "paint": { 38 | "fill-color": { 39 | "stops": [ 40 | [2, "hsl(0, 0%, 16%)"], 41 | [14, "hsl(0, 0%, 17%)"] 42 | ] 43 | } 44 | }, 45 | "filter": ["in", "class", "neighbourhood", "residential", "suburb"] 46 | }, 47 | { 48 | "id": "Sand", 49 | "type": "fill", 50 | "source": "openmaptiles", 51 | "source-layer": "landcover", 52 | "minzoom": 8, 53 | "layout": { "visibility": "visible" }, 54 | "paint": { 55 | "fill-antialias": false, 56 | "fill-color": "hsla(83, 77%, 8%, 0.24)", 57 | "fill-opacity": { 58 | "stops": [ 59 | [7, 0.7], 60 | [12, 1] 61 | ] 62 | } 63 | }, 64 | "filter": ["==", "class", "sand"] 65 | }, 66 | { 67 | "id": "Grass", 68 | "type": "fill", 69 | "source": "openmaptiles", 70 | "source-layer": "landcover", 71 | "minzoom": 8, 72 | "layout": { "visibility": "visible" }, 73 | "paint": { 74 | "fill-antialias": false, 75 | "fill-color": "hsla(83, 38%, 12%, 0.6)", 76 | "fill-opacity": { 77 | "stops": [ 78 | [7, 0.7], 79 | [12, 1] 80 | ] 81 | } 82 | }, 83 | "filter": ["==", "class", "grass"] 84 | }, 85 | { 86 | "id": "Wood", 87 | "type": "fill", 88 | "source": "openmaptiles", 89 | "source-layer": "landcover", 90 | "minzoom": 8, 91 | "layout": { "visibility": "visible" }, 92 | "paint": { 93 | "fill-antialias": false, 94 | "fill-color": "hsla(83, 38%, 11%, 0.6)", 95 | "fill-opacity": { 96 | "stops": [ 97 | [7, 0.7], 98 | [12, 1] 99 | ] 100 | } 101 | }, 102 | "filter": ["==", "class", "wood"] 103 | }, 104 | { 105 | "id": "Water", 106 | "type": "fill", 107 | "source": "openmaptiles", 108 | "source-layer": "water", 109 | "layout": { "visibility": "visible" }, 110 | "paint": { 111 | "fill-color": "hsl(205, 36%, 21%)", 112 | "fill-opacity": ["match", ["get", "intermittent"], 1, 0.7, 1] 113 | }, 114 | "filter": ["all", ["!=", "brunnel", "tunnel"]] 115 | }, 116 | { 117 | "id": "River", 118 | "type": "line", 119 | "source": "openmaptiles", 120 | "source-layer": "waterway", 121 | "layout": { "visibility": "visible" }, 122 | "paint": { 123 | "line-color": "hsl(205, 36%, 21%)", 124 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.7, 1], 125 | "line-width": { 126 | "stops": [ 127 | [9, 1], 128 | [18, 3] 129 | ] 130 | } 131 | }, 132 | "filter": ["!=", "brunnel", "tunnel"] 133 | }, 134 | { 135 | "id": "River intermittent", 136 | "type": "line", 137 | "source": "openmaptiles", 138 | "source-layer": "waterway", 139 | "layout": { "visibility": "visible" }, 140 | "paint": { 141 | "line-color": "hsl(205, 36%, 21%)", 142 | "line-dasharray": [2, 1], 143 | "line-opacity": 1, 144 | "line-width": { 145 | "stops": [ 146 | [9, 1], 147 | [18, 3] 148 | ] 149 | } 150 | }, 151 | "filter": ["==", "intermittent", 1] 152 | }, 153 | { 154 | "id": "Transit tunnel", 155 | "type": "line", 156 | "source": "openmaptiles", 157 | "source-layer": "transportation", 158 | "minzoom": 4, 159 | "layout": { 160 | "line-cap": "butt", 161 | "line-join": "miter", 162 | "visibility": "visible" 163 | }, 164 | "paint": { 165 | "line-color": "hsl(239, 12%, 18%)", 166 | "line-dasharray": [3, 3], 167 | "line-opacity": 0.5, 168 | "line-width": { 169 | "stops": [ 170 | [14, 0.5], 171 | [16, 1.2], 172 | [18, 2] 173 | ] 174 | } 175 | }, 176 | "filter": ["all", ["==", "brunnel", "tunnel"], ["==", "class", "transit"]] 177 | }, 178 | { 179 | "id": "Bridge", 180 | "type": "fill", 181 | "source": "openmaptiles", 182 | "source-layer": "transportation", 183 | "layout": { "visibility": "visible" }, 184 | "paint": { "fill-color": "hsl(0, 0%, 18%)", "fill-opacity": 0.7 }, 185 | "filter": ["==", "brunnel", "bridge"] 186 | }, 187 | { 188 | "id": "Pier", 189 | "type": "fill", 190 | "source": "openmaptiles", 191 | "source-layer": "transportation", 192 | "layout": { "visibility": "visible" }, 193 | "paint": { 194 | "fill-antialias": true, 195 | "fill-color": "hsl(0, 0%, 18%)", 196 | "fill-opacity": 1 197 | }, 198 | "metadata": {}, 199 | "filter": ["==", "class", "pier"] 200 | }, 201 | { 202 | "id": "Road network", 203 | "type": "line", 204 | "source": "openmaptiles", 205 | "source-layer": "transportation", 206 | "minzoom": 4, 207 | "layout": { 208 | "line-cap": "round", 209 | "line-join": "round", 210 | "visibility": "visible" 211 | }, 212 | "paint": { 213 | "line-color": "hsl(205, 0%, 27%)", 214 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.5, 1], 215 | "line-width": [ 216 | "interpolate", 217 | ["linear", 2], 218 | ["zoom"], 219 | 4, 220 | 0.5, 221 | 5, 222 | 0.75, 223 | 6, 224 | 1, 225 | 10, 226 | [ 227 | "match", 228 | ["get", "class"], 229 | ["motorway"], 230 | ["match", ["get", "brunnel"], ["bridge"], 0, 2.5], 231 | ["trunk"], 232 | 1.5, 233 | 1 234 | ], 235 | 12, 236 | [ 237 | "match", 238 | ["get", "class"], 239 | ["motorway"], 240 | ["match", ["get", "ramp"], 1, 1, 4], 241 | ["trunk"], 242 | 2, 243 | ["primary"], 244 | 2.5, 245 | ["secondary", "tertiary"], 246 | 2, 247 | ["minor"], 248 | 1, 249 | ["pier", "service", "track"], 250 | 0.5, 251 | 0.5 252 | ], 253 | 14, 254 | [ 255 | "match", 256 | ["get", "class"], 257 | ["motorway"], 258 | ["match", ["get", "ramp"], 1, 5, 6], 259 | ["trunk"], 260 | 3, 261 | ["primary"], 262 | 5, 263 | ["secondary"], 264 | 4, 265 | ["tertiary"], 266 | 3, 267 | ["minor"], 268 | 2, 269 | ["pier", "service", "track"], 270 | 1, 271 | 2 272 | ], 273 | 16, 274 | [ 275 | "match", 276 | ["get", "class"], 277 | ["motorway", "trunk", "primary"], 278 | 8, 279 | ["secondary"], 280 | 7, 281 | ["tertiary"], 282 | 6, 283 | ["minor"], 284 | 4, 285 | ["pier", "service", "track"], 286 | 2, 287 | 4 288 | ], 289 | 20, 290 | [ 291 | "match", 292 | ["get", "class"], 293 | ["motorway", "trunk", "primary"], 294 | 28, 295 | ["secondary"], 296 | 24, 297 | ["tertiary"], 298 | 20, 299 | ["minor", "service", "track", "pier"], 300 | 16, 301 | 16 302 | ] 303 | ] 304 | }, 305 | "filter": ["!in", "class", "bridge", "ferry", "path", "rail", "transit"] 306 | }, 307 | { 308 | "id": "Path", 309 | "type": "line", 310 | "source": "openmaptiles", 311 | "source-layer": "transportation", 312 | "minzoom": 15, 313 | "layout": { 314 | "line-cap": "square", 315 | "line-join": "bevel", 316 | "visibility": "visible" 317 | }, 318 | "paint": { 319 | "line-color": "hsl(205, 0%, 27%)", 320 | "line-dasharray": [1, 1], 321 | "line-width": { 322 | "base": 1.55, 323 | "stops": [ 324 | [15, 0.5], 325 | [16, 1], 326 | [18, 2], 327 | [20, 3], 328 | [22, 4] 329 | ] 330 | } 331 | }, 332 | "filter": ["==", "class", "path"] 333 | }, 334 | { 335 | "id": "Building", 336 | "type": "fill", 337 | "source": "openmaptiles", 338 | "source-layer": "building", 339 | "layout": { "visibility": "visible" }, 340 | "paint": { 341 | "fill-antialias": true, 342 | "fill-color": { 343 | "stops": [ 344 | [13, "hsl(0, 0%, 14%)"], 345 | [16, "hsl(0, 0%, 15%)"] 346 | ] 347 | }, 348 | "fill-opacity": 1 349 | } 350 | }, 351 | { 352 | "id": "Railway", 353 | "type": "line", 354 | "source": "openmaptiles", 355 | "source-layer": "transportation", 356 | "minzoom": 9, 357 | "layout": { "visibility": "visible" }, 358 | "paint": { 359 | "line-color": "hsla(238, 12%, 18%, 0.8)", 360 | "line-opacity": ["match", ["get", "brunnel"], "tunnel", 0.25, 1], 361 | "line-width": [ 362 | "interpolate", 363 | ["linear", 1], 364 | ["zoom"], 365 | 9, 366 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.5], 367 | 12, 368 | ["match", ["get", "service"], ["yard", "spur"], 0, 0.6], 369 | 16, 370 | ["match", ["get", "service"], ["yard", "spur"], 0.75, 2], 371 | 22, 372 | ["match", ["get", "service"], ["yard", "spur"], 1.5, 3] 373 | ] 374 | }, 375 | "filter": ["==", "class", "rail"] 376 | }, 377 | { 378 | "id": "Transit", 379 | "type": "line", 380 | "source": "openmaptiles", 381 | "source-layer": "transportation", 382 | "layout": { "visibility": "visible" }, 383 | "paint": { 384 | "line-color": "hsl(239, 12%, 18%)", 385 | "line-opacity": 0.5, 386 | "line-width": { 387 | "stops": [ 388 | [14, 0.5], 389 | [16, 1.2], 390 | [18, 2] 391 | ] 392 | } 393 | }, 394 | "filter": ["all", ["==", "class", "transit"], ["!=", "brunnel", "tunnel"]] 395 | }, 396 | { 397 | "id": "Aeroway", 398 | "type": "line", 399 | "source": "openmaptiles", 400 | "source-layer": "aeroway", 401 | "minzoom": 10, 402 | "layout": { 403 | "line-cap": "round", 404 | "line-join": "round", 405 | "visibility": "visible" 406 | }, 407 | "paint": { 408 | "line-color": "hsl(205, 0%, 27%)", 409 | "line-opacity": 1, 410 | "line-width": [ 411 | "interpolate", 412 | ["linear", 2], 413 | ["zoom"], 414 | 10, 415 | ["match", ["get", "class"], ["runway"], 1, ["taxiway"], 0.5, 0], 416 | 14, 417 | ["match", ["get", "class"], ["runway"], 3, ["taxiway"], 2, 0], 418 | 16, 419 | ["match", ["get", "class"], ["runway"], 10, ["taxiway"], 6, 0] 420 | ] 421 | } 422 | }, 423 | { 424 | "id": "Airport labels", 425 | "type": "symbol", 426 | "source": "openmaptiles", 427 | "source-layer": "aerodrome_label", 428 | "minzoom": 10, 429 | "layout": { 430 | "text-anchor": "top", 431 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 432 | "text-font": ["Noto Sans Regular"], 433 | "text-max-width": 8, 434 | "text-offset": [0, 0.5], 435 | "text-size": { 436 | "stops": [ 437 | [10, 10], 438 | [14, 12], 439 | [16, 14] 440 | ] 441 | }, 442 | "visibility": "visible" 443 | }, 444 | "paint": { 445 | "text-color": "hsl(83, 0%, 76%)", 446 | "text-halo-blur": 1, 447 | "text-halo-color": "hsl(0, 0%, 0%)", 448 | "text-halo-width": 1.4 449 | }, 450 | "filter": ["has", "iata"] 451 | }, 452 | { 453 | "id": "Station labels", 454 | "type": "symbol", 455 | "source": "openmaptiles", 456 | "source-layer": "poi", 457 | "minzoom": 12, 458 | "layout": { 459 | "text-anchor": "top", 460 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 461 | "text-font": ["Noto Sans Regular"], 462 | "text-max-width": 8, 463 | "text-offset": [0, 0.5], 464 | "text-size": { 465 | "stops": [ 466 | [10, 10], 467 | [14, 12], 468 | [16, 14] 469 | ] 470 | }, 471 | "visibility": "visible" 472 | }, 473 | "paint": { 474 | "text-color": "hsl(83, 0%, 76%)", 475 | "text-halo-blur": 1, 476 | "text-halo-color": "hsl(83, 0%, 0%)", 477 | "text-halo-width": 1.4 478 | }, 479 | "filter": ["all", ["==", "class", "railway"], ["has", "subclass"]] 480 | }, 481 | { 482 | "id": "Road labels", 483 | "type": "symbol", 484 | "source": "openmaptiles", 485 | "source-layer": "transportation_name", 486 | "minzoom": 14, 487 | "layout": { 488 | "symbol-placement": "line", 489 | "symbol-spacing": { 490 | "stops": [ 491 | [13, 250], 492 | [20, 350], 493 | [22, 600] 494 | ] 495 | }, 496 | "text-field": ["coalesce", ["get", "name:en"], ["get", "name"]], 497 | "text-font": ["Noto Sans Regular"], 498 | "text-letter-spacing": 0.1, 499 | "text-rotation-alignment": "map", 500 | "text-size": { 501 | "base": 1.4, 502 | "stops": [ 503 | [14, 8], 504 | [17, 10], 505 | [20, 12] 506 | ] 507 | }, 508 | "text-transform": "uppercase", 509 | "visibility": "visible" 510 | }, 511 | "paint": { 512 | "text-color": "hsl(83, 0%, 76%)", 513 | "text-halo-color": "hsl(83, 0%, 0%)", 514 | "text-halo-width": 1 515 | }, 516 | "filter": [ 517 | "all", 518 | ["==", "$type", "LineString"], 519 | ["!in", "class", "aerialway", "ferry", "service"] 520 | ] 521 | }, 522 | { 523 | "id": "Other border", 524 | "type": "line", 525 | "source": "openmaptiles", 526 | "source-layer": "boundary", 527 | "minzoom": 3, 528 | "layout": { "visibility": "visible" }, 529 | "paint": { 530 | "line-color": "hsla(83, 0%, 28%, 0.65)", 531 | "line-dasharray": [2, 1], 532 | "line-width": { 533 | "stops": [ 534 | [4, 0.8], 535 | [11, 1.75], 536 | [18, 2.5] 537 | ] 538 | } 539 | }, 540 | "filter": [ 541 | "all", 542 | ["in", "admin_level", 3, 4, 5, 6, 7, 8, 9, 10], 543 | ["==", "maritime", 0] 544 | ] 545 | }, 546 | { 547 | "id": "Disputed border", 548 | "type": "line", 549 | "source": "openmaptiles", 550 | "source-layer": "boundary", 551 | "minzoom": 0, 552 | "layout": { 553 | "line-cap": "round", 554 | "line-join": "round", 555 | "visibility": "visible" 556 | }, 557 | "paint": { 558 | "line-color": "hsl(0,0%,30%)", 559 | "line-dasharray": [2, 2], 560 | "line-width": { 561 | "stops": [ 562 | [1, 1], 563 | [5, 1.5], 564 | [10, 2] 565 | ] 566 | } 567 | }, 568 | "filter": [ 569 | "all", 570 | ["==", "admin_level", 2], 571 | ["==", "maritime", 0], 572 | ["==", "disputed", 1] 573 | ] 574 | }, 575 | { 576 | "id": "Country border", 577 | "type": "line", 578 | "source": "openmaptiles", 579 | "source-layer": "boundary", 580 | "minzoom": 0, 581 | "layout": { 582 | "line-cap": "round", 583 | "line-join": "round", 584 | "visibility": "visible" 585 | }, 586 | "paint": { 587 | "line-blur": { 588 | "stops": [ 589 | [4, 0.5], 590 | [10, 0] 591 | ] 592 | }, 593 | "line-color": "hsl(0,0%,30%)", 594 | "line-width": { 595 | "stops": [ 596 | [1, 1], 597 | [5, 1.5], 598 | [10, 2] 599 | ] 600 | } 601 | }, 602 | "filter": [ 603 | "all", 604 | ["==", "admin_level", 2], 605 | ["==", "disputed", 0], 606 | ["==", "maritime", 0] 607 | ] 608 | }, 609 | { 610 | "id": "Place labels", 611 | "type": "symbol", 612 | "source": "openmaptiles", 613 | "source-layer": "place", 614 | "minzoom": 0, 615 | "maxzoom": 16, 616 | "layout": { 617 | "symbol-sort-key": ["to-number", ["get", "rank"]], 618 | "text-field": "{name}", 619 | "text-font": ["Noto Sans Regular"], 620 | "text-max-width": 10, 621 | "text-size": [ 622 | "interpolate", 623 | ["linear", 1], 624 | ["zoom"], 625 | 3, 626 | 11, 627 | 8, 628 | ["match", ["get", "class"], "city", 15, 13], 629 | 11, 630 | [ 631 | "match", 632 | ["get", "class"], 633 | "city", 634 | 16, 635 | [ 636 | "suburb", 637 | "neighbourhood", 638 | "quarter", 639 | "hamlet", 640 | "isolated_dwelling" 641 | ], 642 | 10, 643 | 13 644 | ], 645 | 16, 646 | [ 647 | "match", 648 | ["get", "class"], 649 | "city", 650 | 21, 651 | [ 652 | "suburb", 653 | "neighbourhood", 654 | "quarter", 655 | "hamlet", 656 | "isolated_dwelling" 657 | ], 658 | 14, 659 | 16 660 | ] 661 | ], 662 | "visibility": "visible" 663 | }, 664 | "paint": { 665 | "text-color": "hsl(0, 0%, 86%)", 666 | "text-halo-blur": 0, 667 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 668 | "text-halo-width": 2 669 | }, 670 | "filter": [ 671 | "in", 672 | "class", 673 | "hamlet", 674 | "isolated_dwelling", 675 | "neighbourhood", 676 | "province", 677 | "quarter", 678 | "suburb", 679 | "town", 680 | "village" 681 | ] 682 | }, 683 | { 684 | "id": "City labels", 685 | "type": "symbol", 686 | "source": "openmaptiles", 687 | "source-layer": "place", 688 | "maxzoom": 16, 689 | "layout": { 690 | "symbol-sort-key": ["to-number", ["get", "rank"]], 691 | "text-field": "{name:en}", 692 | "text-font": ["Noto Sans Regular"], 693 | "text-max-width": 10, 694 | "text-size": [ 695 | "interpolate", 696 | ["linear", 1], 697 | ["zoom"], 698 | 3, 699 | 11, 700 | 8, 701 | 15, 702 | 11, 703 | 16, 704 | 16, 705 | 21 706 | ], 707 | "visibility": "visible" 708 | }, 709 | "paint": { 710 | "text-color": "hsl(0, 0%, 86%)", 711 | "text-halo-blur": 0, 712 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 713 | "text-halo-width": 2 714 | }, 715 | "filter": ["==", "class", "city"] 716 | }, 717 | { 718 | "id": "Country labels", 719 | "type": "symbol", 720 | "source": "openmaptiles", 721 | "source-layer": "place", 722 | "minzoom": 1, 723 | "maxzoom": 12, 724 | "layout": { 725 | "symbol-sort-key": ["to-number", ["get", "rank"]], 726 | "text-field": "{name:en}", 727 | "text-font": ["Noto Sans Bold"], 728 | "text-max-width": 8, 729 | "text-padding": { 730 | "stops": [ 731 | [1, 0], 732 | [4, 2] 733 | ] 734 | }, 735 | "text-size": [ 736 | "interpolate", 737 | ["linear", 1], 738 | ["zoom"], 739 | 0, 740 | 8, 741 | 1, 742 | 10, 743 | 4, 744 | ["case", [">", ["get", "rank"], 2], 13, 15], 745 | 8, 746 | ["case", [">", ["get", "rank"], 2], 18, 22] 747 | ], 748 | "visibility": "visible" 749 | }, 750 | "paint": { 751 | "text-color": "hsl(0, 0%, 75%)", 752 | "text-halo-blur": 1, 753 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 754 | "text-halo-width": 2 755 | }, 756 | "filter": ["all", ["==", "class", "country"], ["!=", "iso_a2", "VA"]] 757 | }, 758 | { 759 | "id": "Continent labels", 760 | "type": "symbol", 761 | "source": "openmaptiles", 762 | "source-layer": "place", 763 | "maxzoom": 1, 764 | "layout": { 765 | "text-field": "{name:en}", 766 | "text-font": ["Noto Sans Bold"], 767 | "text-justify": "center", 768 | "text-size": { 769 | "stops": [ 770 | [0, 12], 771 | [2, 13] 772 | ] 773 | }, 774 | "text-transform": "uppercase", 775 | "visibility": "visible" 776 | }, 777 | "paint": { 778 | "text-color": "hsl(0, 0%, 75%)", 779 | "text-halo-blur": 1, 780 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 781 | "text-halo-width": 2 782 | }, 783 | "metadata": {}, 784 | "filter": ["==", "class", "continent"] 785 | } 786 | ], 787 | "bearing": 0, 788 | "pitch": 0, 789 | "center": [0, 0], 790 | "zoom": 1 791 | } 792 | -------------------------------------------------------------------------------- /vue-example/.editorconfig: -------------------------------------------------------------------------------- 1 | [*.{js,jsx,mjs,cjs,ts,tsx,mts,cts,vue}] 2 | charset = utf-8 3 | indent_size = 2 4 | indent_style = space 5 | insert_final_newline = true 6 | trim_trailing_whitespace = true 7 | -------------------------------------------------------------------------------- /vue-example/.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | pnpm-debug.log* 8 | lerna-debug.log* 9 | 10 | node_modules 11 | .DS_Store 12 | dist 13 | dist-ssr 14 | coverage 15 | *.local 16 | 17 | /cypress/videos/ 18 | /cypress/screenshots/ 19 | 20 | # Editor directories and files 21 | .vscode/* 22 | !.vscode/extensions.json 23 | .idea 24 | *.suo 25 | *.ntvs* 26 | *.njsproj 27 | *.sln 28 | *.sw? 29 | 30 | *.tsbuildinfo 31 | -------------------------------------------------------------------------------- /vue-example/.prettierrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "$schema": "https://json.schemastore.org/prettierrc", 3 | "semi": true, 4 | "singleQuote": false, 5 | "arrowParens": "avoid", 6 | "printWidth": 50 7 | } 8 | -------------------------------------------------------------------------------- /vue-example/.vscode/extensions.json: -------------------------------------------------------------------------------- 1 | { 2 | "recommendations": [ 3 | "Vue.volar", 4 | "dbaeumer.vscode-eslint", 5 | "esbenp.prettier-vscode" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /vue-example/README.md: -------------------------------------------------------------------------------- 1 | # OpenFreeMap + @indoorequal/vue-maplibre-gl Example 2 | 3 | Built with [@indoorequal/vue-maplibre-gl](https://indoorequal.github.io/vue-maplibre-gl/) 4 | 5 | ```sh 6 | pnpm install 7 | pnpm dev 8 | ``` 9 | -------------------------------------------------------------------------------- /vue-example/env.d.ts: -------------------------------------------------------------------------------- 1 | /// 2 | -------------------------------------------------------------------------------- /vue-example/eslint.config.js: -------------------------------------------------------------------------------- 1 | import pluginVue from 'eslint-plugin-vue' 2 | import vueTsEslintConfig from '@vue/eslint-config-typescript' 3 | import skipFormatting from '@vue/eslint-config-prettier/skip-formatting' 4 | 5 | export default [ 6 | { 7 | name: 'app/files-to-lint', 8 | files: ['**/*.{ts,mts,tsx,vue}'], 9 | }, 10 | 11 | { 12 | name: 'app/files-to-ignore', 13 | ignores: ['**/dist/**', '**/dist-ssr/**', '**/coverage/**'], 14 | }, 15 | 16 | ...pluginVue.configs['flat/essential'], 17 | ...vueTsEslintConfig(), 18 | skipFormatting, 19 | ] 20 | -------------------------------------------------------------------------------- /vue-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 9 | 10 | Hello World Vue 11 | 12 | 13 |
14 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /vue-example/package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-example", 3 | "version": "0.0.0", 4 | "private": true, 5 | "type": "module", 6 | "scripts": { 7 | "dev": "vite", 8 | "build": "run-p type-check \"build-only {@}\" --", 9 | "preview": "vite preview", 10 | "build-only": "vite build", 11 | "type-check": "vue-tsc --build --force", 12 | "lint": "eslint . --fix", 13 | "format": "prettier --write src/" 14 | }, 15 | "dependencies": { 16 | "@indoorequal/vue-maplibre-gl": "^7.7.0", 17 | "maplibre-gl": "^4.7.1", 18 | "vue": "^3.5.12" 19 | }, 20 | "devDependencies": { 21 | "@tsconfig/node20": "^20.1.4", 22 | "@types/node": "^20.16.11", 23 | "@vitejs/plugin-vue": "^5.1.4", 24 | "@vue/eslint-config-prettier": "^10.0.0", 25 | "@vue/eslint-config-typescript": "^14.0.1", 26 | "@vue/tsconfig": "^0.5.1", 27 | "eslint": "^9.12.0", 28 | "eslint-plugin-vue": "^9.29.0", 29 | "npm-run-all2": "^6.2.3", 30 | "prettier": "^3.3.3", 31 | "typescript": "~5.5.4", 32 | "vite": "^5.4.8", 33 | "vue-tsc": "^2.1.6" 34 | } 35 | } 36 | -------------------------------------------------------------------------------- /vue-example/public/styles/dark.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "id": "dark", 4 | "name": "Dark", 5 | "sources": { 6 | "openmaptiles": { 7 | "type": "vector", 8 | "url": "https://tiles.openfreemap.org/planet" 9 | } 10 | }, 11 | "sprite": "https://tiles.openfreemap.org/sprites/ofm_f384/ofm", 12 | "glyphs": "https://tiles.openfreemap.org/fonts/{fontstack}/{range}.pbf", 13 | "layers": [ 14 | { 15 | "id": "Background", 16 | "type": "background", 17 | "layout": { "visibility": "visible" }, 18 | "paint": { 19 | "background-color": [ 20 | "interpolate", 21 | ["exponential", 1], 22 | ["zoom"], 23 | 6, 24 | "hsl(0, 0%, 17%)", 25 | 20, 26 | "hsl(0, 0%, 18%)" 27 | ] 28 | } 29 | }, 30 | { 31 | "id": "Residential", 32 | "type": "fill", 33 | "source": "openmaptiles", 34 | "source-layer": "landuse", 35 | "maxzoom": 14, 36 | "layout": { "visibility": "visible" }, 37 | "paint": { 38 | "fill-color": { 39 | "stops": [ 40 | [2, "hsl(0, 0%, 16%)"], 41 | [14, "hsl(0, 0%, 17%)"] 42 | ] 43 | } 44 | }, 45 | "filter": [ 46 | "in", 47 | "class", 48 | "neighbourhood", 49 | "residential", 50 | "suburb" 51 | ] 52 | }, 53 | { 54 | "id": "Sand", 55 | "type": "fill", 56 | "source": "openmaptiles", 57 | "source-layer": "landcover", 58 | "minzoom": 8, 59 | "layout": { "visibility": "visible" }, 60 | "paint": { 61 | "fill-antialias": false, 62 | "fill-color": "hsla(83, 77%, 8%, 0.24)", 63 | "fill-opacity": { 64 | "stops": [ 65 | [7, 0.7], 66 | [12, 1] 67 | ] 68 | } 69 | }, 70 | "filter": ["==", "class", "sand"] 71 | }, 72 | { 73 | "id": "Grass", 74 | "type": "fill", 75 | "source": "openmaptiles", 76 | "source-layer": "landcover", 77 | "minzoom": 8, 78 | "layout": { "visibility": "visible" }, 79 | "paint": { 80 | "fill-antialias": false, 81 | "fill-color": "hsla(83, 38%, 12%, 0.6)", 82 | "fill-opacity": { 83 | "stops": [ 84 | [7, 0.7], 85 | [12, 1] 86 | ] 87 | } 88 | }, 89 | "filter": ["==", "class", "grass"] 90 | }, 91 | { 92 | "id": "Wood", 93 | "type": "fill", 94 | "source": "openmaptiles", 95 | "source-layer": "landcover", 96 | "minzoom": 8, 97 | "layout": { "visibility": "visible" }, 98 | "paint": { 99 | "fill-antialias": false, 100 | "fill-color": "hsla(83, 38%, 11%, 0.6)", 101 | "fill-opacity": { 102 | "stops": [ 103 | [7, 0.7], 104 | [12, 1] 105 | ] 106 | } 107 | }, 108 | "filter": ["==", "class", "wood"] 109 | }, 110 | { 111 | "id": "Water", 112 | "type": "fill", 113 | "source": "openmaptiles", 114 | "source-layer": "water", 115 | "layout": { "visibility": "visible" }, 116 | "paint": { 117 | "fill-color": "hsl(205, 36%, 21%)", 118 | "fill-opacity": [ 119 | "match", 120 | ["get", "intermittent"], 121 | 1, 122 | 0.7, 123 | 1 124 | ] 125 | }, 126 | "filter": [ 127 | "all", 128 | ["!=", "brunnel", "tunnel"] 129 | ] 130 | }, 131 | { 132 | "id": "River", 133 | "type": "line", 134 | "source": "openmaptiles", 135 | "source-layer": "waterway", 136 | "layout": { "visibility": "visible" }, 137 | "paint": { 138 | "line-color": "hsl(205, 36%, 21%)", 139 | "line-opacity": [ 140 | "match", 141 | ["get", "brunnel"], 142 | "tunnel", 143 | 0.7, 144 | 1 145 | ], 146 | "line-width": { 147 | "stops": [ 148 | [9, 1], 149 | [18, 3] 150 | ] 151 | } 152 | }, 153 | "filter": ["!=", "brunnel", "tunnel"] 154 | }, 155 | { 156 | "id": "River intermittent", 157 | "type": "line", 158 | "source": "openmaptiles", 159 | "source-layer": "waterway", 160 | "layout": { "visibility": "visible" }, 161 | "paint": { 162 | "line-color": "hsl(205, 36%, 21%)", 163 | "line-dasharray": [2, 1], 164 | "line-opacity": 1, 165 | "line-width": { 166 | "stops": [ 167 | [9, 1], 168 | [18, 3] 169 | ] 170 | } 171 | }, 172 | "filter": ["==", "intermittent", 1] 173 | }, 174 | { 175 | "id": "Transit tunnel", 176 | "type": "line", 177 | "source": "openmaptiles", 178 | "source-layer": "transportation", 179 | "minzoom": 4, 180 | "layout": { 181 | "line-cap": "butt", 182 | "line-join": "miter", 183 | "visibility": "visible" 184 | }, 185 | "paint": { 186 | "line-color": "hsl(239, 12%, 18%)", 187 | "line-dasharray": [3, 3], 188 | "line-opacity": 0.5, 189 | "line-width": { 190 | "stops": [ 191 | [14, 0.5], 192 | [16, 1.2], 193 | [18, 2] 194 | ] 195 | } 196 | }, 197 | "filter": [ 198 | "all", 199 | ["==", "brunnel", "tunnel"], 200 | ["==", "class", "transit"] 201 | ] 202 | }, 203 | { 204 | "id": "Bridge", 205 | "type": "fill", 206 | "source": "openmaptiles", 207 | "source-layer": "transportation", 208 | "layout": { "visibility": "visible" }, 209 | "paint": { 210 | "fill-color": "hsl(0, 0%, 18%)", 211 | "fill-opacity": 0.7 212 | }, 213 | "filter": ["==", "brunnel", "bridge"] 214 | }, 215 | { 216 | "id": "Pier", 217 | "type": "fill", 218 | "source": "openmaptiles", 219 | "source-layer": "transportation", 220 | "layout": { "visibility": "visible" }, 221 | "paint": { 222 | "fill-antialias": true, 223 | "fill-color": "hsl(0, 0%, 18%)", 224 | "fill-opacity": 1 225 | }, 226 | "metadata": {}, 227 | "filter": ["==", "class", "pier"] 228 | }, 229 | { 230 | "id": "Road network", 231 | "type": "line", 232 | "source": "openmaptiles", 233 | "source-layer": "transportation", 234 | "minzoom": 4, 235 | "layout": { 236 | "line-cap": "round", 237 | "line-join": "round", 238 | "visibility": "visible" 239 | }, 240 | "paint": { 241 | "line-color": "hsl(205, 0%, 27%)", 242 | "line-opacity": [ 243 | "match", 244 | ["get", "brunnel"], 245 | "tunnel", 246 | 0.5, 247 | 1 248 | ], 249 | "line-width": [ 250 | "interpolate", 251 | ["linear", 2], 252 | ["zoom"], 253 | 4, 254 | 0.5, 255 | 5, 256 | 0.75, 257 | 6, 258 | 1, 259 | 10, 260 | [ 261 | "match", 262 | ["get", "class"], 263 | ["motorway"], 264 | [ 265 | "match", 266 | ["get", "brunnel"], 267 | ["bridge"], 268 | 0, 269 | 2.5 270 | ], 271 | ["trunk"], 272 | 1.5, 273 | 1 274 | ], 275 | 12, 276 | [ 277 | "match", 278 | ["get", "class"], 279 | ["motorway"], 280 | ["match", ["get", "ramp"], 1, 1, 4], 281 | ["trunk"], 282 | 2, 283 | ["primary"], 284 | 2.5, 285 | ["secondary", "tertiary"], 286 | 2, 287 | ["minor"], 288 | 1, 289 | ["pier", "service", "track"], 290 | 0.5, 291 | 0.5 292 | ], 293 | 14, 294 | [ 295 | "match", 296 | ["get", "class"], 297 | ["motorway"], 298 | ["match", ["get", "ramp"], 1, 5, 6], 299 | ["trunk"], 300 | 3, 301 | ["primary"], 302 | 5, 303 | ["secondary"], 304 | 4, 305 | ["tertiary"], 306 | 3, 307 | ["minor"], 308 | 2, 309 | ["pier", "service", "track"], 310 | 1, 311 | 2 312 | ], 313 | 16, 314 | [ 315 | "match", 316 | ["get", "class"], 317 | ["motorway", "trunk", "primary"], 318 | 8, 319 | ["secondary"], 320 | 7, 321 | ["tertiary"], 322 | 6, 323 | ["minor"], 324 | 4, 325 | ["pier", "service", "track"], 326 | 2, 327 | 4 328 | ], 329 | 20, 330 | [ 331 | "match", 332 | ["get", "class"], 333 | ["motorway", "trunk", "primary"], 334 | 28, 335 | ["secondary"], 336 | 24, 337 | ["tertiary"], 338 | 20, 339 | ["minor", "service", "track", "pier"], 340 | 16, 341 | 16 342 | ] 343 | ] 344 | }, 345 | "filter": [ 346 | "!in", 347 | "class", 348 | "bridge", 349 | "ferry", 350 | "path", 351 | "rail", 352 | "transit" 353 | ] 354 | }, 355 | { 356 | "id": "Path", 357 | "type": "line", 358 | "source": "openmaptiles", 359 | "source-layer": "transportation", 360 | "minzoom": 15, 361 | "layout": { 362 | "line-cap": "square", 363 | "line-join": "bevel", 364 | "visibility": "visible" 365 | }, 366 | "paint": { 367 | "line-color": "hsl(205, 0%, 27%)", 368 | "line-dasharray": [1, 1], 369 | "line-width": { 370 | "base": 1.55, 371 | "stops": [ 372 | [15, 0.5], 373 | [16, 1], 374 | [18, 2], 375 | [20, 3], 376 | [22, 4] 377 | ] 378 | } 379 | }, 380 | "filter": ["==", "class", "path"] 381 | }, 382 | { 383 | "id": "Building", 384 | "type": "fill", 385 | "source": "openmaptiles", 386 | "source-layer": "building", 387 | "layout": { "visibility": "visible" }, 388 | "paint": { 389 | "fill-antialias": true, 390 | "fill-color": { 391 | "stops": [ 392 | [13, "hsl(0, 0%, 14%)"], 393 | [16, "hsl(0, 0%, 15%)"] 394 | ] 395 | }, 396 | "fill-opacity": 1 397 | } 398 | }, 399 | { 400 | "id": "Railway", 401 | "type": "line", 402 | "source": "openmaptiles", 403 | "source-layer": "transportation", 404 | "minzoom": 9, 405 | "layout": { "visibility": "visible" }, 406 | "paint": { 407 | "line-color": "hsla(238, 12%, 18%, 0.8)", 408 | "line-opacity": [ 409 | "match", 410 | ["get", "brunnel"], 411 | "tunnel", 412 | 0.25, 413 | 1 414 | ], 415 | "line-width": [ 416 | "interpolate", 417 | ["linear", 1], 418 | ["zoom"], 419 | 9, 420 | [ 421 | "match", 422 | ["get", "service"], 423 | ["yard", "spur"], 424 | 0, 425 | 0.5 426 | ], 427 | 12, 428 | [ 429 | "match", 430 | ["get", "service"], 431 | ["yard", "spur"], 432 | 0, 433 | 0.6 434 | ], 435 | 16, 436 | [ 437 | "match", 438 | ["get", "service"], 439 | ["yard", "spur"], 440 | 0.75, 441 | 2 442 | ], 443 | 22, 444 | [ 445 | "match", 446 | ["get", "service"], 447 | ["yard", "spur"], 448 | 1.5, 449 | 3 450 | ] 451 | ] 452 | }, 453 | "filter": ["==", "class", "rail"] 454 | }, 455 | { 456 | "id": "Transit", 457 | "type": "line", 458 | "source": "openmaptiles", 459 | "source-layer": "transportation", 460 | "layout": { "visibility": "visible" }, 461 | "paint": { 462 | "line-color": "hsl(239, 12%, 18%)", 463 | "line-opacity": 0.5, 464 | "line-width": { 465 | "stops": [ 466 | [14, 0.5], 467 | [16, 1.2], 468 | [18, 2] 469 | ] 470 | } 471 | }, 472 | "filter": [ 473 | "all", 474 | ["==", "class", "transit"], 475 | ["!=", "brunnel", "tunnel"] 476 | ] 477 | }, 478 | { 479 | "id": "Aeroway", 480 | "type": "line", 481 | "source": "openmaptiles", 482 | "source-layer": "aeroway", 483 | "minzoom": 10, 484 | "layout": { 485 | "line-cap": "round", 486 | "line-join": "round", 487 | "visibility": "visible" 488 | }, 489 | "paint": { 490 | "line-color": "hsl(205, 0%, 27%)", 491 | "line-opacity": 1, 492 | "line-width": [ 493 | "interpolate", 494 | ["linear", 2], 495 | ["zoom"], 496 | 10, 497 | [ 498 | "match", 499 | ["get", "class"], 500 | ["runway"], 501 | 1, 502 | ["taxiway"], 503 | 0.5, 504 | 0 505 | ], 506 | 14, 507 | [ 508 | "match", 509 | ["get", "class"], 510 | ["runway"], 511 | 3, 512 | ["taxiway"], 513 | 2, 514 | 0 515 | ], 516 | 16, 517 | [ 518 | "match", 519 | ["get", "class"], 520 | ["runway"], 521 | 10, 522 | ["taxiway"], 523 | 6, 524 | 0 525 | ] 526 | ] 527 | } 528 | }, 529 | { 530 | "id": "Airport labels", 531 | "type": "symbol", 532 | "source": "openmaptiles", 533 | "source-layer": "aerodrome_label", 534 | "minzoom": 10, 535 | "layout": { 536 | "text-anchor": "top", 537 | "text-field": [ 538 | "coalesce", 539 | ["get", "name:en"], 540 | ["get", "name"] 541 | ], 542 | "text-font": ["Noto Sans Regular"], 543 | "text-max-width": 8, 544 | "text-offset": [0, 0.5], 545 | "text-size": { 546 | "stops": [ 547 | [10, 10], 548 | [14, 12], 549 | [16, 14] 550 | ] 551 | }, 552 | "visibility": "visible" 553 | }, 554 | "paint": { 555 | "text-color": "hsl(83, 0%, 76%)", 556 | "text-halo-blur": 1, 557 | "text-halo-color": "hsl(0, 0%, 0%)", 558 | "text-halo-width": 1.4 559 | }, 560 | "filter": ["has", "iata"] 561 | }, 562 | { 563 | "id": "Station labels", 564 | "type": "symbol", 565 | "source": "openmaptiles", 566 | "source-layer": "poi", 567 | "minzoom": 12, 568 | "layout": { 569 | "text-anchor": "top", 570 | "text-field": [ 571 | "coalesce", 572 | ["get", "name:en"], 573 | ["get", "name"] 574 | ], 575 | "text-font": ["Noto Sans Regular"], 576 | "text-max-width": 8, 577 | "text-offset": [0, 0.5], 578 | "text-size": { 579 | "stops": [ 580 | [10, 10], 581 | [14, 12], 582 | [16, 14] 583 | ] 584 | }, 585 | "visibility": "visible" 586 | }, 587 | "paint": { 588 | "text-color": "hsl(83, 0%, 76%)", 589 | "text-halo-blur": 1, 590 | "text-halo-color": "hsl(83, 0%, 0%)", 591 | "text-halo-width": 1.4 592 | }, 593 | "filter": [ 594 | "all", 595 | ["==", "class", "railway"], 596 | ["has", "subclass"] 597 | ] 598 | }, 599 | { 600 | "id": "Road labels", 601 | "type": "symbol", 602 | "source": "openmaptiles", 603 | "source-layer": "transportation_name", 604 | "minzoom": 14, 605 | "layout": { 606 | "symbol-placement": "line", 607 | "symbol-spacing": { 608 | "stops": [ 609 | [13, 250], 610 | [20, 350], 611 | [22, 600] 612 | ] 613 | }, 614 | "text-field": [ 615 | "coalesce", 616 | ["get", "name:en"], 617 | ["get", "name"] 618 | ], 619 | "text-font": ["Noto Sans Regular"], 620 | "text-letter-spacing": 0.1, 621 | "text-rotation-alignment": "map", 622 | "text-size": { 623 | "base": 1.4, 624 | "stops": [ 625 | [14, 8], 626 | [17, 10], 627 | [20, 12] 628 | ] 629 | }, 630 | "text-transform": "uppercase", 631 | "visibility": "visible" 632 | }, 633 | "paint": { 634 | "text-color": "hsl(83, 0%, 76%)", 635 | "text-halo-color": "hsl(83, 0%, 0%)", 636 | "text-halo-width": 1 637 | }, 638 | "filter": [ 639 | "all", 640 | ["==", "$type", "LineString"], 641 | [ 642 | "!in", 643 | "class", 644 | "aerialway", 645 | "ferry", 646 | "service" 647 | ] 648 | ] 649 | }, 650 | { 651 | "id": "Other border", 652 | "type": "line", 653 | "source": "openmaptiles", 654 | "source-layer": "boundary", 655 | "minzoom": 3, 656 | "layout": { "visibility": "visible" }, 657 | "paint": { 658 | "line-color": "hsla(83, 0%, 28%, 0.65)", 659 | "line-dasharray": [2, 1], 660 | "line-width": { 661 | "stops": [ 662 | [4, 0.8], 663 | [11, 1.75], 664 | [18, 2.5] 665 | ] 666 | } 667 | }, 668 | "filter": [ 669 | "all", 670 | [ 671 | "in", 672 | "admin_level", 673 | 3, 674 | 4, 675 | 5, 676 | 6, 677 | 7, 678 | 8, 679 | 9, 680 | 10 681 | ], 682 | ["==", "maritime", 0] 683 | ] 684 | }, 685 | { 686 | "id": "Disputed border", 687 | "type": "line", 688 | "source": "openmaptiles", 689 | "source-layer": "boundary", 690 | "minzoom": 0, 691 | "layout": { 692 | "line-cap": "round", 693 | "line-join": "round", 694 | "visibility": "visible" 695 | }, 696 | "paint": { 697 | "line-color": "hsl(0,0%,30%)", 698 | "line-dasharray": [2, 2], 699 | "line-width": { 700 | "stops": [ 701 | [1, 1], 702 | [5, 1.5], 703 | [10, 2] 704 | ] 705 | } 706 | }, 707 | "filter": [ 708 | "all", 709 | ["==", "admin_level", 2], 710 | ["==", "maritime", 0], 711 | ["==", "disputed", 1] 712 | ] 713 | }, 714 | { 715 | "id": "Country border", 716 | "type": "line", 717 | "source": "openmaptiles", 718 | "source-layer": "boundary", 719 | "minzoom": 0, 720 | "layout": { 721 | "line-cap": "round", 722 | "line-join": "round", 723 | "visibility": "visible" 724 | }, 725 | "paint": { 726 | "line-blur": { 727 | "stops": [ 728 | [4, 0.5], 729 | [10, 0] 730 | ] 731 | }, 732 | "line-color": "hsl(0,0%,30%)", 733 | "line-width": { 734 | "stops": [ 735 | [1, 1], 736 | [5, 1.5], 737 | [10, 2] 738 | ] 739 | } 740 | }, 741 | "filter": [ 742 | "all", 743 | ["==", "admin_level", 2], 744 | ["==", "disputed", 0], 745 | ["==", "maritime", 0] 746 | ] 747 | }, 748 | { 749 | "id": "Place labels", 750 | "type": "symbol", 751 | "source": "openmaptiles", 752 | "source-layer": "place", 753 | "minzoom": 0, 754 | "maxzoom": 16, 755 | "layout": { 756 | "symbol-sort-key": [ 757 | "to-number", 758 | ["get", "rank"] 759 | ], 760 | "text-field": "{name}", 761 | "text-font": ["Noto Sans Regular"], 762 | "text-max-width": 10, 763 | "text-size": [ 764 | "interpolate", 765 | ["linear", 1], 766 | ["zoom"], 767 | 3, 768 | 11, 769 | 8, 770 | [ 771 | "match", 772 | ["get", "class"], 773 | "city", 774 | 15, 775 | 13 776 | ], 777 | 11, 778 | [ 779 | "match", 780 | ["get", "class"], 781 | "city", 782 | 16, 783 | [ 784 | "suburb", 785 | "neighbourhood", 786 | "quarter", 787 | "hamlet", 788 | "isolated_dwelling" 789 | ], 790 | 10, 791 | 13 792 | ], 793 | 16, 794 | [ 795 | "match", 796 | ["get", "class"], 797 | "city", 798 | 21, 799 | [ 800 | "suburb", 801 | "neighbourhood", 802 | "quarter", 803 | "hamlet", 804 | "isolated_dwelling" 805 | ], 806 | 14, 807 | 16 808 | ] 809 | ], 810 | "visibility": "visible" 811 | }, 812 | "paint": { 813 | "text-color": "hsl(0, 0%, 86%)", 814 | "text-halo-blur": 0, 815 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 816 | "text-halo-width": 2 817 | }, 818 | "filter": [ 819 | "in", 820 | "class", 821 | "hamlet", 822 | "isolated_dwelling", 823 | "neighbourhood", 824 | "province", 825 | "quarter", 826 | "suburb", 827 | "town", 828 | "village" 829 | ] 830 | }, 831 | { 832 | "id": "City labels", 833 | "type": "symbol", 834 | "source": "openmaptiles", 835 | "source-layer": "place", 836 | "maxzoom": 16, 837 | "layout": { 838 | "symbol-sort-key": [ 839 | "to-number", 840 | ["get", "rank"] 841 | ], 842 | "text-field": "{name:en}", 843 | "text-font": ["Noto Sans Regular"], 844 | "text-max-width": 10, 845 | "text-size": [ 846 | "interpolate", 847 | ["linear", 1], 848 | ["zoom"], 849 | 3, 850 | 11, 851 | 8, 852 | 15, 853 | 11, 854 | 16, 855 | 16, 856 | 21 857 | ], 858 | "visibility": "visible" 859 | }, 860 | "paint": { 861 | "text-color": "hsl(0, 0%, 86%)", 862 | "text-halo-blur": 0, 863 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 864 | "text-halo-width": 2 865 | }, 866 | "filter": ["==", "class", "city"] 867 | }, 868 | { 869 | "id": "Country labels", 870 | "type": "symbol", 871 | "source": "openmaptiles", 872 | "source-layer": "place", 873 | "minzoom": 1, 874 | "maxzoom": 12, 875 | "layout": { 876 | "symbol-sort-key": [ 877 | "to-number", 878 | ["get", "rank"] 879 | ], 880 | "text-field": "{name:en}", 881 | "text-font": ["Noto Sans Bold"], 882 | "text-max-width": 8, 883 | "text-padding": { 884 | "stops": [ 885 | [1, 0], 886 | [4, 2] 887 | ] 888 | }, 889 | "text-size": [ 890 | "interpolate", 891 | ["linear", 1], 892 | ["zoom"], 893 | 0, 894 | 8, 895 | 1, 896 | 10, 897 | 4, 898 | [ 899 | "case", 900 | [">", ["get", "rank"], 2], 901 | 13, 902 | 15 903 | ], 904 | 8, 905 | [ 906 | "case", 907 | [">", ["get", "rank"], 2], 908 | 18, 909 | 22 910 | ] 911 | ], 912 | "visibility": "visible" 913 | }, 914 | "paint": { 915 | "text-color": "hsl(0, 0%, 75%)", 916 | "text-halo-blur": 1, 917 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 918 | "text-halo-width": 2 919 | }, 920 | "filter": [ 921 | "all", 922 | ["==", "class", "country"], 923 | ["!=", "iso_a2", "VA"] 924 | ] 925 | }, 926 | { 927 | "id": "Continent labels", 928 | "type": "symbol", 929 | "source": "openmaptiles", 930 | "source-layer": "place", 931 | "maxzoom": 1, 932 | "layout": { 933 | "text-field": "{name:en}", 934 | "text-font": ["Noto Sans Bold"], 935 | "text-justify": "center", 936 | "text-size": { 937 | "stops": [ 938 | [0, 12], 939 | [2, 13] 940 | ] 941 | }, 942 | "text-transform": "uppercase", 943 | "visibility": "visible" 944 | }, 945 | "paint": { 946 | "text-color": "hsl(0, 0%, 75%)", 947 | "text-halo-blur": 1, 948 | "text-halo-color": "hsla(0, 0%, 0%, 0.75)", 949 | "text-halo-width": 2 950 | }, 951 | "metadata": {}, 952 | "filter": ["==", "class", "continent"] 953 | } 954 | ], 955 | "bearing": 0, 956 | "pitch": 0, 957 | "center": [0, 0], 958 | "zoom": 1 959 | } 960 | -------------------------------------------------------------------------------- /vue-example/src/app.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | 15 | 28 | -------------------------------------------------------------------------------- /vue-example/src/components/you-are-here.vue: -------------------------------------------------------------------------------- 1 | 23 | -------------------------------------------------------------------------------- /vue-example/src/lib/api.ts: -------------------------------------------------------------------------------- 1 | import type { LngLatLike } from "maplibre-gl"; 2 | import { middleOfUSA } from "./constants"; 3 | 4 | export interface LocationResponse { 5 | status: string; 6 | country: string; 7 | countryCode: string; 8 | region: string; 9 | regionName: string; 10 | city: string; 11 | zip: string; 12 | lat: number; 13 | lon: number; 14 | timezone: string; 15 | isp: string; 16 | org: string; 17 | as: string; 18 | query: string; 19 | } 20 | 21 | export async function getLocation() { 22 | try { 23 | const response = await fetch("http://ip-api.com/json/"); 24 | const json = (await response.json() as LocationResponse); 25 | if (typeof json.lat === "number" && typeof json.lon === "number") { 26 | return [json.lon, json.lat] as LngLatLike; 27 | } 28 | } catch { } 29 | return middleOfUSA; 30 | } -------------------------------------------------------------------------------- /vue-example/src/lib/constants.ts: -------------------------------------------------------------------------------- 1 | import type { LngLatLike } from "maplibre-gl"; 2 | 3 | export const middleOfUSA = [-100, 40] as LngLatLike; -------------------------------------------------------------------------------- /vue-example/src/main.ts: -------------------------------------------------------------------------------- 1 | import { createApp } from "vue"; 2 | import "maplibre-gl/dist/maplibre-gl.css"; 3 | import App from "./app.vue"; 4 | 5 | createApp(App).mount("#app"); 6 | -------------------------------------------------------------------------------- /vue-example/tsconfig.app.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@vue/tsconfig/tsconfig.dom.json", 3 | "include": ["env.d.ts", "src/**/*", "src/**/*.vue"], 4 | "exclude": ["src/**/__tests__/*"], 5 | "compilerOptions": { 6 | "composite": true, 7 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", 8 | 9 | "baseUrl": ".", 10 | "paths": { 11 | "@/*": ["./src/*"] 12 | } 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /vue-example/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "files": [], 3 | "references": [ 4 | { 5 | "path": "./tsconfig.node.json" 6 | }, 7 | { 8 | "path": "./tsconfig.app.json" 9 | } 10 | ] 11 | } 12 | -------------------------------------------------------------------------------- /vue-example/tsconfig.node.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "@tsconfig/node20/tsconfig.json", 3 | "include": [ 4 | "vite.config.*", 5 | "vitest.config.*", 6 | "cypress.config.*", 7 | "nightwatch.conf.*", 8 | "playwright.config.*" 9 | ], 10 | "compilerOptions": { 11 | "composite": true, 12 | "noEmit": true, 13 | "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", 14 | 15 | "module": "ESNext", 16 | "moduleResolution": "Bundler", 17 | "types": ["node"] 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /vue-example/vite.config.ts: -------------------------------------------------------------------------------- 1 | import { fileURLToPath, URL } from 'node:url' 2 | 3 | import { defineConfig } from 'vite' 4 | import vue from '@vitejs/plugin-vue' 5 | 6 | // https://vite.dev/config/ 7 | export default defineConfig({ 8 | plugins: [ 9 | vue(), 10 | ], 11 | resolve: { 12 | alias: { 13 | '@': fileURLToPath(new URL('./src', import.meta.url)) 14 | } 15 | } 16 | }) 17 | --------------------------------------------------------------------------------