Commit 12628318 authored by Thomas Frion's avatar Thomas Frion

[UPDF] Markers with custom icons

parent 5a361e42
......@@ -25,27 +25,54 @@ export class MapComponent implements OnInit {
};
private unit : models.UnitModel;
private map;
private baseMap;
private marker;
private gendarmeries;
private map; // The map it self
private baseMap; // Base layer of the map (OSM,OTM, IGN,...)
private gendarmeries; // Marker of all Gendarmerie units
private marker; // Maker of the user's unit
// Icons for markers
private pghmIcon;
private gendarmerieIcon;
constructor(
private auth : AuthGuard,
private serviceApi : ServiceApi,
private http : HttpClient
) {
this.unit = new models.UnitModel(
JSON.parse(localStorage.getItem(environment.localStorage.unit))
);
let coordinates = this.getCoor(this.unit.geom);
this.marker = L.marker(coordinates);
this.marker.bindPopup("<b>" + this.unit.name + "</b> (" + this.unit.code + ") <br>"+
)
{
this.pghmIcon = L.icon({
iconUrl: 'assets/img/pghm.png',
shadowUrl: '',
iconSize: [45, 45], // size of the icon
shadowSize: [0, 0], // size of the shadow
iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
shadowAnchor: [0, 0], // the same for the shadow
popupAnchor: [0, 0] // point from which the popup should open relative to the iconAnchor
});
this.gendarmerieIcon = L.icon({
iconUrl: 'assets/img/gendarmerie.png',
shadowUrl: '',
iconSize: [29, 50], // size of the icon
shadowSize: [0, 0], // size of the shadow
iconAnchor: [22, 22], // point of the icon which will correspond to marker's location
shadowAnchor: [0, 0], // the same for the shadow
popupAnchor: [-10, 0] // point from which the popup should open relative to the iconAnchor
});
this.unit = new models.UnitModel(
JSON.parse(localStorage.getItem(environment.localStorage.unit))
);
let coordinates = this.getCoor(this.unit.geom);
this.marker = L.marker(coordinates, {icon: this.pghmIcon});
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]));
this.getGendarmeries();
this.getGendarmeries();
}
ngOnInit(): void {
......@@ -70,6 +97,8 @@ export class MapComponent implements OnInit {
// })
// }
});
const gendLAyer = this.gendarmeries;
this.map = L.map('map', {
center: this.getCoor(this.unit.geom),
......@@ -80,6 +109,17 @@ export class MapComponent implements OnInit {
layers: [this.baseMap['OTM']]
});
this.map.on("zoomend", function(){
if(this.getZoom() >= 12){
if(!this.hasLayer(gendLAyer)){
this.addLayer(gendLAyer);
}
}else{
if(this.hasLayer(gendLAyer)){
this.removeLayer(gendLAyer);
}
}
});
L.control.layers(this.baseMap).addTo(this.map);
this.marker.addTo(this.map);
......@@ -107,19 +147,6 @@ export class MapComponent implements OnInit {
});
L.control.scale().addTo(this.map);
let gendLAyer = this.gendarmeries;
this.map.on("zoomend", function(){
if(this.getZoom() >= 12){
if(!this.hasLayer(gendLAyer)){
this.addLayer(gendLAyer);
}
}else{
if(this.hasLayer(gendLAyer)){
this.removeLayer(gendLAyer);
}
}
});
});
}
......@@ -166,7 +193,7 @@ export class MapComponent implements OnInit {
let csvRows = data.split("\n");
for(let i = 1; i < csvRows.length - 1; i++){
const row = csvRows[i].split(';').map(this.removeQuote);
let marker = L.marker([row[13], row[12]]);
let marker = L.marker([row[13], row[12]], {icon: this.gendarmerieIcon});
marker.bindPopup(
"<b>" + row[1] + "</b><br><br>" + row[3] + "<br>" + row[2]
);
......
GendLoc/src/assets/img/gendarmerie.png

21.7 KB | W: | H:

GendLoc/src/assets/img/gendarmerie.png

12.6 KB | W: | H:

GendLoc/src/assets/img/gendarmerie.png
GendLoc/src/assets/img/gendarmerie.png
GendLoc/src/assets/img/gendarmerie.png
GendLoc/src/assets/img/gendarmerie.png
  • 2-up
  • Swipe
  • Onion skin
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