Commit 844a8bcf authored by Thomas Frion's avatar Thomas Frion

[UPDF|CLEAN] Load map services

* We load map service from API
	* Note: Only the service with no key works TODO: handle the services which require a key (IGN)
* Remove the unless code
parent b4cb55fa
......@@ -7,11 +7,9 @@ import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';
import { AppFrontComponent } from './app-front/app-front.component';
import { AuthComponent} from './auth-component/auth-component.component';
import { CoordMapComponent } from './coord-map/coord-map.component';
import { ErrorPageComponent } from './error-page/error-page.component';
import { MapComponent } from './map/map.component';
import { SidebarLeftComponent } from './sidebar-left/sidebar-left.component';
import { SidebarRightComponent } from './sidebar-right/sidebar-right.component';
import { LogoutComponent } from './logout/logout.component';
import { AuthService } from './services/auth.service';
......@@ -28,11 +26,9 @@ import { WebcamApi } from './services/api/clients/webcam.api';
AppComponent,
MapComponent,
SidebarLeftComponent,
CoordMapComponent,
AuthComponent,
AppFrontComponent,
ErrorPageComponent,
SidebarRightComponent,
LogoutComponent
],
imports: [
......
......@@ -40,91 +40,72 @@ export class MapComponent implements OnInit {
"<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', {
maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm,
});
// //https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
// this.tiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
// maxZoom: 19,
// attribution: this.attributions.osm + ' | ' + this.attributions.otm,
// });
}
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;
// this.tiles = L.tileLayer(url, {
// maxZoom: 19,
// attribution: this.attributions.osm + ' | ' + this.attributions.otm,
// });
// let marker = L.marker(this.getCoor(this.unit.geom));
// this.map = L.map('map', {
// center: this.getCoor(this.unit.geom),
// zoom: this.unit.getSetting(models.UnitSetting.SettingName.Zoom).value, //unit.settings[0].value,
// minZoom: 4,
// maxZoom: 17,
// worldCopyJump: true
// });
// marker.bindPopup("<b>" + this.unit.code + "</b> <br>" + this.unit.name);
// this.tiles.addTo(this.map);
// marker.addTo(this.map);
// });
let osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm,
this.baseMap = {};
this.serviceApi.all().then((res) => {
res.forEach((elem) => {
let setting = new models.Service(elem);
if(elem.name != 'IGN'){
this.baseMap[elem.name] = L.tileLayer(elem.baseUrl,{
maxZoom: 19,
attribution: setting.getSetting('attribution')
})
}
// DON'T REMOVE THE COMMENTED CODE BELOW
// else{
// let url = elem.baseUrl.replace('{key}', elem.key) + elem.
// this.baseMap[elem.name] = L.tileLayer(elem.baseUrl,{
// maxZoom: 19,
// attribution: setting.getSetting('attribution')
// })
// }
});
this.map = L.map('map', {
center: this.getCoor(this.unit.geom),
zoom: this.unit.getSetting(models.UnitSetting.SettingName.Zoom).value,
minZoom: 4,
maxZoom: 17,
worldCopyJump: true,
layers: [this.baseMap['OTM']]
});
L.control.layers(this.baseMap).addTo(this.map);
this.marker.addTo(this.map);
this.marker.openPopup();
// Coordinates
let info = L.control({position: 'bottomright'});
info.onAdd = function (map) {
this._div = L.DomUtil.create('div', 'infoControl');
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";
return this._div;
};
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.lat, e.latlng.lng);
});
})
let otm = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm,
});
this.baseMap = {
"OpenTopo Map": otm,
"OpenStreet Map": osm,
}
this.map = L.map('map', {
center: this.getCoor(this.unit.geom),
zoom: this.unit.getSetting(models.UnitSetting.SettingName.Zoom).value,
minZoom: 4,
maxZoom: 17,
worldCopyJump: true,
layers: [otm]
});
L.control.layers(this.baseMap).addTo(this.map);
otm.addTo(this.map);
this.marker.addTo(this.map);
this.marker.openPopup();
// Coordinates
let info = L.control({position: 'bottomright'});
info.onAdd = function (map) {
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 (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.lat, e.latlng.lng);
L.control.scale().addTo(this.map);
});
L.control.scale().addTo(this.map);
}
private getCoor(geom : string) : number[] {
......
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