Skip to content

kaditya97/maplibre-basemaps

Repository files navigation

maplibre-basemaps

Maplibre plugin to add basemaps layer switcher

Check the demo here Link

Install

npm install maplibre-gl maplibre-basemaps

or

<link href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/[email protected]/dist/maplibre-basemaps.js"></script>

Usage

import Maplibre from 'maplibre-gl';
import BasemapControl from 'maplibre-basemaps';

Example usage

Check docs/index.html for example implementation.

const osm = {
    name: "Open Street Map",
    tiles: ['https://tile.openstreetmap.org/{z}/{x}/{y}.png'],
    maxzoom: 18,
    attribution: 'osm'
}
const osmHot = {
    name: "OSM HOT",
    tiles: ['https://a.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png'],
}
const osmCycle = {
    name: "OSM Cycle",
    tiles: ['https://a.tile-cyclosm.openstreetmap.fr/cyclosm/{z}/{x}/{y}.png'],
}
const esriTerrain = {
    name: "Esri Terrain",
    tiles: ['https://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer/tile/{z}/{y}/{x}'],
    maxzoom: 13,
    attribution: 'Tiles &copy; Esri &mdash; Source: USGS, Esri, TANA, DeLorme, and NPS',
}
const baseLayers = {
    osm,
    osmHot,
    osmCycle,
    esriTerrain,
}
const basemapControl = new BasemapControl({ basemaps: baseLayers, initialBasemap: "osmHot"  });
map.addControl(basemapControl, 'top-right');

Remove

map.removeControl(basemapControl);

Options for use

  • basemaps - BaseLayerConfig, base layers objects, required
  • initialBasemap - string, basemap key to visualize, default: first basemap
  • width - string, width for basemaps layers container, default: '150px'
  • height - string, height for basemaps layers container, default: '100px'

Layer Configuration

  • name - string, name to visualize layer in container, required
  • tiles - string[], urls of basemap layer, required
  • attribution - string, attribution for basemap layer, optional
  • minZoom - number, min zoom to display the grid, default: 0
  • maxZoom - number, max zoom to display the grid , default: 20

About

Maplibre plugin to add basemaps layer switcher

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published