Commit dc4c36ca authored by Thomas Frion's avatar Thomas Frion

[FEAT|UPDF] Display coordinates

* We display coordonates as DD format and DMS format
* We display more information of the user unit (email address, coordonates)
parent 63a83155
.info{
background: #ffffff;
opacity: .7;
padding: 5px 10px;
border-radius: 2px;
}
#map {
height: 100%;
width: 100%;
}
\ No newline at end of file
}
......@@ -30,12 +30,15 @@ export class MapComponent implements OnInit {
private tiles;
constructor(private auth : AuthGuard, private serviceApi : ServiceApi) {
this.unit = new models.UnitModel(
JSON.parse(localStorage.getItem(environment.localStorage.unit))
);
this.marker = L.marker(this.getCoor(this.unit.geom));
this.marker.bindPopup("<b>" + this.unit.name + "</b> (" + this.unit.code + ")");
);
let coordinates = this.getCoor(this.unit.geom);
this.marker = L.marker(coordinates);
this.marker.bindPopup("<b>" + this.unit.name + "</b> (" + this.unit.code + ") <br>"+
"<a href='mailto:" + this.unit.email + "'>" + this.unit.email + "</a><br><br>" +
"<b>Lat: </b>"+ coordinates[0] +", <b>Lon: </b>" + coordinates[1] + "<br>" +
MapComponent.ddToDMS(coordinates[0],coordinates[1]));
//https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
this.tiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
......@@ -46,6 +49,8 @@ export class MapComponent implements OnInit {
ngOnInit(): void {
// DON'T REMOVE THE COMMENTED CODE BELOW
// this.serviceApi.all().then((res) => {
// let url : string;
// url = res[0].baseUrl.replace('{key}', res[0].key) + "?layer=" + res[0].serviceSettings[2].value + res[0].serviceSettings[0].value;
......@@ -101,18 +106,25 @@ export class MapComponent implements OnInit {
// Coordinates
let info = L.control({position: 'bottomright'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
this.update();
this._div = L.DomUtil.create('div', 'infoControl'); // create a div with a class "info"
this._div.style.background = "#fff";
this._div.style.padding = "10px";
this._div.style.borderRadius = "4px";
this._div.style.opacity = ".7";
this._div.style.fontSize = "14px";
//this.update();
return this._div;
};
info.update = function (lon, lat) {
this._div.innerHTML = ' Lat: ' + lat + 'Lon: '+ lon;
info.update = function (lat, lon) {
this._div.innerHTML = '<p style="margin:0;">DMS &nbsp;&nbsp; ' + MapComponent.ddToDMS(lat,lon) + '</p>'+
'<p style="margin:0;">DD &nbsp;&nbsp;<b>Lat:</b> ' + lat + '&nbsp;&nbsp;<b>Lon:</b> '+ lon+'</p>';
};
info.addTo(this.map);
this.map.addEventListener('mousemove', function(e){
info.update(e.latlng.lng, e.latlng.lat);
info.update(e.latlng.lat, e.latlng.lng);
});
L.control.scale().addTo(this.map);
}
private getCoor(geom : string) : number[] {
......@@ -132,4 +144,23 @@ export class MapComponent implements OnInit {
return center;
}
private static ddToDMS(lat: number, lon: number,) : string{
let latitude = this.toDegreesMinutesAndSeconds(lat);
let longitude = this.toDegreesMinutesAndSeconds(lon);
let latCad = lat >= 0 ? "N" : "S";
let lonCad = lat >= 0 ? "E" : "O";
return "<b>Lat: </b>"+ latCad + " " + latitude + "&nbsp;&nbsp;<b>Lon: </b>"+ lonCad + " " + longitude ;
}
private static toDegreesMinutesAndSeconds(coor : number) : string {
let abs = Math.abs(coor);
let deg = Math.floor(abs);
let originMin = (abs - deg) * 60;
let min = Math.floor(originMin);
let sec = ((originMin - min) * 60).toFixed(3);
return deg + "° " + min + "' " + sec+"''";
}
}
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment