Leaflet.LatLng.Grid

A lightweight Leaflet plugin that draws an auto-scaling lat/lng graticule grid with live coordinate display, one-click copy, and latlng.work deep-link integration.

→ Live Demo · Built by latlng.work

Features

• Auto-scaling grid — adjusts line density at every zoom level (30° at zoom 0 down to 0.001° at zoom 14+)
• Canvas-rendered — smooth 60fps panning with no DOM overhead
• Live coordinates — L.Control that displays lat/lng under the mouse cursor
• One-click copy — clicking the map copies coordinates to clipboard
• Deep-link popup — click any point to open it in latlng.work
• Fully configurable — color, opacity, weight, label font, position
• Zero extra dependencies — only requires Leaflet ≥ 1.0.0

Installation

CDN

<link rel="stylesheet" href="https://unpkg.com/leaflet-latlng-grid/plugin/leaflet-latlng-grid.css" />
<script src="https://unpkg.com/leaflet-latlng-grid/plugin/leaflet-latlng-grid.js"></script>

npm

npm install leaflet-latlng-grid

Usage

import 'leaflet-latlng-grid/plugin/leaflet-latlng-grid.css';
import 'leaflet-latlng-grid';

const map = L.map('map').setView([20, 0], 3);

// 1. Add the graticule grid layer
L.latLngGrid({
  lineColor:   '#4ade80',
  lineOpacity: 0.35,
  lineWeight:  0.8,
  showLabels:  true,
}).addTo(map);

// 2. Add the coordinate display control
L.control.latLngCoords({
  position:      'bottomleft',
  numDigits:     5,
  latlngWorkUrl: 'https://latlng.work',
  showLink:      true,
}).addTo(map);

API

L.latLngGrid(options)

| Option | Type | Default | Description | |--------|------|---------|-------------| | lineColor | String | '#4ade80' | Grid line color (any CSS color) | | lineOpacity | Number | 0.35 | Grid line opacity (0–1) | | lineWeight | Number | 0.8 | Grid line width in pixels | | lineDash | Array | [5, 5] | Canvas setLineDash pattern | | showLabels | Boolean | true | Show degree labels on grid lines | | labelColor | String | '#4ade80' | Label text color | | labelOpacity | Number | 0.9 | Label opacity | | labelFontSize | Number | 11 | Label font size in px | | labelFont | String | 'monospace' | Label font family | | zIndex | Number | 200 | Canvas z-index in overlay pane |

L.control.latLngCoords(options)

| Option | Type | Default | Description | |--------|------|---------|-------------| | position | String | 'bottomleft' | Leaflet control position | | numDigits | Number | 5 | Decimal places for coordinates | | latlngWorkUrl | String | 'https://latlng.work' | Base URL for deep-link | | showLink | Boolean | true | Show latlng.work link in click popup |

Grid Scale Reference

| Zoom | Grid interval | |------|--------------| | 0–1 | 30° | | 2 | 20° | | 3 | 10° | | 4 | 5° | | 5 | 2° | | 6 | 1° | | 7 | 30′ (0.5°) | | 8 | 15′ (0.25°) | | 9 | 6′ (0.1°) | | 10 | 3′ (0.05°) | | 11 | 90″ (0.025°) | | 12+ | 36″ (0.01°) and finer |

License

MIT © latlng-work

Part of the latlng.work ecosystem — free tools for working with geographic coordinates.