Add a basic map rendering for land registry

app/package.json

@@ -62,7 +62,7 @@
     "@angular/compiler-cli": "16.2.7",
     "@blockcore/tsconfig": "0.0.1",
     "@types/jasmine": "~4.3.1",
-    "@types/leaflet": "^1.9.6",
+    "@types/leaflet": "^1.9.8",
     "@types/qrcode": "^1.5.2",
     "@types/qs": "^6.9.7",
     "@types/sanitize-html": "^2.8.0",

app/src/app/registries/land/land.component.css

@@ -61,4 +61,11 @@
 .project-logo {
   max-height: 64px;
   max-width: 64px;
-}
+}
+
+#map {
+  width: 100%;
+  height: 100%;
+  min-width: 300px;
+  min-height: 400px;
+}

app/src/app/registries/land/land.component.html

@@ -1,4 +1,7 @@
 <div class="page">
+
+  <div id="map"></div>
+
   <mat-card class="example-card" *ngIf="project">
     <mat-card-header>
       <mat-icon  mat-card-avatar class="project-logo">{{ project.icon }}</mat-icon>
@@ -10,6 +13,7 @@
       <p>
         {{ project.about }}
       </p>
+
     </mat-card-content>
     <mat-card-actions>
       <a

app/src/app/registries/land/land.component.ts

@@ -15,6 +15,7 @@ import { Subscription, tap } from 'rxjs';
 import { DataService } from '../../services/data';
 import { NavigationService } from '../../services/navigation';
 import { ApiService } from '../../services/api.service';
+import * as L from 'leaflet';
 
 @Component({
   selector: 'app-land',
@@ -26,6 +27,10 @@ export class LandRegistryComponent {
   loading = false;
   searchTerm: any;
 
+  collections: any[] = [];
+
+  private map: any;
+
   constructor(
     public navigation: NavigationService,
     public appState: ApplicationState,
@@ -44,6 +49,31 @@ export class LandRegistryComponent {
     private activatedRoute: ActivatedRoute
   ) {}
 
+  onEachFeature(feature: any, layer: any) {
+    // does this feature have a property named popupContent?
+    if (feature.properties && feature.properties.popupContent) {
+      layer.bindPopup(feature.properties.popupContent);
+    }
+  }
+
+  roundton(num: any, n: any) {
+    return Number(num.toFixed(n));
+  }
+
+  closestNumber(n: number, m: number) {
+    return Math.floor(n / m) * m;
+  }
+
+  getTile(n: number, m: number) {
+    let lower = Math.floor(n / m) * m;
+    let upper = lower + m;
+
+    return {
+      lower: lower,
+      upper: upper,
+    };
+  }
+
   ngOnDestroy() {
     this.utilities.unsubscribe(this.subscriptions);
   }
@@ -157,9 +187,238 @@ export class LandRegistryComponent {
         }
 
         this.project = await this.apiService.registry(id);
+
+        // The map still needs to be outside the ngIf, need to delay this code after rendered.
+        this.initMap();
       })
     );
 
     // this.subscriptions.push(this.profileService.items$.subscribe((profiles) => (this.following = profiles)) as Subscription);
   }
