coloured markers and areas

angular_ui_app/src/app/map/map.component.ts

@@ -31,7 +31,9 @@ export class MapComponent implements AfterViewInit{
   private initMap(): void {
     this.map = L.map('map', {
       crs: L.CRS.Simple,
-      minZoom: 15
+      minZoom: 18,
+      maxZoom: 18
+
     });
   }
 
@@ -40,10 +42,7 @@ export class MapComponent implements AfterViewInit{
     this.markerService.makeDebrisMarkers(this.map);
     this.markerService.makeAreas(this.map);
     this.markerService.makeRoverMarker(this.map);
-    var control_station = L.latLng([45.5056037902832, -73.57576751708984]);
-    L.marker(control_station).addTo(this.map);
-    this.map.setView(control_station, 1);
-
+    this.markerService.makeControlStationMarker(this.map);
   }
 
 }

angular_ui_app/src/app/marker.service.ts

@@ -9,16 +9,38 @@ import {MapComponent} from './map/map.component';
 export class MarkerService {
   debris: string = '/assets/debris-markers.geojson';
   areas: string = '/assets/map-areas.geojson';
-  gps_data: number[] = [45.506503790, -73.57566751708];
+  private gps_data: number[] = [45.506103790, -73.57566751708];
+  private blueIcon: L.Icon;
+  private redIcon: L.Icon;
+  private blackIcon: L.Icon;
 
-  constructor(private http: HttpClient) { }
+  constructor(private http: HttpClient) { 
+    this.blueIcon = new L.Icon({
+      iconUrl: '/assets/map-pins/blue-map-pin.png',
+
+    });
+
+    this.redIcon = new L.Icon({
+      iconUrl: '/assets/map-pins/red-map-pin.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34]
+    });
+
+    this.blackIcon = new L.Icon({
+      iconUrl: '/assets/map-pins/black-map-pin.png',
+      iconSize: [25, 41],
+      iconAnchor: [12, 41],
+      popupAnchor: [1, -34]
+    });
+  }
 
   makeDebrisMarkers(map: L.Map): void { 
     this.http.get(this.debris).subscribe((res: any) => {
       for (const c of res.features) {
         const lon = c.geometry.coordinates[1];
         const lat = c.geometry.coordinates[0];
-        const marker = L.marker([lat, lon]);
+        const marker = L.marker([lat, lon], {icon: this.blueIcon});
         marker.addTo(map);
       }
     });
@@ -30,8 +52,8 @@ 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.circleMarker([lat, lon], {radius: rad});
+        area.setStyle({color: 'green'});
         area.addTo(map);
       }
     });
@@ -40,9 +62,16 @@ 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);
+
     markerr.addTo(map);
   }
 
+  makeControlStationMarker(map: L.Map): void { 
+    var control_station = L.latLng([45.5056037902832, -73.57576751708984]);
+    L.marker(control_station).addTo(map);
+    map.setView(control_station, 1);
+  }
+
   set_gps_data(msg: any): void {
     this.gps_data = msg.data;
 

angular_ui_app/src/assets/map-areas.geojson

@@ -5,7 +5,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50590297241211, -73.57591247558594],
+          "coordinates": [45.50590297241211, -73.57611247558594],
           "size": 40
         },
         "properties": {
@@ -16,7 +16,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50519779663086, -73.5725615234375],
+          "coordinates": [45.50550297241211, -73.57551247558594],
           "size": 20
         },
         "properties": {
@@ -27,7 +27,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50668771362305, -73.5739506225586],
+          "coordinates": [45.50590297241211, -73.57531247558594],
           "size": 5
         },
         "properties": {
@@ -38,7 +38,7 @@
         "type": "Feature",
         "geometry": {
           "type": "Circle",
-          "coordinates": [45.50578771362305, -73.5746506225586],
+          "coordinates": [45.50550297241211, -73.57521247558594],
           "size": 30
         },
         "properties": {