Commit f4a29270 authored by Thomas Frion's avatar Thomas Frion

[FEAT] Layers controll added

We can select between osm tiles or otm tiles. Next step will be to add the tiles saved in database (API).
parent 42e038e9
......@@ -3,6 +3,6 @@
<app-map></app-map>
</div>
<!-- NOT DONE YET:
<app-sidebar-right></app-sidebar-right>
<app-sidebar-right class='right-menu'></app-sidebar-right> #}
<app-coord-map></app-coord-map>
-->
......@@ -10,3 +10,9 @@
height: 100vh;
}
}
.right-menu{
position: absolute;
top: 100px;
right: 100px;
}
\ No newline at end of file
......@@ -24,46 +24,79 @@ export class MapComponent implements OnInit {
};
private unit : models.UnitModel;
private service : models.Service[];
private map;
private baseMap;
private marker;
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.code + "</b> <br>" + this.unit.name).openPopup();
//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 {
// https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
// this.tiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
// 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);
// });
}
ngOnInit(): void {
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, {
let osm = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",{
maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm,
})
let otm = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm,
});
let marker = L.marker(this.getCoor(this.unit.geom));
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, //unit.settings[0].value,
zoom: this.unit.getSetting(models.UnitSetting.SettingName.Zoom).value,
minZoom: 4,
maxZoom: 17,
worldCopyJump: true
worldCopyJump: true,
layers: [otm]
});
marker.bindPopup("<b>" + this.unit.code + "</b> <br>" + this.unit.name);
L.control.layers(this.baseMap).addTo(this.map);
this.tiles.addTo(this.map);
marker.addTo(this.map);
});
otm.addTo(this.map);
this.marker.addTo(this.map);
}
private getCoor(geom : string) : number[] {
......
......@@ -16,12 +16,13 @@ export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, public router: Router) { }
canActivate(): boolean{
if(!this.authService.loggedIn()) {
this.router.navigate(['auth']);
return false;
} else {
return true;
}
return true; // To debug
// if(!this.authService.loggedIn()) {
// this.router.navigate(['auth']);
// return false;
// } else {
// return true;
// }
}
async getToken() : Promise<string> {
......
<!--Component not yet done -->
<div class="right-container">
</div>
\ No newline at end of file
.right-container{
background: #fff;
display: inline-block;
width: 200px;
height: 150px;
z-index: 24;
}
\ No newline at end of file
......@@ -7,5 +7,4 @@ urlpatterns = [
path('services/', views.ServiceList.as_view()),
path('services/<int:pk>', views.ServiceDetail.as_view()),
path('services/search', views.ServiceSearch.as_view()),
]
\ No newline at end of file
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