Display grid reference geometry on map

Using the British Isles Grid Reference (bigr) library

This example uses D3 to manage an SVG element which is used to display grid reference geometry on the map. The geometry itself is generated as geoJson by the bigr library and that is what will be described in this example. To understand more about how D3 and Leaflet work together, start with this example.

This example doesn't describe how to use Leaflet either. You can see another simple example which describes the basics of generating a Leaflet map here: this example.

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>
      

In this example the interesting code is in the function bound to Leaflet's mousemove event.

      map.on("mousemove", function(e) {
        var grs = bigr.getGrFromCoords(e.latlng.lng, e.latlng.lat, 'wg', '', [100000, 10000, 5000])
  
        if (!grs.p100000) return
  
        var ftr1 = {
          type: 'Feature',
          geometry: bigr.getGjson(grs.p100000, 'wg', 'square')
        }
        var ftr2 = {
          type: 'Feature',
          geometry: bigr.getGjson(grs.p10000, 'wg', 'square')
        }
        var ftr3 = {
          type: 'Feature',
          geometry: bigr.getGjson(grs.p5000, 'wg', 'circle')
        }
        ftrSquares=[ftr1, ftr2, ftr3] 
        squares = g.selectAll("path")
          .data(ftrSquares)
          
        squares.enter()
          .append("path")
          .attr("d", path)
          .attr("class", function(d, i) {
            return 'c' + i
          })
        reset()
      })
    

First get the grid references of interest from the bigr library at the mouse position (see for more explanation.) In this example we are asking only for 100 km squares, hectads and quadrants (100000, 10000 and 5000 m precision respecively).

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

Don't do anything if the mouse position is outside any grid areas.

    if (!grs.p100000) return
    

Use the bigr libraries' 'getGjson' function to get the geometry associated with each of the three types of grid reference requested and use these geometries to construct geoJson features which D3 can work with to generate SVG path elements. In this example we're asking for squares for 100 km and 10 km (hectad) grid references and circles for 5 km (quadrant) grid references. Below is the code which creates the geoJson feature from a polygon describing a circle for a quandrant grid reference.

    var ftr3 = {
      type: 'Feature',
      geometry: bigr.getGjson(grs.p5000, 'wg', 'circle')
    }
    

The remaining code in the mousemove handler is taking care of displaying the geometry as SVG over the Leaflet map using D3.