Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/ka7eh/maplibre-gl-basemaps
https://github.com/ka7eh/maplibre-gl-basemaps
Last synced: about 2 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/ka7eh/maplibre-gl-basemaps
- Owner: ka7eh
- Created: 2021-11-23T00:26:34.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-06-09T15:25:56.000Z (over 1 year ago)
- Last Synced: 2024-03-14T19:05:34.888Z (10 months ago)
- Language: HTML
- Size: 64.5 KB
- Stars: 15
- Watchers: 2
- Forks: 5
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
- awesome-maplibre - maplibre-gl-basemaps - A plugin for switching between raster basemaps. (User Interface Plugins / JavaScript)
README
# MapLibre GL Basemaps Control
> The core interactions and styling of this control is based on [Leaflet.Basemaps](https://github.com/consbio/Leaflet.Basemaps)
A Maplibre GL Control for switching between basemaps. The control only supports raster sources.
[Demo](https://ka7eh.github.io/maplibre-gl-basemaps/example)
> This should work with Mapbox GL too. See `example.mapboxgl.html`. You need to add a Mapbox access token to run this example.
## Usage
```{js}
import BasemapsControl from 'maplibre-gl-basemaps';
import 'maplibre-gl-basemaps/lib/basemaps.css';
map.addControl(new BasemapsControl(options));
```
To run the examples locally, install the dependencies and run `npm run examples`.
Go to `localhost:8080` for Maplibre GL example and `localhost:8080/example.mapbox.html` for Mapbox GL example.
## Options
#### Control options
| Attribute | Description | Default value |
|-----------------|------------------------------------------------------------------------------------|---------------|
| basemaps | An array of basemap objects (see the table below for attributes of basemap object) | - |
| initialBasemap | Id of the basemap to set to active on initialization | - |
| expandDirection | The direction that the control expand on hover | right |
#### Basemap object
| Attribute | Description |
|-------------------|-----------------------------------------------------------------------------------------------------------------------------------------------------|
| id | The string to use for both the basemap source and layer |
| tiles | An array of one or more tile source URLs, as in the TileJSON spec (https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/#raster-tiles) |
| sourceExtraParams | Other parameters accepted by MapLibre GL raster source to pass to the basemap (https://maplibre.org/maplibre-gl-js-docs/style-spec/sources/#raster) |
| layerExtraParams | Other parameters accepted by MapLibre GL raster layer to pass to the basemap (https://maplibre.org/maplibre-gl-js-docs/style-spec/layers/#raster) |