maplibre-grid

1.0.0 • Public • Published

maplibre-grid

Grid / graticule plugin for MapLibre GL JS / Mapbox GL JS

Demo

Screenshot

Install

npm install maplibre-gl maplibre-grid

or

<script src="https://unpkg.com/maplibre-gl@1.13.0-rc.5/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@1.13.0-rc.5/dist/maplibre-gl.css" rel="stylesheet">
<script src="https://unpkg.com/maplibre-grid@1.0.0/dist/maplibre-grid.js"></script>

Usage

import Maplibre from 'maplibre-gl';
import * as MaplibreGrid from 'maplibre-grid';

API

export interface GridConfig {
  gridWidth: number;
  gridHeight: number;
  units: Units;
  minZoom?: number;
  maxZoom?: number;
  paint?: maplibregl.LinePaint;
}

const grid = new MaplibreGrid.Grid(config: GridConfig);
  • gridWidth - number, required
  • gridHeight - number, required
  • units - 'degrees' | 'radians' | 'miles' | 'kilometers', grid width/height units, required
  • minZoom - number, min zoom to display the grid
  • maxZoom - number, max zoom to display the grid
  • paint - maplibregl.LinePaint, layer line paint properties

Multiple grids can be added to display major and minor grid together, or different grids depending on zoom level.

Basic

const grid = new MaplibreGrid.Grid({
  gridWidth: 10,
  gridHeight: 10,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid);

Multiple grids

const grid1 = new MaplibreGrid.Grid({
  gridWidth: 10,
  gridHeight: 10,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid1);

const grid2 = new MaplibreGrid.Grid({
  gridWidth: 5,
  gridHeight: 5,
  units: 'degrees',
  paint: {
    'line-opacity': 0.2
  }
});
map.addControl(grid2);

Click event

map.on(MaplibreGrid.GRID_CLICK_EVENT, event => {
  console.log(event.bbox);
});

Click event can be used to implement grid cell selection. Create a polygon feature from event.bbox, and add it to your custom layer. See demo for details.

Destroy

map.removeControl(grid);

Readme

Keywords

Package Sidebar

Install

npm i maplibre-grid

Weekly Downloads

124

Version

1.0.0

License

BSD

Unpacked Size

533 kB

Total Files

19

Last publish

Collaborators

  • petrsloup