+
+  initMap() {
+
+    this.map = L.map('map', {
+      attributionControl: true,
+
+      center: [58.358786, 7.547088],
+      zoom: 19,
+
+      minZoom: 10,
+      maxZoom: 23,
+      // maxBounds: [
+      //   [58.3, 7.6],
+      //   [58.4, 7.5],
+      // ],
+    });
+
+    // initialize the map on the "map" div with a given center and zoom
+    // this.map = L.map('map', {
+    //   center: [51.505, -0.09],
+    //   zoom: 13,
+    // });
+
+    this.map.attributionControl.setPrefix('');
+
+    L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 25,
+      maxNativeZoom: 19,
+      attribution:
+        '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
+    }).addTo(this.map);
+
+    // L.tileLayer('https://opencache.statkart.no/gatekeeper/gk/gk.open_gmaps?layers=Nibcache_UTM33_EUREF89&zoom={z}&x={x}&y={y}', {
+    //   maxZoom: 25,
+    //   maxNativeZoom: 19,
+    //   attribution:
+    //     '<a href="http://www.kartverket.no/">Kartverket</a>',
+    // }).addTo(this.map);
+
+    this.map.on('click', (e: any) => {
+      const lat = this.roundton(e.latlng.lat, 6);
+      const lng = this.roundton(e.latlng.lng, 6);
+
+      console.log('LAT:', lat);
+      console.log('LNG:', lng);
+
+      let num = lat;
+      let decimals = (num % 1) * 1000000;
+      console.log(decimals);
+      let nearest = Math.floor(decimals / 9) * 9;
+      console.log(nearest);
+      let before = nearest * 0.000001;
+      let after = (nearest + 9) * 0.000001;
+
+      console.log(Math.floor(num) + before);
+      console.log(Math.floor(num) + after);
+
+      let num2 = lng;
+      let decimals2 = (num2 % 1) * 1000000;
+      console.log(decimals2);
+      let nearest2 = Math.floor(decimals2 / 18) * 18;
+      console.log(nearest2);
+      let before2 = nearest2 * 0.000001;
+      let after2 = (nearest2 + 18) * 0.000001;
+
+      console.log(Math.floor(num2) + before2);
+      console.log(Math.floor(num2) + after2);
+
+      let tileLat1 = Math.floor(num) + after;
+      let tileLng1 = Math.floor(num2) + after2;
+
+      console.log('PRE-BOUNDS:', [tileLat1, tileLng1]);
+
+      let tileLat2 = tileLat1 - 0.000009;
+      let tileLng2 = tileLng1 - 0.000018;
+
+      tileLat1 = Number(tileLat1.toFixed(6));
+      tileLng1 = Number(tileLng1.toFixed(6));
+      tileLat2 = Number(tileLat2.toFixed(6));
+      tileLng2 = Number(tileLng2.toFixed(6));
+
+      console.log('PRE-BOUNDS 2:', [tileLat2, tileLng2]);
+
+      var bounds: any = [
+        [tileLat1, tileLng1],
+        [tileLat2, tileLng2],
+      ];
+
+      console.log('BOUNDS:', bounds);
+
+      var color;
+      var r = Math.floor(Math.random() * 255);
+      var g = Math.floor(Math.random() * 255);
+      var b = Math.floor(Math.random() * 255);
+      color = 'rgb(' + r + ' ,' + g + ',' + b + ')';
+
+      var borderColor = 'gray';
+
+      var rectangle: any = L.rectangle(bounds, {
+        fillColor: color,
+        color: borderColor,
+        weight: 1,
+      });
+
+      rectangle.propertyId = 'anonymous';
+      rectangle.property = {
+        owner: 'Anonymous',
+        id: 'liberstad/anarchypark/3',
+        location: tileLat1 + ':' + tileLng1 + ':' + tileLat2 + ':' + tileLng2,
+        bounds: bounds,
+        // topCenter: new L.LatLng(lat2, center),
+        // topLeft: new L.LatLng(lat2, lng2),
+        // bottomRight: new L.LatLng(lat1, lng1),
+      };
+
+      this.map.addLayer(rectangle);
+
+      // let before = decimals * 0.0000001;
+      // let after = (decimals + 9) * 0.0000001;
+      // // Log to console
+      // console.log('before', Math.floor(num) + before);
+      // console.log('after', Math.floor(num) + after);
+
+      // decimals = decimals * 0.0000001;
+
+      // let num = 58.358208 * 1000000;
+      // let closest = this.closestNumber(num, 9);
+      // let decimals = num / 1000000;
+
+      // 58.358209
+
+      // lat : 58.358214254714134
+      // lng : 7.54912555217743
+    });
+
+    this.map.whenReady(() => {
+      this.drawGrid();
+    });
+    this.map.on('move', () => {
+      this.drawGrid();
+    });
+  }
+
+  grid: any;
+
+  drawGrid() {
+    if (!this.map) {
+      return;
+    }
+
+    const zoom = this.map.getZoom();
+    const loadFeatures = zoom > 18;
+
+    if (loadFeatures) {
+      if (this.grid) {
+        this.map.removeLayer(this.grid);
+      }
+      this.grid = L.geoJSON(this.features[0], {
+        style: function () {
+          return {
+            color: '#777',
+            stroke: true,
+            weight: 0.5,
+          };
+        },
+      }).addTo(this.map);
+    } else {
+      if (this.grid) {
+        this.map.removeLayer(this.grid);
+        this.grid = null;
+      }
+    }
+  }
+
+  features: any = [
+    {
+      features: [
+        {
+          geometry: {
+            coordinates: [
+              [
+                [7.543198, 58.358218],
+                [7.549565, 58.358218],
+              ],
+              [
+                [7.543198, 58.358227],
+                [7.549565, 58.358227],
+              ],
+              [
+                [7.543198, 58.358236],
+                [7.549565, 58.358236],
+              ],
+              [
+                [7.543198, 58.358245],
+                [7.549565, 58.358245],
+              ],
+              [
+                [7.543198, 58.358254],
+                [7.549565, 58.358254],
+              ],
+              // [
+              //   [7.5491, 58.358096],
+              //   [7.5491, 58.359221],
+              // ],
+              [
+                [7.549126, 58.358096],
+                [7.549126, 58.359221],
+              ],
+              [
+                [7.549144, 58.358096],
+                [7.549144, 58.359221],
+              ],
+              [
+                [7.549162, 58.358096],
+                [7.549162, 58.359221],
+              ],
+            ],
+            type: 'MultiLineString',
+          },
+          type: 'Feature',
+          properties: {},
+        },
+      ],
+      type: 'FeatureCollection',
+    },
+  ];
 }

app/src/styles.scss

@@ -3,6 +3,8 @@
 
 @include mat.core();
 
+@import "~leaflet/dist/leaflet.css";
+
 $primary-palette: (
   50: #fef7df,
   100: #fdeaae,