Skip to content

Latest commit

 

History

History
64 lines (53 loc) · 1.89 KB

README.md

File metadata and controls

64 lines (53 loc) · 1.89 KB
Raw

maplibre-graticule

Check the demo here Link

Install

npm install maplibre-gl maplibre-graticule

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-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