Fixed bug with GPS

mcgill-robotics · May 10, 2024 · efdbbdb · efdbbdb
1 parent b0cef7c
commit efdbbdb
Show file tree

Hide file tree

Showing 4 changed files with 29 additions and 16 deletions.
diff --git a/angular_ui_app/src/app/components/gps/gps.component.ts b/angular_ui_app/src/app/components/gps/gps.component.ts
@@ -21,11 +21,14 @@ export class GpsComponent implements AfterViewInit {
 
   private initMap(): void {
     this.map = L.map('map', {
-      crs: L.CRS.Simple,
-      minZoom: -5,
-      maxZoom: 12,
       attributionControl: false,
     });
+
+    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
+      maxZoom: 17,
+      minZoom: 12,
+    }).addTo(this.map);
+
   }
 
   ngOnInit() {

diff --git a/angular_ui_app/src/app/marker.service.ts b/angular_ui_app/src/app/marker.service.ts
@@ -8,9 +8,9 @@ import * as L from 'leaflet';
 export class MarkerService {
   debris: string = '/assets/obstacle-markers.geojson';
   areas: string = '/assets/debris-areas.geojson';
-  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 gps_data: number[] = [0, 0];
+  private prev_gps_data: number[] = [0, 0];
+  private control_station: number[] = [0, 0];
   private blueIcon: L.Icon;
   private redIcon: L.Icon;
   private blackIcon: L.Icon;
@@ -20,26 +20,26 @@ export class MarkerService {
     this.blueIcon = new L.Icon({
       iconUrl: 'assets/map-pins/rover-location-icon.png',
       iconSize: [41, 41], 
-      iconAnchor: [12, 41], 
+      iconAnchor: [20, 20], 
       popupAnchor: [1, -34]
     });
 
     this.redIcon = new L.Icon({
       iconUrl: 'assets/map-pins/red-map-pin.png',
       iconSize: [41, 41],
-      iconAnchor: [12, 41],
+      iconAnchor: [20, 39],
       popupAnchor: [1, -34],
       shadowUrl: 'assets/map-pins/marker-shadow.png',
-      shadowAnchor: [5, 42]
+      shadowAnchor: [12, 42]
     });
 
     this.blackIcon = new L.Icon({
       iconUrl: 'assets/map-pins/black-map-pin.png',
       iconSize: [41, 41],
-      iconAnchor: [12, 41],
+      iconAnchor: [20, 39],
       popupAnchor: [1, -34],
       shadowUrl: 'assets/map-pins/marker-shadow.png',
-      shadowAnchor: [5, 42]
+      shadowAnchor: [12, 42]
     });
   }
 
@@ -61,8 +61,8 @@ export class MarkerService {
         const lat = c.geometry.coordinates[0];
         const rad = c.geometry.size;
         const area = L.circle([lat, lon], {radius: rad});
-        area.setStyle({color: 'green'});
-        area.addTo(map);
+        area.setStyle({color: 'orange'});
+        area.addTo(map).bindPopup(`Debris area: ${lat}, ${lon}`);
       }
     });
   }

diff --git a/angular_ui_app/src/assets/leaflet.css b/angular_ui_app/src/assets/leaflet.css
@@ -78,7 +78,7 @@
 	height: 0;
 	-moz-box-sizing: border-box;
 	     box-sizing: border-box;
-	z-index: 800;
+	z-index: 800;	
 	}
 /* workaround for https://bugzilla.mozilla.org/show_bug.cgi?id=888319 */
 .leaflet-overlay-pane svg {

diff --git a/angular_ui_app/src/assets/obstacle-markers.geojson b/angular_ui_app/src/assets/obstacle-markers.geojson
@@ -15,7 +15,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Point",
-          "coordinates": [75.50519779663086, -73.5755615234375]
+          "coordinates": [51.5, -0.09]
         },
         "properties": {
           "name": "obstacle2"
@@ -40,6 +40,16 @@
         "properties": {
           "name": "obstacle4"
         }
-      }   
+      },
+      {
+        "type": "Feature",
+        "geometry": {
+          "type": "Point",
+          "coordinates": [52.50550297241211, 25.57551247558594]
+        },
+        "properties": {
+          "name": "obstacle5"
+        }
+      }
     ]
   }