https://github.com/kaditya97/maplibre-graticule

Graticuel / Grid plugin for MapLibre GL JS / Mapbox GL JS
https://github.com/kaditya97/maplibre-graticule

graticule grid maplibre-gl-js

Last synced: about 1 month ago
JSON representation

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

• Host: GitHub
• URL: https://github.com/kaditya97/maplibre-graticule
• Owner: kaditya97
• License: bsd-3-clause
• Created: 2023-08-31T12:21:11.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-01-09T04:16:50.000Z (12 months ago)
• Last Synced: 2024-04-26T10:21:29.017Z (8 months ago)
• Topics: graticule, grid, maplibre-gl-js
• Language: TypeScript
• Homepage: https://kaditya97.github.io/maplibre-graticule/
• Size: 70.3 KB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 1
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# maplibre-graticule

Check the demo here [Link](https://kaditya97.github.io/maplibre-graticule/)

## Install

```bash

npm install maplibre-gl maplibre-graticule

```

or

```html

```

## Usage

```jsx

import Maplibre from 'maplibre-gl';

import MaplibreGraticule from 'maplibre-graticule';

```

## Example usage

Check docs/index.html for example implementation.

```Javascript

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

```Javascript

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