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)