maplibre-graticule

Check the demo here Link

Install

npm install maplibre-gl maplibre-graticule

or

<link href="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.css" rel="stylesheet" />
<script src="https://unpkg.com/maplibre-gl@2.2.0/dist/maplibre-gl.js"></script>
<script src="https://unpkg.com/maplibre-graticule@0.0.3/dist/maplibre-graticule.js"></script>

Usage

import Maplibre from 'maplibre-gl';
import MaplibreGraticule from 'maplibre-graticule';

Example usage

Check docs/index.html for example implementation.

const graticule = new MaplibreGraticule({
    minZoom: 0,
    maxZoom: 20,
    showLabels: true,
    labelType: 'hdms',
    labelSize: 12,
    labelColor: "#0000ee",
    longitudePosition: 'bottom',
    latitudePosition: 'right',
    paint: {
      'line-opacity': 0.8,
      'line-color': "rgba(255,120,0,0.9)",
      'line-dasharray': [2, 1],
    }
});
map.addControl(graticule);

Remove

map.removeControl(graticule);

Options for use

• minZoom - number, min zoom to display the grid, default: 0
• maxZoom - number, max zoom to display the grid , default: 20
• showLabels - boolean, true | false to show label, default: false
• labelType - 'hdms' | 'decimal', type of label to show, default: hdms
• labelSize - number, size to display the label, default: 12
• labelColor - string, color to display the label, default: #000000
• longitudePosition - 'top' | 'bottom', longitude label position, default: bottom
• latitudePosition - 'left' | 'right', latitude lable position, default: right
• longitudeOffset - number[], offset to shift longitude label, default: [0, 0]
• latitudeOffset - number[], offset to shift latitude label, default: [0, 0]
• paint - maplibregl.LinePaint, layer line paint properties