Add 10x10 grid

natronium · Jun 29, 2024 · aafa2fc · aafa2fc
1 parent 3703506
commit aafa2fc
Show file tree

Hide file tree

Showing 2 changed files with 45 additions and 27 deletions.
diff --git a/gatormap.js b/gatormap.js
@@ -5,50 +5,61 @@
 // width & height = 480
 
 L.CRS.GatorCRS = L.extend({}, L.CRS.Simple, {
-    transformation: new L.Transformation(256/480, 88, -256/480, 168)
+  transformation: new L.Transformation(256 / 480, 88, -256 / 480, 168)
 })
 
+
+let graticuleOverlay = L.svgOverlay(document.querySelector('#graticule_grid'),
+  L.latLngBounds([[315, -165], [-165, 315]]), {
+  opacity: 0.7,
+  interactive: true
+});
+
+let graticule_layer = L.layerGroup([graticuleOverlay]);
+
 let map = L.map('map', {
-    crs: L.CRS.GatorCRS,
-    layers: [pot_layer, chest_layer, race_layer, npc_layer, npc_path_layer]
+  crs: L.CRS.GatorCRS,
+  layers: [pot_layer, chest_layer, race_layer, npc_layer, npc_path_layer, graticule_layer]
 }).setView([75, 75], 2);
+
 L.tileLayer('maptiles/{z}/{x}_{y}.png', {
-    maxZoom: 7,
-    noWrap: true
+  maxZoom: 7,
+  noWrap: true
 }).addTo(map);
 
 let layerControl = L.control.layers({}, {
   "Pots": pot_layer,
   "Chests": chest_layer,
   "Races": race_layer,
   "NPCs": npc_layer,
-  "NPC Paths": npc_path_layer
+  "NPC Paths": npc_path_layer,
+  "Grid": graticule_layer,
 }).addTo(map);
 
 // Patch first to avoid longitude wrapping.
 L.Control.Coordinates.include({
-    _update: function(evt) {
-      var pos = evt.latlng,
-        opts = this.options;
-      if (pos) {
-        //pos = pos.wrap(); // Remove that instruction.
-        this._currentPos = pos;
-        this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
-        this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
-        this._label.innerHTML = this._createCoordinateLabel(pos);
-      }
+  _update: function (evt) {
+    var pos = evt.latlng,
+      opts = this.options;
+    if (pos) {
+      //pos = pos.wrap(); // Remove that instruction.
+      this._currentPos = pos;
+      this._inputY.value = L.NumberFormatter.round(pos.lat, opts.decimals, opts.decimalSeperator);
+      this._inputX.value = L.NumberFormatter.round(pos.lng, opts.decimals, opts.decimalSeperator);
+      this._label.innerHTML = this._createCoordinateLabel(pos);
     }
-  });
+  }
+});
 
 L.control.coordinates({
-	position:"bottomleft", //optional default "bootomright"
-	decimals:2, //optional default 4
-	decimalSeperator:".", //optional default "."
-	labelTemplateLat:"Latitude: {y}", //optional default "Lat: {y}"
-	labelTemplateLng:"Longitude: {x}", //optional default "Lng: {x}"
-	enableUserInput:true, //optional default true
-	useDMS:false, //optional default false
-	useLatLngOrder: true, //ordering of labels, default false-> lng-lat
-	markerType: L.marker, //optional default L.marker
-	markerProps: {}, //optional default {},
+  position: "bottomleft", //optional default "bootomright"
+  decimals: 2, //optional default 4
+  decimalSeperator: ".", //optional default "."
+  labelTemplateLat: "Latitude: {y}", //optional default "Lat: {y}"
+  labelTemplateLng: "Longitude: {x}", //optional default "Lng: {x}"
+  enableUserInput: true, //optional default true
+  useDMS: false, //optional default false
+  useLatLngOrder: true, //ordering of labels, default false-> lng-lat
+  markerType: L.marker, //optional default L.marker
+  markerProps: {}, //optional default {},
 }).addTo(map);
diff --git a/index.html b/index.html
@@ -22,4 +22,11 @@
 
 <body>
     <div id="map"></div>
+    <svg id="graticule_grid" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256">
+        <g>
+            <path
+                d="M 0,0 0,256 M 25.6,0 l 0,256 M 51.2,0 l 0,256 M 76.8,0 l 0,256 m 25.6,-256 0,256 M 128,0 l 0,256 m 25.6,-256 0,256 m 25.6,-256 0,256 m 25.6,-256 0,256 m 25.6,-256 0,256 M 256,0 256,256 M 0,0 256,0 M 0,25.6 l 256,0 M 0,51.2 l 256,0 M 0,76.8 l 256,0 m -256,25.6 256,0 M 0,128 l 256,0 m -256,25.6 256,0 m -256,25.6 256,0 m -256,25.6 256,0 m -256,25.6 256,0 M 0,256 l 256,0"
+                style="fill:none;stroke:#000000;stroke-width:0.1px" id="path1" />
+        </g>
+    </svg>
 </body>