RFS Grid Reference Plot for Zone 56J

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.0.0-beta.2.rc.2/leaflet.css">
<script src="https://jjimenezshaw.github.io/Leaflet.UTM/L.LatLng.UTM.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<div id="inputs">RFS Grid Ref: <input id="easting" maxlength="3" placeholder="3 digit easting"> <input id="northing" maxlength="3" placeholder="3 digit northing">&nbsp;<input id="plot" type='button' value="Plot">
</div>
<div id="map"></div>
Note:<br />
Currently supports 6 digit references originating in the areas marked in blue of UTM zone 56, band J. <br />
Depending on origin of the grid reference it may be in either of the blue squares, both will be plotted, but only one will be correct, you have to deduce which.

CSS

#map {
  height: 800px;
}
#inputs{position:absolute;top:20px;left:75px;z-index:9999999}
#inputs input{width:100px;}

JavaScript

// Create the map
var map = L.map('map');

// create a street map layer and add it to the map, making it the default basemap
let streets = L.tileLayer( 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png' ).addTo( map )

// create a satellite imagery layer
let satellite = L.tileLayer( 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}' )

// create a satellite imagery layer
let topo = L.tileLayer( 'https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png' )

// create an object to hold layer names as you want them to appear in the basemap switcher list
let basemapControl = {
  "Standard": streets,
  "Topographic": topo,
  "Satellite": satellite
}

// display the control (switcher list) on the map, by default in the top right corner
L.control.layers( basemapControl ).addTo( map )


// Set up the OSM layer
//L.tileLayer(
//  'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
 //   maxZoom: 18
 // }).addTo(map);
  
  var polygon = L.polyline([
    L.utm({x: 400000, y: 6699999, zone: 56, band: 'J'}).latLng(),
    L.utm({x: 499999, y: 6699999, zone: 56, band: 'J'}).latLng(),
    L.utm({x: 499999, y: 6600000, zone: 56, band: 'J'}).latLng(),
     L.utm({x: 400000, y: 6600000, zone: 56, band: 'J'}).latLng(),
     
    L.utm({x: 400000, y: 6599999, zone: 56, band: 'J'}).latLng(),
    L.utm({x: 499999, y: 6599999, zone: 56, band: 'J'}).latLng(),
    L.utm({x: 499999, y: 6500000, zone: 56, band: 'J'}).latLng(),
     L.utm({x: 400000, y: 6500000, zone: 56, band: 'J'}).latLng(),
     
      L.utm({x: 400000, y: 6699999, zone: 56, band: 'J'}).latLng(),
    ],
    {color: 'blue', fillColor: 'transparent'}
    ).addTo(map); 
      
    map.fitBounds(polygon.getBounds());


function plot(x, y, title){

  var item = L.utm({x: x, y: y, zone: 56, band: 'J', southHemi: true});
  var coord = item.latLng();

  // center of the map
  var marker = [coord.lat, coord.lng];


  var popup = L.popup({autoClose: false, closeOnClick: false})
   ...