basemapkit 0.3.0 → 0.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE.md +21 -0
- package/dist/basemapkit.d.ts +90 -4
- package/dist/basemapkit.js +4550 -146
- package/dist/basemapkit.js.map +1 -1
- package/package.json +1 -1
- package/readme.md +225 -88
- package/index.html +0 -32
package/package.json
CHANGED
package/readme.md
CHANGED
|
@@ -2,23 +2,30 @@
|
|
|
2
2
|
<img src="./public/logo.svg" alt="Basemapkit logo" width="400px"></img>
|
|
3
3
|
</p>
|
|
4
4
|
<p align="center">
|
|
5
|
-
Basemaps for
|
|
5
|
+
Basemaps for the people!</a>
|
|
6
|
+
</p>
|
|
7
|
+
<p align="center">
|
|
8
|
+
Compatible with <a href="https://maplibre.org/maplibre-gl-js/docs/">Maplibre GL JS</a> + <a href="https://protomaps.com/">Protomaps</a>
|
|
6
9
|
</p>
|
|
7
10
|
|
|
8
11
|
<p align="center">
|
|
9
12
|
<img src="https://img.shields.io/npm/v/basemapkit"></img>
|
|
10
13
|
</p>
|
|
11
14
|
|
|
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/).
|
|
15
|
+
**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
16
|
|
|
17
|
+
|
|
14
18
|
| | | |
|
|
15
19
|
| :----------------: | :------: | ----: |
|
|
16
20
|
|  |  |  |
|
|
17
21
|
|  | |  |
|
|
18
22
|
|  |  |  |
|
|
19
23
|
|  |  |  |
|
|
24
|
+
|  |  |  |
|
|
25
|
+
|  |  |  |
|
|
26
|
+
|  |  |  |
|
|
20
27
|
|
|
21
|
-
|
|
22
29
|
|
|
23
30
|
## Getting started 👷
|
|
24
31
|
### Install
|
|
@@ -42,21 +49,21 @@ maplibregl.addProtocol("pmtiles", new Protocol().tile);
|
|
|
42
49
|
|
|
43
50
|
// Build the Basemapkit style
|
|
44
51
|
const style = getStyle(
|
|
45
|
-
// One of the main syle:
|
|
46
|
-
"avenue",
|
|
47
|
-
{
|
|
48
|
-
|
|
49
|
-
|
|
52
|
+
// One of the main syle:
|
|
53
|
+
"avenue",
|
|
54
|
+
{
|
|
55
|
+
// URL to the pmtiles
|
|
56
|
+
pmtiles: "https://my-s3-bucket.com/planet.pmtiles",
|
|
50
57
|
|
|
51
|
-
|
|
52
|
-
|
|
58
|
+
// URL to the sprites (for POIs)
|
|
59
|
+
sprite: "https://raw.githubusercontent.com/jonathanlurie/phosphor-mlgl-sprite/refs/heads/main/sprite/phosphor-diecut",
|
|
53
60
|
|
|
54
|
-
|
|
55
|
-
|
|
61
|
+
// URL to the glyphs (for labels)
|
|
62
|
+
glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf";
|
|
56
63
|
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
});
|
|
64
|
+
// Language (you can ommit to use the platform language)
|
|
65
|
+
lang: "en",
|
|
66
|
+
});
|
|
60
67
|
|
|
61
68
|
// Instantiate the Map:
|
|
62
69
|
const map = new maplibregl.Map({
|
|
@@ -344,106 +351,236 @@ And here is the result:
|
|
|
344
351
|
You can live play with these on [basemapkit.jnth.io](https://s.jnth.io/s/basemapkit) and selecting the style `🖌️ custom 🎨`.
|
|
345
352
|
And from this "color editor" were created the built-in styles available below...
|
|
346
353
|
|
|
354
|
+
## Available styles
|
|
355
|
+
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
356
|
|
|
348
|
-
|
|
349
|
-
|
|
350
|
-
### `avenue` ⤵️
|
|
351
|
-
This one is the default, with all the `colorEdit` options set to default:
|
|
357
|
+
### Base style: `avenue`
|
|
358
|
+
**Avenue** is the default style, rich and with a focus on rendering somewhat natural colors:
|
|
352
359
|
```ts
|
|
353
360
|
// Create the style
|
|
354
361
|
const style = getStyle("avenue", options);
|
|
355
362
|
```
|
|
363
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=avenue)
|
|
364
|
+
|
|
356
365
|
|
|
357
|
-
|
|
358
|
-
|
|
359
|
-
|
|
360
|
-
|
|
361
366
|
|
|
362
|
-
|
|
363
|
-
|
|
364
|
-
// Create the style
|
|
365
|
-
const style = getStyle("avenue-pop", options);
|
|
366
|
-
```
|
|
367
|
+
**Here are the available presets:**
|
|
368
|
+
- `avenue-pop`
|
|
367
369
|
|
|
368
|
-
|
|
369
|
-
|
|
370
|
-
|
|
373
|
+
|
|
374
|
+
- `avenue-bright`
|
|
375
|
+
|
|
376
|
+
|
|
377
|
+
- `avenue-saturated`
|
|
378
|
+
|
|
379
|
+
|
|
380
|
+
- `avenue-warm`
|
|
381
|
+
|
|
382
|
+
|
|
383
|
+
- `avenue-vintage`
|
|
384
|
+
|
|
385
|
+
|
|
386
|
+
- `avenue-bnw`
|
|
387
|
+
|
|
388
|
+
|
|
389
|
+
- `avenue-blueprint`
|
|
390
|
+
|
|
391
|
+
|
|
392
|
+
|
|
393
|
+
### Base style: `bureau`
|
|
394
|
+
**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
395
|
```ts
|
|
376
396
|
// Create the style
|
|
377
|
-
const style = getStyle("
|
|
397
|
+
const style = getStyle("bureau", options);
|
|
378
398
|
```
|
|
379
|
-
|
|
380
|
-
|
|
381
|
-
|
|
400
|
+
|
|
401
|
+
|
|
402
|
+
|
|
403
|
+
**Here are the available presets:**
|
|
404
|
+
- `bureau-negative`
|
|
405
|
+
|
|
406
|
+
|
|
407
|
+
- `bureau-bnw`
|
|
408
|
+
|
|
409
|
+
|
|
410
|
+
- `bureau-purple`
|
|
411
|
+
|
|
412
|
+
|
|
413
|
+
- `bureau-bnw-negative`
|
|
414
|
+
|
|
415
|
+
|
|
416
|
+
- `bureau-bnw-dark`
|
|
417
|
+
|
|
418
|
+
|
|
419
|
+
- `bureau-bnw-bright`
|
|
420
|
+
|
|
421
|
+
|
|
422
|
+
- `bureau-bnw-negative-bright`
|
|
423
|
+
|
|
424
|
+
|
|
425
|
+
- `bureau-bnw-negative-dark`
|
|
426
|
+
|
|
427
|
+
|
|
428
|
+
- `bureau-sand`
|
|
429
|
+
|
|
430
|
+
|
|
431
|
+
- `bureau-sand-negative`
|
|
432
|
+
|
|
433
|
+
|
|
434
|
+
- `bureau-ivory`
|
|
435
|
+
|
|
436
|
+
|
|
437
|
+
- `bureau-ivory-negative`
|
|
438
|
+
|
|
439
|
+
|
|
440
|
+
- `bureau-navy`
|
|
441
|
+
|
|
442
|
+
|
|
443
|
+
|
|
444
|
+
### Base style: `journal`
|
|
445
|
+
**Journal** borrows from both **Avenue** and **Bureau**. It's great for dataviz while preserving a natural feel.
|
|
386
446
|
```ts
|
|
387
447
|
// Create the style
|
|
388
|
-
const style = getStyle("
|
|
448
|
+
const style = getStyle("journal", options);
|
|
389
449
|
```
|
|
390
|
-
|
|
391
|
-
|
|
392
|
-
|
|
394
|
-
|
|
450
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=journal)
|
|
451
|
+
|
|
452
|
+
|
|
395
453
|
|
|
396
|
-
|
|
454
|
+
**Here are the available presets:**
|
|
455
|
+
- `journal-night`
|
|
456
|
+
|
|
457
|
+
|
|
458
|
+
- `journal-teal`
|
|
459
|
+
|
|
460
|
+
|
|
461
|
+
- `journal-vintage`
|
|
462
|
+
|
|
463
|
+
|
|
464
|
+
|
|
465
|
+
### Base style: `monochrome`
|
|
466
|
+
**Monochrome** is a very contrasty, yet with a soft and velvety touch. It's great with a bright and colorful overlay!
|
|
397
467
|
```ts
|
|
398
468
|
// Create the style
|
|
399
|
-
const style = getStyle("
|
|
469
|
+
const style = getStyle("monochrome", options);
|
|
400
470
|
```
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
405
|
-
|
|
471
|
+
[DEMO 🌍](https://basemapkit.jnth.io/?styleid=monochrome)
|
|
472
|
+
|
|
473
|
+
|
|
406
474
|
|
|
407
|
-
|
|
475
|
+
(No extra preset, but you can still extend it and make your own with `buildStyle()`)
|
|
476
|
+
|
|
477
|
+
|
|
478
|
+
### Base style: `spectre`
|
|
479
|
+
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
480
|
```ts
|
|
409
481
|
// Create the style
|
|
410
|
-
const style = getStyle("
|
|
482
|
+
const style = getStyle("spectre", options);
|
|
411
483
|
```
|
|
412
|
-
|
|
413
|
-
|
|
414
|
-
|
|
485
|
+
|
|
486
|
+
|
|
487
|
+
|
|
488
|
+
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:
|
|
489
|
+
|
|
490
|
+
- `spectre-mild-green`
|
|
491
|
+
|
|
492
|
+
|
|
493
|
+
- `spectre-red`
|
|
494
|
+
|
|
495
|
+
|
|
496
|
+
- `spectre-blue`
|
|
497
|
+
|
|
498
|
+
|
|
499
|
+
- `spectre-purple`
|
|
500
|
+
|
|
501
|
+
|
|
502
|
+
- `spectre-pink`
|
|
503
|
+
|
|
504
|
+
|
|
505
|
+
- `spectre-orange`
|
|
506
|
+
|
|
507
|
+
|
|
508
|
+
- `spectre-yellow`
|
|
509
|
+
|
|
510
|
+
|
|
511
|
+
- `spectre-negative`
|
|
512
|
+
|
|
513
|
+
|
|
514
|
+
- `spectre-negative-mild-green`
|
|
515
|
+
|
|
516
|
+
|
|
517
|
+
- `spectre-negative-red`
|
|
518
|
+
|
|
519
|
+
|
|
520
|
+
- `spectre-negative-blue`
|
|
521
|
+
|
|
522
|
+
|
|
523
|
+
- `spectre-negative-purple`
|
|
524
|
+
|
|
525
|
+
|
|
526
|
+
- `spectre-negative-pink`
|
|
527
|
+
|
|
528
|
+
|
|
529
|
+
- `spectre-negative-orange`
|
|
530
|
+
|
|
531
|
+
|
|
532
|
+
- `spectre-negative-yellow`
|
|
533
|
+
|
|
534
|
+
|
|
535
|
+
# Extra API
|
|
536
|
+
The extra API goes beyond just providing style, yet, it's still minimal and only related to "obtain a style as one need it".
|
|
537
|
+
|
|
538
|
+
## Swapping two layers
|
|
539
|
+
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
540
|
|
|
418
|
-
### `avenue-vintage` ⤵️
|
|
419
541
|
```ts
|
|
420
|
-
|
|
421
|
-
|
|
542
|
+
import { swapLayers, getStyle } from "basemapkit";
|
|
543
|
+
|
|
544
|
+
...
|
|
545
|
+
const myStyle = getStyle("spectre", options);
|
|
546
|
+
|
|
547
|
+
// In the "spectre" style, the layer "eart" is underneath the layer "water".
|
|
548
|
+
// Let's swap those two:
|
|
549
|
+
const mySwappedStyle = swapLayers("earth", "water", myStyle);
|
|
422
550
|
```
|
|
423
|
-
|
|
424
|
-
|
|
425
|
-
|
|
426
|
-
|
|
427
|
-
|
|
428
|
-
|
|
429
|
-
### `avenue-bnw` ⤵️
|
|
551
|
+
|
|
552
|
+
## Set layer opacity
|
|
553
|
+
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.
|
|
554
|
+
|
|
555
|
+
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:
|
|
556
|
+
|
|
430
557
|
```ts
|
|
431
|
-
|
|
432
|
-
|
|
558
|
+
import { setLayerOpacity, getStyle } from "basemapkit";
|
|
559
|
+
|
|
560
|
+
...
|
|
561
|
+
const myStyle = getStyle("spectre", options);
|
|
562
|
+
const opaqueOceanStyle = setLayerOpacity("water", 1, myStyle);
|
|
433
563
|
```
|
|
434
|
-
|
|
435
|
-
|
|
436
|
-
|
|
437
|
-
|
|
438
|
-
|
|
439
564
|
|
|
440
|
-
|
|
565
|
+
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
566
|
```ts
|
|
442
|
-
|
|
443
|
-
|
|
567
|
+
import { setLayerOpacity, getStyle } from "basemapkit";
|
|
568
|
+
|
|
569
|
+
...
|
|
570
|
+
const myStyle = getStyle("spectre", options);
|
|
571
|
+
|
|
572
|
+
style = setLayerOpacity("places_country",
|
|
573
|
+
[
|
|
574
|
+
"interpolate",
|
|
575
|
+
["exponential", 2],
|
|
576
|
+
["zoom"],
|
|
577
|
+
3, 0,
|
|
578
|
+
4, 1
|
|
579
|
+
],
|
|
580
|
+
style);
|
|
444
581
|
```
|
|
445
|
-
|
|
446
|
-
|
|
447
|
-
|
|
448
|
-
|
|
449
|
-
|
|
582
|
+
|
|
583
|
+
The function `setLayerOpacity()` create a deep clone and apply the modification on it so it does not alter the provided style.
|
|
584
|
+
|
|
585
|
+
# License
|
|
586
|
+
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>
|