### Install MapLibre GL Basemaps Control using npm
Source: https://github.com/ka7eh/maplibre-gl-basemaps/blob/main/README.md
This command installs the MapLibre GL Basemaps Control package from npm. This is the first step to integrating the control into your project.
```bash
npm install maplibre-gl-basemaps
```
--------------------------------
### Initialize MapLibre GL Map with Basemap Control (JavaScript)
Source: https://github.com/ka7eh/maplibre-gl-basemaps/blob/main/example.html
This snippet initializes a MapLibre GL map and adds a custom basemap control. It defines two basemaps: 'ortoEsri' using ESRI World Imagery and 'OpenStreetMap' using OpenStreetMap tiles. The control is positioned at the bottom-left of the map.
```javascript
window.addEventListener("load", function () {
const map = new maplibregl.Map({
container: "Map",
attributionControl: false,
style: {
version: 8,
sources: {},
layers: []
}
});
map.addControl(new maplibregl.AttributionControl({
compact: true
}), "bottom-right");
map.addControl( new MaplibreGLBasemapsControl( {
basemaps: [
{
id: "ortoEsri",
tiles: ["https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}"],
sourceExtraParams: {
tileSize: 256,
attribution: "ESRI © ESRI",
minzoom: 0,
maxzoom: 22
}
},
{
id: "OpenStreetMap",
tiles: [ 'https://tile.openstreetmap.org/{z}/{x}/{y}.png' ],
sourceExtraParams: {
tileSize: 256,
attribution: "© OpenStreetMap Contributors",
minzoom: 0,
maxzoom: 20
}
}
],
initialBasemap: "OpenStreetMap",
expandDirection: "top"
}), "bottom-left" );
});
```
--------------------------------
### Basic HTML Structure for Map Container
Source: https://github.com/ka7eh/maplibre-gl-basemaps/blob/main/example.html
This HTML sets up the basic structure for a web page, defining a div with the ID 'Map' which will be used as the container for the MapLibre GL map. It also includes basic CSS to ensure the map container takes up the full height and width of the viewport.
```html
html, body, #Map { height: 100%; width: 100%; padding: 0; margin: 0; }
```
--------------------------------
### Integrate MapLibre GL Basemaps Control via HTML Script Tag (HTML)
Source: https://context7.com/ka7eh/maplibre-gl-basemaps/llms.txt
Shows how to use the MapLibre GL Basemaps Control directly in an HTML file without a module bundler. It includes the necessary CSS and JavaScript file links from unpkg and demonstrates initializing the map and the basemaps control with basic configurations.
```html
```
--------------------------------
### Initialize MapLibre GL Basemaps Control with Custom Basemaps (JavaScript)
Source: https://context7.com/ka7eh/maplibre-gl-basemaps/llms.txt
Demonstrates how to initialize the `BasemapsControl` with a custom array of basemap configurations, including tile URLs and source parameters. It also shows how to set the initial basemap and control expansion direction, then adds the control to the map.
```javascript
import maplibregl from 'maplibre-gl';
import BasemapsControl from 'maplibre-gl-basemaps';
import 'maplibre-gl-basemaps/lib/basemaps.css';
const map = new maplibregl.Map({
container: 'map',
style: {
version: 8,
sources: {},
layers: []
}
});
const basemapsControl = new BasemapsControl({
basemaps: [
{
id: 'openstreetmap',
tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
sourceExtraParams: {
tileSize: 256,
attribution: '© OpenStreetMap Contributors',
minzoom: 0,
maxzoom: 20
}
},
{
id: 'esri-imagery',
tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}'],
sourceExtraParams: {
tileSize: 256,
attribution: 'ESRI © ESRI',
minzoom: 0,
maxzoom: 22
}
}
],
initialBasemap: 'openstreetmap',
expandDirection: 'right'
});
map.addControl(basemapsControl, 'bottom-left');
```
--------------------------------
### Configure BasemapsControl Options (JavaScript)
Source: https://context7.com/ka7eh/maplibre-gl-basemaps/llms.txt
Illustrates the configuration options for the `BasemapsControl`, including defining multiple basemaps with custom tile URLs, source/layer parameters, setting the initial basemap, and specifying the UI expansion direction. This code snippet is intended to be used when instantiating the `BasemapsControl`.
```javascript
const options = {
// Array of basemap configurations (required)
basemaps: [
{
id: 'satellite',
tiles: ['https://example.com/tiles/{z}/{x}/{y}.png'],
sourceExtraParams: {
tileSize: 256,
attribution: 'Custom Attribution',
minzoom: 0,
maxzoom: 18,
bounds: [-180, -85.051129, 180, 85.051129]
},
layerExtraParams: {
paint: {
'raster-opacity': 0.8
}
}
}
],
// ID of basemap to display initially (required)
initialBasemap: 'satellite',
// Direction control expands on hover: 'top' | 'down' | 'left' | 'right'
expandDirection: 'top'
};
map.addControl(new BasemapsControl(options), 'bottom-left');
```
--------------------------------
### Add Basemaps Control to MapLibre GL Map
Source: https://github.com/ka7eh/maplibre-gl-basemaps/blob/main/README.md
This JavaScript code snippet demonstrates how to import and add the BasemapsControl to a MapLibre GL map instance. It includes importing the necessary component and its CSS, and then adding the control with optional configurations.
```javascript
import BasemapsControl from 'maplibre-gl-basemaps';
import 'maplibre-gl-basemaps/lib/basemaps.css';
map.addControl(new BasemapsControl(options));
```
=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.