ka7eh / maplibre-gl-basemaps

MapLibre GL Basemaps Control

The core interactions and styling of this control is based on Leaflet.Basemaps

A Maplibre GL Control for switching between basemaps. The control only supports raster sources.

Demo

This should work with Mapbox GL too. See example.mapboxgl.html. You need to add a Mapbox access token to run this example.

Usage

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)