Merge pull request #117 from savage13/reference_grid

Add Reference Grid based on the undiscovered map sections

src/MapBase.ts

@@ -10,6 +10,7 @@ import { Point } from '@/util/map';
 import * as ui from '@/util/ui';
 import '@/util/leaflet_tile_workaround.js';
 import { Settings } from './util/settings';
+import { MapMgr } from '@/services/MapMgr';
 
 declare module 'leaflet' {
   export type RasterCoords = any;
@@ -25,6 +26,63 @@ export class MapBase {
   center: Point = [0, 0, 0];
   zoom: number = map.DEFAULT_ZOOM;
   private zoomChangeCbs: Array<(zoom: number) => void> = [];
+  baseLayer!: L.Layer;
+  refGrid: Array<L.LayerGroup> = [];
+  refGridOn: boolean = false;
+
+  showBaseMap(show: boolean) {
+    if (show) {
+      this.m.addLayer(this.baseLayer);
+    } else {
+      this.m.removeLayer(this.baseLayer);
+    }
+  }
+
+  async loadTowerAreas() {
+    const areas = await MapMgr.getInstance().fetchAreaMap('MapTower');
+    for (const [data, features] of Object.entries(areas)) {
+      const layers: L.GeoJSON[] = features.map((feature) => {
+        return L.geoJSON(feature, {
+          style: function(_) {
+            return { weight: 0.5, fill: false, color: '#60B0E0' }
+          },
+        });
+      });
+      layers.forEach(layer => this.refGrid[3].addLayer(layer));
+    }
+    this.showReferenceGridInternal();
+  }
+
+  async showReferenceGridInternal() {
+    if (!this.refGrid.length) {
+      this.refGrid = this.createMarkers();
+    }
+    const zoomLevel = this.m.getZoom();
+    let minZoom = [1, 4, 5, 1];
+    if (this.refGridOn) {
+      this.refGrid.forEach((layer, i) => {
+        //for (let i = 0; i < 4; i++) {
+        let visible = this.m.hasLayer(layer);
+        if (zoomLevel >= minZoom[i]) {
+          if (!visible) {
+            this.m.addLayer(layer);
+          }
+        } else {
+          if (visible) {
+            this.m.removeLayer(layer);
+          }
+        }
+      });
+    } else {
+      this.refGrid.forEach(layer => this.m.removeLayer(layer));
+    }
+  }
+
+  showReferenceGrid(show: boolean) {
+    this.refGridOn = show;
+    this.showReferenceGridInternal();
+  }
+
 
   toXYZ(latlng: L.LatLng): Point {
     return [latlng.lng, 0, latlng.lat];
@@ -151,9 +209,51 @@ export class MapBase {
       maxNativeZoom: 7,
     });
     baseLayer.addTo(this.m);
+    this.baseLayer = baseLayer;
 
     this.m.createPane('front').style.zIndex = '1000';
     this.m.createPane('front2').style.zIndex = '1001';
+
+    this.refGridOn = false;
+    this.m.on("zoom", () => {
+      this.showReferenceGridInternal();
+    });
+  }
+  svgIconBase(width: number) {
+    return L.divIcon({
+      html: `<svg  viewBox="0 0 100 100" version="1.1"
+preserveAspectRatio="none"  xmlns="http://www.w3.org/2000/svg" >
+<path d="M 100 50 L 0 50 M 50 0 L 50 100" stroke="#60B0E0" stroke-width="${width}" />
+</svg>`,
+      className: "",
+      iconSize: [10, 10],
+      iconAnchor: [5, 5],
+    });
+  }
+  createMarkers() {
+    const svgIcon = this.svgIconBase(3);
+    const svgIcon2 = this.svgIconBase(6);
+    const svgIcon3 = this.svgIconBase(12);
+    let size = 125;
+    let markers = [L.layerGroup(), L.layerGroup(), L.layerGroup(), L.layerGroup()];
+    for (let i = 0; i < 20 * 4; i++) {
+      for (let j = 0; j < 16 * 4; j++) {
+        let z = -4000 + j * size + 125 / 2;
+        let x = -5000 + i * size + 125 / 2;
+        let k = 2;
+        let icon = svgIcon;
+        if (i % 4 == 0 && j % 4 == 0) {
+          icon = svgIcon3;
+          k = 0;
+        } else if (i % 4 == 0 || j % 4 == 0) {
+          icon = svgIcon2;
+          k = 1;
+        }
+        markers[k].addLayer(L.marker([z, x], { icon }));
+      }
+    }
+    this.loadTowerAreas();
+    return markers;
   }
 
   private setZoomProp(zoom: number) {

src/components/AppMap.ts

@@ -279,6 +279,9 @@ export default class AppMap extends mixins(MixinUtil) {
   private mapCastleAreas = new ui.Unobservable(L.layerGroup());
   showCastleAreas = false;
 
+  showBaseMap = true;
+  showReferenceGrid = false;
+
   private tempObjMarker: ui.Unobservable<MapMarker> | null = null;
 
   private settings: Settings | null = null;
@@ -1281,6 +1284,17 @@ export default class AppMap extends mixins(MixinUtil) {
     });
   }
 
+  onShowBaseMap() {
+    this.$nextTick(() => {
+      this.map.showBaseMap(this.showBaseMap);
+    });
+  }
+  onShowReferenceGrid() {
+    this.$nextTick(() => {
+      this.map.showReferenceGrid(this.showReferenceGrid);
+    });
+  }
+
   created() {
     this.settings = Settings.getInstance();
   }

src/components/AppMap.vue

@@ -238,9 +238,15 @@
             <b-btn size="sm" variant="primary" @click="updateAreaMapVisibility()"><i class="fa fa-filter"></i></b-btn>
           </div>
         </b-form-group>
-        <b-checkbox switch v-model="showSafeAreas" @change="onShowSafeAreas">Enemy Non-Search Areas (Safe Zones)</b-checkbox>
+        <b-checkbox switch v-model="showSafeAreas" @change="onShowSafeAreas">Enemy non-search areas (safe zones)</b-checkbox>
         <b-checkbox switch v-model="showMapUnitGrid" @change="onShowMapUnitGridChanged">Show map unit grid</b-checkbox>
-        <b-checkbox switch v-model="showCastleAreas" @change="onShowCastleAreas">Show Hyrule Castle Interior</b-checkbox>
+        <b-checkbox switch v-model="showCastleAreas" @change="onShowCastleAreas">Show Hyrule castle interior</b-checkbox>
+        <b-checkbox switch v-model="showBaseMap" @change="onShowBaseMap">Show base map</b-checkbox>
+        <b-checkbox switch v-model="showReferenceGrid" @change="onShowReferenceGrid">
+          <div title="Display an overlap map with region outlines and grid markers, similar to that before Tower activation. This map can be displayed over the base map.">
+            Show region outlines and grid
+          </div>
+        </b-checkbox>
         <hr/>
         <h4 class="subsection-heading">Item Auto Placement</h4>
         <b-radio-group stacked class="mb-4" v-model="shownAutoItem" @change="onShownAutoItemChanged">