basemapkit 0.1.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/biome.json +52 -0
- package/dist/basemapkit.d.ts +138 -0
- package/dist/basemapkit.js +3340 -0
- package/dist/basemapkit.js.map +1 -0
- package/dist/colorchange.d.ts +8 -0
- package/dist/language.d.ts +2 -0
- package/index.html +31 -0
- package/package.json +32 -0
- package/readme.md +165 -0
- package/tsconfig.json +25 -0
- package/vite.config-lib.ts +36 -0
package/readme.md
ADDED
|
@@ -0,0 +1,165 @@
|
|
|
1
|
+
<p align="center">
|
|
2
|
+
<img src="./public/logo.svg" alt="Basemapkit logo" width="400px"></img>
|
|
3
|
+
</p>
|
|
4
|
+
<p align="center">
|
|
5
|
+
Basemaps for <a href="https://maplibre.org/maplibre-gl-js/docs/">Maplibre GL JS</a> + <a href="https://protomaps.com/">Protomaps</a>
|
|
6
|
+
</p>
|
|
7
|
+
|
|
8
|
+
<p align="center">
|
|
9
|
+
<img src="https://img.shields.io/npm/v/basemapkit"></img>
|
|
10
|
+
</p>
|
|
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/).
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
## Getting started
|
|
17
|
+
### Install
|
|
18
|
+
On an existing ES project:
|
|
19
|
+
```bash
|
|
20
|
+
npm install basemapkit
|
|
21
|
+
```
|
|
22
|
+
|
|
23
|
+
### Add some style
|
|
24
|
+
The following example add a Maplibre `Map`, add the Protomaps protocol and then generates a style:
|
|
25
|
+
|
|
26
|
+
```ts
|
|
27
|
+
import "maplibre-gl/dist/maplibre-gl.css";
|
|
28
|
+
|
|
29
|
+
import maplibregl from "maplibre-gl";
|
|
30
|
+
import { Protocol } from "pmtiles";
|
|
31
|
+
import { getStyle, getStyleList } from "basemapkit";
|
|
32
|
+
|
|
33
|
+
// Adds the Protomaps protocol:
|
|
34
|
+
maplibregl.addProtocol("pmtiles", new Protocol().tile);
|
|
35
|
+
|
|
36
|
+
// Build the Basemapkit style
|
|
37
|
+
const style = getStyle(
|
|
38
|
+
// One of the main syle:
|
|
39
|
+
"versatile",
|
|
40
|
+
{
|
|
41
|
+
// URL to the pmtiles
|
|
42
|
+
pmtiles: "https://my-s3-bucket.com/planet.pmtiles",
|
|
43
|
+
|
|
44
|
+
// URL to the sprites (for POIs)
|
|
45
|
+
sprite: "https://raw.githubusercontent.com/jonathanlurie/phosphor-mlgl-sprite/refs/heads/main/sprite/phosphor-diecut",
|
|
46
|
+
|
|
47
|
+
// URL to the glyphs (for labels)
|
|
48
|
+
glyphs: "https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf";
|
|
49
|
+
|
|
50
|
+
// Language (you can ommit to use the platform language)
|
|
51
|
+
lang: "en",
|
|
52
|
+
}),
|
|
53
|
+
|
|
54
|
+
// Instantiate the Map:
|
|
55
|
+
const map = new maplibregl.Map({
|
|
56
|
+
container: "map",
|
|
57
|
+
center: [0, 0],
|
|
58
|
+
zoom: 3,
|
|
59
|
+
|
|
60
|
+
// Add the Basemapkit style:
|
|
61
|
+
style,
|
|
62
|
+
});
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
## Language
|
|
66
|
+
Basemakit styles are compatible with Protomaps languages properties and under the hood even uses [`@protomaps/basemaps`](https://docs.protomaps.com/basemaps/flavors).
|
|
67
|
+
|
|
68
|
+
The only addition from **Basemapkit** is the capability to detect the end user's platform language, so if the `lang` option is omitted, it will automatically use the language set by the user at the browser or OS level.
|
|
69
|
+
|
|
70
|
+
Here is the list of supported languages:
|
|
71
|
+
```ts
|
|
72
|
+
"ar" | "cs" | "bg" | "da" | "de" | "el" | "en" | "es" | "et" | "fa" | "fi" | "fr" | "ga" | "he" | "hi" | "hr" | "hu" | "id" | "it" | "ja" | "ko" | "lt" | "lv" | "ne" | "nl" | "no" | "mr" | "mt" | "pl" | "pt" | "ro" | "ru" | "sk" | "sl" | "sv" | "tr" | "uk" | "ur" | "vi" | "zh-Hans" | "zh-Hant"
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
## Styles available
|
|
76
|
+
###
|
|
77
|
+
|
|
78
|
+
|
|
79
|
+
### `versatile` ⤵️
|
|
80
|
+
```ts
|
|
81
|
+
// Create the style
|
|
82
|
+
const style = getStyle("versatile", options);
|
|
83
|
+
```
|
|
84
|
+
|
|
85
|
+
|
|
86
|
+
|
|
87
|
+
|
|
88
|
+
|
|
89
|
+
|
|
90
|
+
### `versatile-night` ⤵️
|
|
91
|
+
```ts
|
|
92
|
+
// Create the style
|
|
93
|
+
const style = getStyle("versatile-night", options);
|
|
94
|
+
```
|
|
95
|
+
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
|
|
99
|
+
|
|
100
|
+
|
|
101
|
+
### `versatile-bright` ⤵️
|
|
102
|
+
```ts
|
|
103
|
+
// Create the style
|
|
104
|
+
const style = getStyle("versatile-bright", options);
|
|
105
|
+
```
|
|
106
|
+
|
|
107
|
+
|
|
108
|
+
|
|
109
|
+
|
|
110
|
+
|
|
111
|
+
|
|
112
|
+
### `versatile-saturated` ⤵️
|
|
113
|
+
```ts
|
|
114
|
+
// Create the style
|
|
115
|
+
const style = getStyle("versatile-saturated", options);
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
|
|
119
|
+
|
|
120
|
+
|
|
121
|
+
|
|
122
|
+
|
|
123
|
+
### `versatile-warm` ⤵️
|
|
124
|
+
```ts
|
|
125
|
+
// Create the style
|
|
126
|
+
const style = getStyle("versatile-warm", options);
|
|
127
|
+
```
|
|
128
|
+
|
|
129
|
+
|
|
130
|
+
|
|
131
|
+
|
|
132
|
+
|
|
133
|
+
|
|
134
|
+
### `versatile-vintage` ⤵️
|
|
135
|
+
```ts
|
|
136
|
+
// Create the style
|
|
137
|
+
const style = getStyle("versatile-vintage", options);
|
|
138
|
+
```
|
|
139
|
+
|
|
140
|
+
|
|
141
|
+
|
|
142
|
+
|
|
143
|
+
|
|
144
|
+
|
|
145
|
+
### `versatile-bnw` ⤵️
|
|
146
|
+
```ts
|
|
147
|
+
// Create the style
|
|
148
|
+
const style = getStyle("versatile-bnw", options);
|
|
149
|
+
```
|
|
150
|
+
|
|
151
|
+
|
|
152
|
+
|
|
153
|
+
|
|
154
|
+
|
|
155
|
+
|
|
156
|
+
### `versatile-blueprint` ⤵️
|
|
157
|
+
```ts
|
|
158
|
+
// Create the style
|
|
159
|
+
const style = getStyle("versatile-blueprint", options);
|
|
160
|
+
```
|
|
161
|
+
|
|
162
|
+
|
|
163
|
+
|
|
164
|
+
|
|
165
|
+
|
package/tsconfig.json
ADDED
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"module": "ESNext",
|
|
6
|
+
"lib": ["ES2021", "DOM", "DOM.Iterable"],
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"verbatimModuleSyntax": true,
|
|
13
|
+
"moduleDetection": "force",
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
|
|
16
|
+
/* Linting */
|
|
17
|
+
"strict": true,
|
|
18
|
+
"noUnusedLocals": true,
|
|
19
|
+
"noUnusedParameters": true,
|
|
20
|
+
"erasableSyntaxOnly": true,
|
|
21
|
+
"noFallthroughCasesInSwitch": true,
|
|
22
|
+
"noUncheckedSideEffectImports": true
|
|
23
|
+
},
|
|
24
|
+
"include": ["src"]
|
|
25
|
+
}
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import { resolve } from 'path';
|
|
2
|
+
import { defineConfig } from 'vite';
|
|
3
|
+
import dts from 'vite-plugin-dts';
|
|
4
|
+
|
|
5
|
+
export default defineConfig({
|
|
6
|
+
mode: "production",
|
|
7
|
+
build: {
|
|
8
|
+
copyPublicDir: false,
|
|
9
|
+
minify: true,
|
|
10
|
+
sourcemap: true,
|
|
11
|
+
lib: {
|
|
12
|
+
entry: resolve(__dirname, 'src/lib/basemapkit.ts'),
|
|
13
|
+
name: 'basemapkit',
|
|
14
|
+
fileName: (format, entryName) => `${entryName}.js`,
|
|
15
|
+
formats: ['es'],
|
|
16
|
+
},
|
|
17
|
+
rollupOptions: {
|
|
18
|
+
// make sure to externalize deps that shouldn't be bundled into your library
|
|
19
|
+
external: [
|
|
20
|
+
"@protomaps/basemaps",
|
|
21
|
+
"maplibre-gl",
|
|
22
|
+
"pmtiles",
|
|
23
|
+
],
|
|
24
|
+
output: {
|
|
25
|
+
// Provide global variables to use in the UMD build for externalized deps
|
|
26
|
+
globals: {},
|
|
27
|
+
},
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
plugins:[
|
|
31
|
+
dts({
|
|
32
|
+
insertTypesEntry: true,
|
|
33
|
+
entryRoot: "src/lib",
|
|
34
|
+
}),
|
|
35
|
+
],
|
|
36
|
+
});
|