From 713cf47afdb7b028c0c96884abfacd49b0d6d55d Mon Sep 17 00:00:00 2001 From: Walid Aissa Date: Sat, 6 Apr 2024 03:39:34 -0400 Subject: [PATCH] pins indicate their title and coordinates --- angular_ui_app/src/app/map/map.component.ts | 19 ++----------------- angular_ui_app/src/app/marker.service.ts | 14 +++++++------- .../src/assets/debris-markers.geojson | 2 +- 3 files changed, 10 insertions(+), 25 deletions(-) diff --git a/angular_ui_app/src/app/map/map.component.ts b/angular_ui_app/src/app/map/map.component.ts index 4619ad15..9aa9a6a8 100644 --- a/angular_ui_app/src/app/map/map.component.ts +++ b/angular_ui_app/src/app/map/map.component.ts @@ -2,21 +2,6 @@ import { Component, AfterViewInit } from '@angular/core'; import * as L from 'leaflet'; import { MarkerService } from '../marker.service'; -const iconRetinaUrl = 'assets/marker-icon-2x.png'; -const iconUrl = 'assets/marker-icon.png'; -const shadowUrl = 'assets/marker-shadow.png'; -const iconDefault = L.icon({ - iconRetinaUrl, - iconUrl, - shadowUrl, - iconSize: [25, 41], - iconAnchor: [12, 41], - popupAnchor: [1, -34], - tooltipAnchor: [16, -28], - shadowSize: [41, 41] -}); -L.Marker.prototype.options.icon = iconDefault; - @Component({ selector: 'app-map', templateUrl: './map.component.html', @@ -31,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: 19, + maxZoom: 19 }); } diff --git a/angular_ui_app/src/app/marker.service.ts b/angular_ui_app/src/app/marker.service.ts index 29ec38a2..1515b98a 100644 --- a/angular_ui_app/src/app/marker.service.ts +++ b/angular_ui_app/src/app/marker.service.ts @@ -9,7 +9,8 @@ import {MapComponent} from './map/map.component'; export class MarkerService { debris: string = '/assets/debris-markers.geojson'; areas: string = '/assets/map-areas.geojson'; - private gps_data: number[] = [45.506103790, -73.57566751708]; + private gps_data: number[] = [45.506003790, -73.57566751708]; + private control_station: number[] = [45.5056037902832, -73.57576751708984]; private blueIcon: L.Icon; private redIcon: L.Icon; private blackIcon: L.Icon; @@ -48,7 +49,7 @@ export class MarkerService { for (const c of res.features) { const lon = c.geometry.coordinates[1]; const lat = c.geometry.coordinates[0]; - const marker = L.marker([lat, lon], {icon: this.redIcon}); + const marker = L.marker([lat, lon], {icon: this.redIcon, title: c.properties.name + " : "+lat +", "+lon}); marker.addTo(map); } }); @@ -69,15 +70,14 @@ 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}); - + const markerr = L.marker(rover, {icon: this.blueIcon, title: "Rover" + " : "+this.gps_data[0] +", "+this.gps_data[1]}); markerr.addTo(map); + map.setView(rover, 1); } makeControlStationMarker(map: L.Map): void { - var control_station = L.latLng([45.5056037902832, -73.57576751708984]); - L.marker(control_station, {icon: this.blackIcon}).addTo(map); - map.setView(control_station, 1); + var control_station = L.latLng([this.control_station[0], this.control_station[1]]); + L.marker(control_station, {icon: this.blackIcon, title: "Control station" + " : "+this.control_station[0] +", "+this.control_station[1]}).addTo(map); } set_gps_data(msg: any): void { diff --git a/angular_ui_app/src/assets/debris-markers.geojson b/angular_ui_app/src/assets/debris-markers.geojson index 920c5dc0..38436b42 100644 --- a/angular_ui_app/src/assets/debris-markers.geojson +++ b/angular_ui_app/src/assets/debris-markers.geojson @@ -5,7 +5,7 @@ "type": "Feature", "geometry": { "type": "Point", - "coordinates": [45.50570297241211, -73.57591247558594] + "coordinates": [45.50590297241211, -73.57591247558594] }, "properties": { "name": "debris1"