Circle radiuses now in meters, change size based on zoom level

mcgill-robotics · Apr 28, 2024 · e3c9f45 · e3c9f45
1 parent 57a52c3
commit e3c9f45
Show file tree

Hide file tree

Showing 6 changed files with 36 additions and 16 deletions.
diff --git a/angular_ui_app/package-lock.json b/angular_ui_app/package-lock.json
diff --git a/angular_ui_app/package.json b/angular_ui_app/package.json
@@ -32,6 +32,7 @@
     "@angular/compiler-cli": "^16.2.0",
     "@types/jasmine": "~4.3.0",
     "@types/leaflet": "^1.9.8",
+    "@types/leaflet-rotatedmarker": "^0.2.5",
     "@types/node": "^20.5.9",
     "@types/roslib": "^1.3.1",
     "@types/webpack-env": "^1.18.1",

diff --git a/angular_ui_app/src/app/map/map.component.ts b/angular_ui_app/src/app/map/map.component.ts
@@ -16,8 +16,8 @@ export class MapComponent implements AfterViewInit{
   private initMap(): void {
     this.map = L.map('map', {
       crs: L.CRS.Simple,
-      minZoom: 18,
-      maxZoom: 18
+      minZoom: -5,
+      maxZoom: 12
 
     });
   }

diff --git a/angular_ui_app/src/app/marker.service.ts b/angular_ui_app/src/app/marker.service.ts
@@ -1,16 +1,16 @@
 import { Injectable } from '@angular/core';
 import { HttpClient } from '@angular/common/http';
+import * as LeafRotated from 'leaflet-rotatedmarker';
 import * as L from 'leaflet';
-import 'leaflet-rotatedmarker';
 @Injectable({
   providedIn: 'root'
 })
 export class MarkerService {
   debris: string = '/assets/obstacle-markers.geojson';
   areas: string = '/assets/debris-areas.geojson';
-  private gps_data: number[] = [45.506003790, -73.57566751708];
-  private prev_gps_data: number[] = [45.506103790, -73.57566751708];
-  private control_station: number[] = [45.5056037902832, -73.57576751708984];
+  private gps_data: number[] = [45.406003790, -73.67566751708];
+  private prev_gps_data: number[] = [45.306103790, -73.57566751708];
+  private control_station: number[] = [45.8056037902832, -93.27576751708984];
   private blueIcon: L.Icon;
   private redIcon: L.Icon;
   private blackIcon: L.Icon;
@@ -59,7 +59,7 @@ export class MarkerService {
         const lon = c.geometry.coordinates[1];
         const lat = c.geometry.coordinates[0];
         const rad = c.geometry.size;
-        const area = L.circleMarker([lat, lon], {radius: rad});
+        const area = L.circle([lat, lon], {radius: rad});
         area.setStyle({color: 'green'});
         area.addTo(map);
       }
@@ -68,7 +68,7 @@ export class MarkerService {
 
   makeRoverMarker(map: L.Map): void { 
     const rover  = L.latLng([this.gps_data[0], this.gps_data[1]]);
-    const markerr = L.marker(rover, {icon: this.blueIcon, title: "Rover" + " : "+this.gps_data[0] +", "+this.gps_data[1]});
+    const markerr = L.marker(rover, {icon: this.blueIcon, rotationAngle: 90, title: "Rover" + " : "+this.gps_data[0] +", "+this.gps_data[1]});
     markerr.addTo(map);
     map.setView(rover, 1);
   }

diff --git a/angular_ui_app/src/assets/debris-areas.geojson b/angular_ui_app/src/assets/debris-areas.geojson
@@ -5,7 +5,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50590297241211, -73.57611247558594],
+          "coordinates": [47.50590297241211, -78.57611247558594],
           "size": 40
         },
         "properties": {
@@ -16,7 +16,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50550297241211, -73.57551247558594],
+          "coordinates": [52.50550297241211, 25.57551247558594],
           "size": 20
         },
         "properties": {
@@ -27,7 +27,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50590297241211, -73.57531247558594],
+          "coordinates": [-10.50590297241211, -54.57531247558594],
           "size": 10
         },
         "properties": {
@@ -38,7 +38,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50550297241211, -73.57521247558594],
+          "coordinates": [-45.50550297241211, 73.57521247558594],
           "size": 30
         },
         "properties": {

diff --git a/angular_ui_app/src/assets/obstacle-markers.geojson b/angular_ui_app/src/assets/obstacle-markers.geojson
@@ -5,7 +5,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Point",
-          "coordinates": [45.50590297241211, -73.57591247558594]
+          "coordinates": [45.50590297241211, -23.57591247558594]
         },
         "properties": {
           "name": "obstacle1"
@@ -15,7 +15,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Point",
-          "coordinates": [45.50519779663086, -73.5755615234375]
+          "coordinates": [75.50519779663086, -73.5755615234375]
         },
         "properties": {
           "name": "obstacle2"
@@ -25,7 +25,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Point",
-          "coordinates": [45.50568771362305, -73.5759506225586]
+          "coordinates": [-45.50568771362305, -73.5759506225586]
         },
         "properties": {
           "name": "obstacle3"
@@ -35,7 +35,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Point",
-          "coordinates": [45.50548771362305, -73.5756506225586]
+          "coordinates": [45.50548771362305, 73.5756506225586]
         },
         "properties": {
           "name": "obstacle4"