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 @@ ...@@ -3,6 +3,6 @@
<app-map></app-map> <app-map></app-map>
</div> </div>
<!-- NOT DONE YET: <!-- NOT DONE YET:
<app-sidebar-right></app-sidebar-right> <app-sidebar-right class='right-menu'></app-sidebar-right> #}
<app-coord-map></app-coord-map> <app-coord-map></app-coord-map>
--> -->
...@@ -10,3 +10,9 @@ ...@@ -10,3 +10,9 @@
height: 100vh; 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 { ...@@ -24,46 +24,79 @@ export class MapComponent implements OnInit {
}; };
private unit : models.UnitModel; private unit : models.UnitModel;
private service : models.Service[];
private map; private map;
private baseMap;
private marker;
private tiles; private tiles;
constructor(private auth : AuthGuard, private serviceApi : ServiceApi) { constructor(private auth : AuthGuard, private serviceApi : ServiceApi) {
this.unit = new models.UnitModel( this.unit = new models.UnitModel(
JSON.parse(localStorage.getItem(environment.localStorage.unit)) 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 //https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
// this.tiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', { this.tiles = L.tileLayer('https://{s}.tile.opentopomap.org/{z}/{x}/{y}.png', {
// maxZoom: 19, maxZoom: 19,
// attribution: this.attributions.osm + ' | ' + this.attributions.otm, attribution: this.attributions.osm + ' | ' + this.attributions.otm,
// }); });
} }
ngOnInit(): void { ngOnInit(): void {
this.serviceApi.all().then((res) => { // this.serviceApi.all().then((res) => {
let url : string; // let url : string;
url = res[0].baseUrl.replace('{key}', res[0].key) + "?layer=" + res[0].serviceSettings[2].value + res[0].serviceSettings[0].value; // 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, { // this.tiles = L.tileLayer(url, {
maxZoom: 19, // maxZoom: 19,
attribution: this.attributions.osm + ' | ' + this.attributions.otm, // attribution: this.attributions.osm + ' | ' + this.attributions.otm,
}); // });
let marker = L.marker(this.getCoor(this.unit.geom)); // let marker = L.marker(this.getCoor(this.unit.geom));
this.map = L.map('map', { // this.map = L.map('map', {
center: this.getCoor(this.unit.geom), // 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, //unit.settings[0].value,
minZoom: 4, // minZoom: 4,
maxZoom: 17, // maxZoom: 17,
worldCopyJump: true // worldCopyJump: true
}); // });
marker.bindPopup("<b>" + this.unit.code + "</b> <br>" + this.unit.name); // 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,
})
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.tiles.addTo(this.map); this.map = L.map('map', {
marker.addTo(this.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);
} }
private getCoor(geom : string) : number[] { private getCoor(geom : string) : number[] {
......
...@@ -16,12 +16,13 @@ export class AuthGuard implements CanActivate { ...@@ -16,12 +16,13 @@ export class AuthGuard implements CanActivate {
constructor(private authService: AuthService, public router: Router) { } constructor(private authService: AuthService, public router: Router) { }
canActivate(): boolean{ canActivate(): boolean{
if(!this.authService.loggedIn()) { return true; // To debug
this.router.navigate(['auth']); // if(!this.authService.loggedIn()) {
return false; // this.router.navigate(['auth']);
} else { // return false;
return true; // } else {
} // return true;
// }
} }
async getToken() : Promise<string> { 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 = [ ...@@ -7,5 +7,4 @@ urlpatterns = [
path('services/', views.ServiceList.as_view()), path('services/', views.ServiceList.as_view()),
path('services/<int:pk>', views.ServiceDetail.as_view()), path('services/<int:pk>', views.ServiceDetail.as_view()),
path('services/search', views.ServiceSearch.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