A Leaflet control that displays the current mouse position in multiple coordinate systems.
npm
npm install leaflet.mousecoordinate
Manual
Download and include dist/leaflet.mousecoordinate.js and dist/leaflet.mousecoordinate.css in your project.
L.control.mouseCoordinate({ utm: true, utmref: true }).addTo(map);| 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 |
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.
npm install
npx grunt # lint, build, minify, generate docs
npx grunt check # lint only (ESLint + CSSLint)
npm run docs # regenerate doc/ only