Adds a layer of maidenhead grid squares for Leaflet maps

Find a file

saundersresearch 746af42d45 Update for v0.2.2		2026-01-19 21:52:17 -06:00
examples	Center labels and add title size as option	2026-01-19 17:30:14 -06:00
src	Add zoom level and font size configuration	2026-01-19 21:51:30 -06:00
.gitignore	Create node project	2026-01-19 00:08:41 -06:00
CHANGELOG.md	Update for v0.2.2	2026-01-19 21:52:17 -06:00
LICENSE.md	Update documentation	2026-01-19 18:09:20 -06:00
package-lock.json	Update for v0.2.2	2026-01-19 21:52:17 -06:00
package.json	Update for v0.2.2	2026-01-19 21:52:17 -06:00
README.md	Add zoom level and font size configuration	2026-01-19 21:51:30 -06:00
vite.config.js	Refactor project	2026-01-19 16:05:31 -06:00

README.md

leaflet-maidenhead

A Leaflet plugin for displaying and highlighting Maidenhead grid squares

This project is a fork of Leaflet.Maidenhead by HA8TKS that adds the ability to highlight specific grid squares.

Usage

Include the script:

<script src="https://unpkg.com/@saundersresearch/leaflet-maidenhead@latest/dist/leaflet-maidenhead.js"></script>

Then add the Maidenhead layer to your Leaflet map:

L.maidenhead({
    color : 'rgba(255, 0, 0, 0.4)', 
    highlights: [
        { grids: ["JN82", "JO"], color: 'rgba(0, 255, 0, 0.4)', fillOpacity: 0.4 },
        { grids: ["KN16"], color: 'rgba(0, 0, 255, 0.4)', fillOpacity: 0.8 }
    ]
}).addTo(map);

See the example in examples/ for a complete working demo.

Options

redraw: Redraw the grid on 'move' or 'moveend'. (default: 'move')
color: The color of the lines and labels. (default: rgba(255, 0, 0, 0.4))
highlights: An array of objects defining grid squares to highlight. Each object can have:
- grids: An array of Maidenhead grid squares to highlight (e.g., ["JN82", "JO"]). They will be highlighted at the largest level matching the prefix and all sub-levels.
- color: The color for the highlighted squares.
- fillOpacity: The fill opacity for the highlighted squares.
zoomLevels: Configuration object to set zoom levels for different grid sizes:
- field: Zoom level for field grids (default: 5)
- square: Zoom level for square grids (default: 9.5)
- subsquare: Zoom level for subsquare grids (default: 14)
- extended: Zoom level for extended grids (default: 18)
- extendedPlus: Zoom level for extended plus grids (default: 22)
font: Configuration object for font size:
- cellPercentage: Percentage of the grid cell size to use for font size (default: 0.2)
- sizeBounds: Object defining min and max font sizes for each grid level:
  - field: (default: { min: 28, max: 42 })
  - square: (default: { min: 18, max: 28 })
  - subsquare: (default: { min: 12, max: 20 })
  - extended: (default: { min: 8, max: 12 })
  - extendedPlus: (default: { min: 8, max: 12 })

Installation for development

For local development, clone the repository and install the dependencies with npm install. Then, build and run the example in examples/ with npm run dev.

To build for production, use npm run build. The output will be at dist/leaflet-maidenhead.js.

License

This project is released under the MIT license.