Convert map position to grid reference

Using the British Isles Grid Reference (bigr) library

Include the Leaflet JS and CSS (here from CDNs).

    <script src="https://unpkg.com/leaflet@1.6.0/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.6.0/dist/leaflet.css">
    

Include the bigr JS (here from a CDN).

    <script src="https://unpkg.com/brc-atlas-bigr/dist/bigr.min.umd.js"></script>
    

The previous example was for the latest version. To included a specific version from the same CDN, specify a version number as in this example.

    <script src="https://unpkg.com/brc-atlas-bigr@1.11.1/dist/bigr.min.umd.js"></script>
      

Create the Leaflet map.

    var map = new L.Map("map", {center: [55, -5], zoom: 6})
      .addLayer(new L.TileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"))
    

Bind function to Leaflet mousemove event that takes the lat/lng of the mouse position, gets the corresponding grid references and updates page elements to display them.

    map.on("mousemove", function(e) {
      var grs = bigr.getGrFromCoords(e.latlng.lng, e.latlng.lat, 'wg', '', [100000, 10000, 5000, 2000, 1000, 100, 10, 1])
      Object.keys(grs).forEach(function(p){
        document.getElementById(p).innerText = grs[p]
      })
    })
    

This is the call to the bigr library that gets the grid references. The third argument - 'wg' - indicates that the passed in coordinates are longitude and latitude (WGS 84). The empty string passed as a fourth argument tells the library to determine the output grid reference system (British, Irish or Channel Islands) depending on the input position. The fifth argument is an array of precisions - in metres - indicating which grid references to return. In this case all precisions are requested.

    var grs = bigr.getGrFromCoords(e.latlng.lng, e.latlng.lat, 'wg', '', [100000, 10000, 5000, 2000, 1000, 100, 10, 1])