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

---

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