


In addition the following assumptions are also required, most of which (in my case) were required to render the map tiles in the first place and hence simplify the code presented below to draw the grid lines.Ī. CentreY, half the height of the canvas in pixels.CentreX, half the width of the canvas in pixels.Context, a canvas context that has already been created for Map.

The code in my answer makes the following assumptions.Ī javascript function must be called to draw the MGRS grid and requires the four following parameters passed to it: The grid extends to double the viewing area in all directions to allow for user panning, this can also be easily changed. The colour and the font size can easily be changed, see definitions at the top of the code block. Grid lines are annotated at the top, bottom, left and right of the viewable area using 12pt san-serif font. The code will display one of the following grid sizes depending on the current zoom level : 100m, 1km, 10km, 100km or the MGRS zone. These tiles come in different zoom sets from zoom 0 displaying the whole world in one tile, through to zoom 19 displaying the whole world in 2**19 tiles. If you cannot or do not want to use the leaflet plugin, the following javascript code will draw blue MGRS grid lines on a HTML canvas context which it is assumed already contains a map rendered using slippy map tiles, for example OpenStreetMap.
