maplibre-gl-basemap-control 0.12.0 → 0.13.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/README.md +70 -9
- package/dist/{BasemapControl-DcXJBZtu.js → BasemapControl-Cdg7HMeU.js} +480 -82
- package/dist/BasemapControl-Cdg7HMeU.js.map +1 -0
- package/dist/{BasemapControl-BbsxylnF.cjs → BasemapControl-Cw1RH7hF.cjs} +480 -82
- package/dist/BasemapControl-Cw1RH7hF.cjs.map +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/react.cjs +1 -1
- package/dist/react.mjs +1 -1
- package/dist/types/lib/core/BasemapControl.d.ts +7 -0
- package/dist/types/lib/core/BasemapControl.d.ts.map +1 -1
- package/dist/types/lib/core/catalog.d.ts.map +1 -1
- package/dist/types/lib/core/types.d.ts +19 -6
- package/dist/types/lib/core/types.d.ts.map +1 -1
- package/package.json +1 -1
- package/dist/BasemapControl-BbsxylnF.cjs.map +0 -1
- package/dist/BasemapControl-DcXJBZtu.js.map +0 -1
package/README.md
CHANGED
|
@@ -8,7 +8,7 @@ A MapLibre GL JS control for searching and switching public basemaps. It keeps t
|
|
|
8
8
|
## Features
|
|
9
9
|
|
|
10
10
|
- Search-first basemap picker inspired by QuickMapServices
|
|
11
|
-
- Built-in catalog for common public basemaps, MapTiler styles, Amazon Location styles, and
|
|
11
|
+
- Built-in catalog for common public basemaps, MapTiler styles, Amazon Location styles, Mapbox styles, Maptoolkit styles, Protomaps styles, and Stadia Maps basemaps
|
|
12
12
|
- Stackable traffic overlays for TomTom, HERE, Mapbox, and Google
|
|
13
13
|
- Custom basemap and provider definitions
|
|
14
14
|
- MapLibre `IControl` implementation
|
|
@@ -138,11 +138,12 @@ The built-in catalog includes MapTiler styles such as Streets, Base, Dataviz, Ou
|
|
|
138
138
|
Satellite Hybrid, Satellite Plain, Aquarelle, Backdrop, Landscape, Ocean, Toner, OpenStreetMap, and
|
|
139
139
|
Winter. It also includes Amazon Location styles: Standard, Monochrome, Hybrid, and Satellite.
|
|
140
140
|
Mapbox styles include Streets, Outdoors, Light, Dark, Satellite, Satellite Streets, Navigation Day,
|
|
141
|
-
and Navigation Night.
|
|
141
|
+
and Navigation Night. Protomaps styles include Light, Dark, White, Black, Grayscale, and Contrast.
|
|
142
142
|
|
|
143
|
-
MapTiler
|
|
144
|
-
can enter keys and tokens in the dedicated API keys view, opened from the key button in
|
|
145
|
-
header, or you can provide them when creating the control. When a basemap is selected
|
|
143
|
+
MapTiler, Amazon Location, and Protomaps styles require API keys. Mapbox styles require an access
|
|
144
|
+
token. Users can enter keys and tokens in the dedicated API keys view, opened from the key button in
|
|
145
|
+
the panel header, or you can provide them when creating the control. When a basemap is selected
|
|
146
|
+
before its key
|
|
146
147
|
is set, the control surfaces the error and the matching credential field inline, before any
|
|
147
148
|
destructive style change, so the missing key can be entered and the basemap retried with Enter.
|
|
148
149
|
|
|
@@ -153,6 +154,8 @@ const control = new BasemapControl({
|
|
|
153
154
|
amazonApiKey: 'YOUR_AMAZON_LOCATION_API_KEY',
|
|
154
155
|
awsRegion: 'us-east-1',
|
|
155
156
|
mapboxAccessToken: 'YOUR_MAPBOX_ACCESS_TOKEN',
|
|
157
|
+
protomapsApiKey: 'YOUR_PROTOMAPS_API_KEY',
|
|
158
|
+
stadiaApiKey: 'YOUR_STADIA_MAPS_API_KEY',
|
|
156
159
|
});
|
|
157
160
|
```
|
|
158
161
|
|
|
@@ -174,6 +177,32 @@ Mapbox style URLs follow this form:
|
|
|
174
177
|
https://api.mapbox.com/styles/v1/mapbox/{styleId}?access_token={api-key}
|
|
175
178
|
```
|
|
176
179
|
|
|
180
|
+
Protomaps style URLs follow this form:
|
|
181
|
+
|
|
182
|
+
```text
|
|
183
|
+
https://api.protomaps.com/styles/v5/{styleId}/en.json?key={api-key}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
### Stadia Maps and Stamen
|
|
187
|
+
|
|
188
|
+
The catalog ships Stadia Maps' own styles (Alidade Smooth, Alidade Smooth Dark, Alidade Satellite,
|
|
189
|
+
Outdoors, OSM Bright) and the Stadia x Stamen classics (Toner, Toner Lite, Toner Background, Toner
|
|
190
|
+
Labels, Terrain, Terrain Background, Terrain Labels, Watercolor). Stadia has hosted the Stamen
|
|
191
|
+
tilesets since 2023.
|
|
192
|
+
|
|
193
|
+
These are raster tiles that take the key directly on each tile URL:
|
|
194
|
+
|
|
195
|
+
```text
|
|
196
|
+
https://tiles.stadiamaps.com/tiles/{slug}/{z}/{x}/{y}.png?api_key={api-key}
|
|
197
|
+
```
|
|
198
|
+
|
|
199
|
+
Alidade Satellite and Stamen Watercolor are served as `.jpg` instead. The `_labels` layers are
|
|
200
|
+
transparent overlays, so pair them with `allowMultiple: true` to stack them over a base layer.
|
|
201
|
+
|
|
202
|
+
> **Note.** Stadia also supports keyless access from allowlisted domains (localhost included), but
|
|
203
|
+
> this control always sends `api_key`, so a key is required here. Set `stadiaApiKey` or enter it in
|
|
204
|
+
> the panel's API keys view.
|
|
205
|
+
|
|
177
206
|
### Traffic Overlays
|
|
178
207
|
|
|
179
208
|
The catalog ships real-time traffic overlays in the `Traffic` category. They are
|
|
@@ -214,10 +243,18 @@ key must have the Map Tiles API enabled.
|
|
|
214
243
|
> few minutes to propagate). Make sure billing is enabled on the project too.
|
|
215
244
|
|
|
216
245
|
The same `googleMapsApiKey` also upgrades the base Google basemaps
|
|
217
|
-
(`google-maps`, `google-satellite`, `google-terrain`, `google-hybrid`).
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
246
|
+
(`google-maps`, `google-satellite`, `google-terrain`, `google-hybrid`). By
|
|
247
|
+
default these use the public keyless `mt1.google.com` xyz tiles, so they work out
|
|
248
|
+
of the box; when a key is set they load from the authorized Map Tiles API instead
|
|
249
|
+
(via a tile session, like Google Traffic).
|
|
250
|
+
|
|
251
|
+
In the catalog definition this is the split between `source.tiles` and
|
|
252
|
+
`source.sessionTiles`: `tiles` always holds the public keyless template, so
|
|
253
|
+
reading `source.tiles` without a key gives a directly usable URL, while
|
|
254
|
+
`sessionTiles` holds the Map Tiles API template (with its `{session}` and
|
|
255
|
+
`{api-key}` placeholders) that is only used once a key is configured. Basemaps
|
|
256
|
+
that cannot work keylessly, such as `google-traffic`, have no `sessionTiles` and
|
|
257
|
+
keep the session template in `tiles`.
|
|
221
258
|
|
|
222
259
|
> **Licensing caveat.** The keyless `mt1.google.com` tiles are Google Maps'
|
|
223
260
|
> internal endpoints. They are **not** covered by any public or open license, and
|
|
@@ -228,6 +265,26 @@ tiles so they keep working out of the box.
|
|
|
228
265
|
> so these basemaps use the authorized [Map Tiles API](https://developers.google.com/maps/documentation/tile)
|
|
229
266
|
> (which requires the Map Tiles API enabled and billing on your project).
|
|
230
267
|
|
|
268
|
+
## Maptoolkit Styles
|
|
269
|
+
|
|
270
|
+
The catalog ships the seven [Maptoolkit](https://www.maptoolkit.org) vector styles. They need no
|
|
271
|
+
API key and load straight from `https://styles.maptoolkit.org/{styleId}.json`:
|
|
272
|
+
|
|
273
|
+
| Basemap id | Style | Category |
|
|
274
|
+
|------------|-------|----------|
|
|
275
|
+
| `maptoolkit-summer` | `summer` | Outdoor |
|
|
276
|
+
| `maptoolkit-light` | `light` | Light |
|
|
277
|
+
| `maptoolkit-hiking` | `hiking` | Outdoor |
|
|
278
|
+
| `maptoolkit-cycling` | `cycling` | Cycling |
|
|
279
|
+
| `maptoolkit-winter` | `winter` | Outdoor |
|
|
280
|
+
| `maptoolkit-dark` | `dark` | Dark |
|
|
281
|
+
| `maptoolkit-street` | `street` | Street |
|
|
282
|
+
|
|
283
|
+
> **Attribution.** The Maptoolkit style JSONs carry no `attribution` on their sources, so the catalog
|
|
284
|
+
> supplies the required "© Maptoolkit © OSM" credit links. Maptoolkit additionally requires the
|
|
285
|
+
> Maptoolkit logo (at least 24px tall) to be visible and unobstructed on the map; add it to your own
|
|
286
|
+
> UI, since the control cannot render it for you.
|
|
287
|
+
|
|
231
288
|
## API
|
|
232
289
|
|
|
233
290
|
### BasemapControl Options
|
|
@@ -243,6 +300,8 @@ tiles so they keep working out of the box.
|
|
|
243
300
|
| `amazonApiKey` | `string` | `undefined` | Initial Amazon Location API key for built-in Amazon styles |
|
|
244
301
|
| `awsRegion` | `string` | `'us-east-1'` | AWS region for built-in Amazon Location styles |
|
|
245
302
|
| `mapboxAccessToken` | `string` | `undefined` | Initial Mapbox access token for built-in Mapbox styles and the Mapbox Traffic overlay |
|
|
303
|
+
| `protomapsApiKey` | `string` | `undefined` | Initial Protomaps API key for built-in Protomaps styles |
|
|
304
|
+
| `stadiaApiKey` | `string` | `undefined` | Initial Stadia Maps API key for built-in Stadia and Stadia x Stamen basemaps |
|
|
246
305
|
| `tomtomApiKey` | `string` | `undefined` | Initial TomTom API key for the TomTom Traffic overlays |
|
|
247
306
|
| `hereApiKey` | `string` | `undefined` | Initial HERE API key for the HERE Traffic overlay |
|
|
248
307
|
| `googleMapsApiKey` | `string` | `undefined` | Initial Google Maps API key (Map Tiles API) for the Google Traffic overlay and the base Google Maps/Satellite/Terrain/Hybrid basemaps (which fall back to keyless tiles without a key) |
|
|
@@ -309,6 +368,8 @@ const control = new BasemapControl({
|
|
|
309
368
|
- `setMapTilerApiKey(apiKey)` - Set or update the MapTiler API key used by MapTiler styles
|
|
310
369
|
- `setAmazonCredentials(apiKey, awsRegion)` - Set or update Amazon Location credentials
|
|
311
370
|
- `setMapboxAccessToken(accessToken)` - Set or update the Mapbox access token
|
|
371
|
+
- `setProtomapsApiKey(apiKey)` - Set or update the Protomaps API key used by Protomaps styles
|
|
372
|
+
- `setStadiaApiKey(apiKey)` - Set or update the Stadia Maps API key used by Stadia basemaps
|
|
312
373
|
- `setTomTomApiKey(apiKey)` - Set or update the TomTom API key used by TomTom Traffic overlays
|
|
313
374
|
- `setHereApiKey(apiKey)` - Set or update the HERE API key used by the HERE Traffic overlay
|
|
314
375
|
- `setGoogleMapsApiKey(apiKey)` - Set or update the Google Maps API key used by the Google Traffic overlay and the base Google basemaps
|