A Leaflet control that displays the current mouse position in multiple coordinate systems.
Installation
npm
npm install leaflet.mousecoordinate
Manual
Download and include dist/leaflet.mousecoordinate.js and dist/leaflet.mousecoordinate.css in your project.
Usage
L.control.mouseCoordinate({ utm: true, utmref: true }).addTo(map);
Options
| Option | Type | Default | Description |
|---|---|---|---|
| gps | Boolean | true | Show GPS coordinates (decimal degrees) |
| gpsLong | Boolean | true | Show GPS in three formats: dd.ddddd / dd mm.mmm / dd mm ss.s |
| utm | Boolean | false | Show UTM coordinates |
| utmref | Boolean | false | Show UTMREF / MGRS coordinates |
| qth | Boolean | false | Show QTH / Maidenhead locator |
| nac | Boolean | false | Show Natural Area Code |
| position | String | 'bottomright' | Leaflet control position |
Custom Styling
The control adds CSS classes to its container based on which options are enabled (e.g. .gps, .gpsLong, .utm, .utmref, .qth, .nac). Each row in the coordinate table also carries a class like .gps-coordinates, .utm-coordinates, etc., making it easy to target individual rows via CSS.
Development
npm install npx grunt # lint, build, minify, generate docs npx grunt check # lint only (ESLint + CSSLint) npm run docs # regenerate doc/ only