basemapkit 0.3.0 → 0.4.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/dist/basemapkit.d.ts +90 -4
- package/dist/basemapkit.js +4890 -143
- package/dist/basemapkit.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +221 -87
- package/index.html +0 -32
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -9,16 +9,20 @@ Basemaps for <a href="https://maplibre.org/maplibre-gl-js/docs/">Maplibre GL JS<
|
|
|
9
9
|
<img src="https://img.shields.io/npm/v/basemapkit"></img>
|
|
10
10
|
</p>
|
|
11
11
|
|
|
12
|
-
**Basemapkit** generates customizable styles compatible with **Maplibre GL JS** that relies on the **Protomaps** Planet schemas when it comes to [vector layers and feature properties](https://docs.protomaps.com/basemaps/layers). You can download your own PMtiles copy of the planet on the official [Protomaps build page](https://maps.protomaps.com/builds/).
|
|
12
|
+
**Basemapkit** generates customizable styles compatible with **Maplibre GL JS** that relies on the **Protomaps** Planet schemas when it comes to [vector layers and feature properties](https://docs.protomaps.com/basemaps/layers). You can download your own PMtiles copy of the planet on the official [Protomaps build page](https://maps.protomaps.com/builds/).
|
|
13
13
|
|
|
14
|
+
|
|
14
15
|
| | | |
|
|
15
16
|
| :----------------: | :------: | ----: |
|
|
16
17
|
|  |  |  |
|
|
17
18
|
|  | |  |
|
|
18
19
|
|  |  |  |
|
|
19
20
|
|  |  |  |
|
|
21
|
+
|  |  |  |
|
|
22
|
+
|  |  |  |
|
|
23
|
+
|  |  |  |
|
|
20
24
|
|
|
21
|
-
|
|
22
26
|
|
|
23
27
|
## Getting started 👷
|
|
24
28
|
### Install
|
|
@@ -42,21 +46,21 @@ maplibregl.addProtocol("pmtiles", new Protocol().tile);
|
|
|
42
46
|
|
|
43
47
|
// Build the Basemapkit style
|
|
44
48
|
const style = getStyle(
|
|
45
|
-
// One of the main syle:
|
|
46
|
-
"avenue",
|
|
47
|
-
{
|
|
48
|
-
|
|
49
|
-
|
|
49
|
+
// One of the main syle:
|
|
50
|
+
"avenue",
|
|
51
|
+
{
|
|
52
|
+
// URL to the pmtiles
|
|
53
|
+
pmtiles: "https://my-s3-bucket.com/planet.pmtiles",
|
|
50
54
|
|
|
51
|
-
|
|
52
|
-
|
|
55
|
+
// URL to the sprites (for POIs)
|
|
56
|
+
sprite: "https://raw.githubusercontent.com/jonathanlurie/phosphor-mlgl-sprite/refs/heads/main/sprite/phosphor-diecut",
|
|
53
57
|
|
|
54
|
-
|
|
55
|
-
|
|
58
|
+
// URL to the glyphs (for labels)
|
|
59
|
+
glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf";
|
|
56
60
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
});
|
|
61
|
+
// Language (you can ommit to use the platform language)
|
|
62
|
+
lang: "en",
|
|
63
|
+
});
|
|
60
64
|
|
|
61
65
|
// Instantiate the Map:
|
|
62
66
|
const map = new maplibregl.Map({
|
|
@@ -344,106 +348,236 @@ And here is the result:
|
|
|
344
348
|
You can live play with these on [basemapkit.jnth.io](https://s.jnth.io/s/basemapkit) and selecting the style `🖌️ custom 🎨`.
|
|
345
349
|
And from this "color editor" were created the built-in styles available below...
|
|
346
350
|
|
|
351
|
+
## Available styles
|
|
352
|
+
So far, we mentioned only the **Avenue** style as it's the first and default one, but there are many others! And while **Avenue** takes pride in being a rich yet generalistic style, Basemapkit provides styles that are better suited for **data visualization**, that are minimalistic and leaves room to your own data. And all the styles come with extra *presets*, meaning variants, playing with color and contrasts, but more on this in the next section.
|
|
347
353
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
### `avenue` ⤵️
|
|
351
|
-
This one is the default, with all the `colorEdit` options set to default:
|
|
354
|
+
### Base style: `avenue`
|
|
355
|
+
**Avenue** is the default style, rich and with a focus on rendering somewhat natural colors:
|
|
352
356
|
```ts
|
|
353
357
|
// Create the style
|
|
354
358
|
const style = getStyle("avenue", options);
|
|
355
359
|
```
|
|
360
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=avenue)
|
|
361
|
+
|
|
356
362
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
363
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
// Create the style
|
|
365
|
-
const style = getStyle("avenue-pop", options);
|
|
366
|
-
```
|
|
364
|
+
**Here are the available presets:**
|
|
365
|
+
- `avenue-pop`
|
|
367
366
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
370
|
+
|
|
371
|
+
- `avenue-bright`
|
|
372
|
+
|
|
373
|
+
|
|
374
|
+
- `avenue-saturated`
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
- `avenue-warm`
|
|
378
|
+
|
|
379
|
+
|
|
380
|
+
- `avenue-vintage`
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
- `avenue-bnw`
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
- `avenue-blueprint`
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
|
|
390
|
+
### Base style: `bureau`
|
|
391
|
+
**Bureau** is your dataviz companion! it has minimal clutter, same hue, (yet different shade) for land and water, the point is not to be realistic but to be a backdrop just present enough to give context.
|
|
375
392
|
```ts
|
|
376
393
|
// Create the style
|
|
377
|
-
const style = getStyle("
|
|
394
|
+
const style = getStyle("bureau", options);
|
|
378
395
|
```
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
397
|
+
|
|
398
|
+
|
|
399
|
+
|
|
400
|
+
**Here are the available presets:**
|
|
401
|
+
- `bureau-negative`
|
|
402
|
+
|
|
403
|
+
|
|
404
|
+
- `bureau-bnw`
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
- `bureau-purple`
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
- `bureau-bnw-negative`
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
- `bureau-bnw-dark`
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
- `bureau-bnw-bright`
|
|
417
|
+
|
|
418
|
+
|
|
419
|
+
- `bureau-bnw-negative-bright`
|
|
420
|
+
|
|
421
|
+
|
|
422
|
+
- `bureau-bnw-negative-dark`
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
- `bureau-sand`
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
- `bureau-sand-negative`
|
|
429
|
+
|
|
430
|
+
|
|
431
|
+
- `bureau-ivory`
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
- `bureau-ivory-negative`
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
- `bureau-navy`
|
|
438
|
+
|
|
439
|
+
|
|
440
|
+
|
|
441
|
+
### Base style: `journal`
|
|
442
|
+
**Journal** borrows from both **Avenue** and **Bureau**. It's great for dataviz while preserving a natural feel.
|
|
386
443
|
```ts
|
|
387
444
|
// Create the style
|
|
388
|
-
const style = getStyle("
|
|
445
|
+
const style = getStyle("journal", options);
|
|
389
446
|
```
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
394
|
-
|
|
447
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=journal)
|
|
448
|
+
|
|
449
|
+
|
|
395
450
|
|
|
396
|
-
|
|
451
|
+
**Here are the available presets:**
|
|
452
|
+
- `journal-night`
|
|
453
|
+
|
|
454
|
+
|
|
455
|
+
- `journal-teal`
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
- `journal-vintage`
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
|
|
462
|
+
### Base style: `monochrome`
|
|
463
|
+
**Monochrome** is a very contrasty, yet with a soft and velvety touch. It's great with a bright and colorful overlay!
|
|
397
464
|
```ts
|
|
398
465
|
// Create the style
|
|
399
|
-
const style = getStyle("
|
|
466
|
+
const style = getStyle("monochrome", options);
|
|
400
467
|
```
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
405
|
-
|
|
468
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=monochrome)
|
|
469
|
+
|
|
470
|
+
|
|
406
471
|
|
|
407
|
-
|
|
472
|
+
(No extra preset, but you can still extend it and make your own with `buildStyle()`)
|
|
473
|
+
|
|
474
|
+
|
|
475
|
+
### Base style: `spectre`
|
|
476
|
+
At first, **Spectre** may look a bit weird and unconventional, but it's actually a solid friend for everything weather and climate! It has only the minimal, no road, no street label, no park, just extra bright boundaries.
|
|
408
477
|
```ts
|
|
409
478
|
// Create the style
|
|
410
|
-
const style = getStyle("
|
|
479
|
+
const style = getStyle("spectre", options);
|
|
411
480
|
```
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
482
|
+
|
|
483
|
+
|
|
484
|
+
|
|
485
|
+
Spectre comes with many extra presets, mostly to change the hue of the coastline and boundaries, but also to swap which of the land or sea is darker. Here is the full list:
|
|
486
|
+
|
|
487
|
+
- `spectre-mild-green`
|
|
488
|
+
|
|
489
|
+
|
|
490
|
+
- `spectre-red`
|
|
491
|
+
|
|
492
|
+
|
|
493
|
+
- `spectre-blue`
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
- `spectre-purple`
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
- `spectre-pink`
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
- `spectre-orange`
|
|
503
|
+
|
|
504
|
+
|
|
505
|
+
- `spectre-yellow`
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
- `spectre-negative`
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
- `spectre-negative-mild-green`
|
|
512
|
+
|
|
513
|
+
|
|
514
|
+
- `spectre-negative-red`
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
- `spectre-negative-blue`
|
|
518
|
+
|
|
519
|
+
|
|
520
|
+
- `spectre-negative-purple`
|
|
521
|
+
|
|
522
|
+
|
|
523
|
+
- `spectre-negative-pink`
|
|
524
|
+
|
|
525
|
+
|
|
526
|
+
- `spectre-negative-orange`
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
- `spectre-negative-yellow`
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
# Extra API
|
|
533
|
+
The extra API goes beyond just providing style, yet, it's still minimal and only related to "obtain a style as one need it".
|
|
534
|
+
|
|
535
|
+
## Swapping two layers
|
|
536
|
+
It does exactely what you think: swapping layers. But it does it in a non-destructive way. This can be quite handy when using `spectre` or `spectre-negative` if you prefer to have a dark/light overlay on top of either land or water area when you add your own data layer.
|
|
417
537
|
|
|
418
|
-
### `avenue-vintage` ⤵️
|
|
419
538
|
```ts
|
|
420
|
-
|
|
421
|
-
|
|
539
|
+
import { swapLayers, getStyle } from "basemapkit";
|
|
540
|
+
|
|
541
|
+
...
|
|
542
|
+
const myStyle = getStyle("spectre", options);
|
|
543
|
+
|
|
544
|
+
// In the "spectre" style, the layer "eart" is underneath the layer "water".
|
|
545
|
+
// Let's swap those two:
|
|
546
|
+
const mySwappedStyle = swapLayers("earth", "water", myStyle);
|
|
422
547
|
```
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
### `avenue-bnw` ⤵️
|
|
548
|
+
|
|
549
|
+
## Set layer opacity
|
|
550
|
+
While the opacity of a layer is addressable with `map.setPaintProperty(...)`, this can only be done after the layer is mounted (in a `style.load` or `load` event callback) and the one would have to know the `type` of layer, since the opacity property has a different name for each type.
|
|
551
|
+
|
|
552
|
+
Basemapkit exposes the function `setLayerOpacity()`, which let you set the opacity of a layer *before* it is mounted, and it also resolves the opacity property name for you:
|
|
553
|
+
|
|
430
554
|
```ts
|
|
431
|
-
|
|
432
|
-
|
|
555
|
+
import { setLayerOpacity, getStyle } from "basemapkit";
|
|
556
|
+
|
|
557
|
+
...
|
|
558
|
+
const myStyle = getStyle("spectre", options);
|
|
559
|
+
const opaqueOceanStyle = setLayerOpacity("water", 1, myStyle);
|
|
433
560
|
```
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
561
|
|
|
440
|
-
|
|
562
|
+
You can also provide a style expression if you want the opacity to depend on zoom level or another property. For instance, to have the country labels to progressively appear between z3 and z4:
|
|
441
563
|
```ts
|
|
442
|
-
|
|
443
|
-
|
|
564
|
+
import { setLayerOpacity, getStyle } from "basemapkit";
|
|
565
|
+
|
|
566
|
+
...
|
|
567
|
+
const myStyle = getStyle("spectre", options);
|
|
568
|
+
|
|
569
|
+
style = setLayerOpacity("places_country",
|
|
570
|
+
[
|
|
571
|
+
"interpolate",
|
|
572
|
+
["exponential", 2],
|
|
573
|
+
["zoom"],
|
|
574
|
+
3, 0,
|
|
575
|
+
4, 1
|
|
576
|
+
],
|
|
577
|
+
style);
|
|
444
578
|
```
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
579
|
+
|
|
580
|
+
The function `setLayerOpacity()` create a deep clone and apply the modification on it so it does not alter the provided style.
|
|
581
|
+
|
|
582
|
+
# License
|
|
583
|
+
MIT.
|
package/index.html
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
<!doctype html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
-
<title>basemapkit</title>
|
|
7
|
-
</head>
|
|
8
|
-
<body>
|
|
9
|
-
<div id="basemapkit-version"></div>
|
|
10
|
-
<div id="style-editor" class="hidden">
|
|
11
|
-
<textarea
|
|
12
|
-
id="code-editor"
|
|
13
|
-
rows="30"
|
|
14
|
-
cols="40"
|
|
15
|
-
spellcheck="false"
|
|
16
|
-
wrap="off"
|
|
17
|
-
></textarea>
|
|
18
|
-
<div id="button-container">
|
|
19
|
-
<button id="reset-style-bt" class="button">Reset</button>
|
|
20
|
-
<button id="validate-style-bt" class="button">Show</button>
|
|
21
|
-
</div>
|
|
22
|
-
</div>
|
|
23
|
-
|
|
24
|
-
<img id="logo-img" alt="basemapkit logo" src="/logo.svg"/>
|
|
25
|
-
<a id="gh-link" href="https://github.com/jonathanlurie/basemapkit">
|
|
26
|
-
<img alt="github logo" src="/github-logo-duotone.svg"/>
|
|
27
|
-
</a>
|
|
28
|
-
<select id="style-dd"></select>
|
|
29
|
-
<div id="app"></div>
|
|
30
|
-
<script type="module" src="/src/main.ts"></script>
|
|
31
|
-
</body>
|
|
32
|
-
</html>
|