Commit d8596fde authored by Adrien Pavie's avatar Adrien Pavie

Icon size changes according to zoom level (closes #3)

parent 56988aeb
......@@ -52,33 +52,42 @@ class Main {
retainZoomLevel: false
}).addTo(this.map);
//Zoom data
this.lastZoom = this.map.getZoom();
this.zoomIconSize = { 15: "small", 16: "small", 17: "medium", 18: "medium", 19: "large" };
//Available icons
let adIconSize = [32,32];
let adIconShadowSize = [50,25];
let adIconAnchor = [16,32];
let adIconShadowAnchor = [13,23];
let adIconPopupAnchor = [0,-16];
let adIcons = {
unknown: L.icon({
iconUrl: 'img/unknown.png',
iconSize: adIconSize,
iconAnchor: adIconAnchor,
popupAnchor: adIconPopupAnchor
})
let adIcons = {};
/*
* Utility function for creating icons with various sizes
*/
let createIcon = function(name, ratio) {
let applyRatio = (x) => { return x * ratio; };
return L.icon({
iconUrl: 'img/'+name+'.png',
iconSize: adIconSize.map(applyRatio),
iconAnchor: adIconAnchor.map(applyRatio),
shadowUrl: (name != "unknown") ? 'img/'+name+'_shadow.png' : undefined,
shadowSize: (name != "unknown") ? adIconShadowSize.map(applyRatio) : undefined,
shadowAnchor: (name != "unknown") ? adIconShadowAnchor.map(applyRatio) : undefined,
popupAnchor: adIconPopupAnchor.map(applyRatio)
});
};
let adIconsList = [ "billboard", "board", "column", "flag", "poster_box", "screen", "sign", "totem" ];
let adIconsList = [ "unknown", "billboard", "board", "column", "flag", "poster_box", "screen", "sign", "totem" ];
for(let i=0; i < adIconsList.length; i++) {
let adIcon = adIconsList[i];
adIcons[adIcon] = L.icon({
iconUrl: 'img/'+adIcon+'.png',
iconSize: adIconSize,
iconAnchor: adIconAnchor,
shadowUrl: 'img/'+adIcon+'_shadow.png',
shadowSize: adIconShadowSize,
shadowAnchor: adIconShadowAnchor,
popupAnchor: adIconPopupAnchor
});
adIcons[adIcon] = {
small: createIcon(adIcon, 0.75),
medium: createIcon(adIcon, 1),
large: createIcon(adIcon, 1.25)
};
}
/*
......@@ -156,10 +165,16 @@ class Main {
/*
* Overpass layer
*/
let that = this;
this.mapData = new L.OverPassLayer({
query: "(node({{bbox}})[advertising];way({{bbox}})[advertising]);out qt center;",
onSuccess: function(data) {
let adValsIgnored = [ "no" ];
this._markersLayers = {
small: L.layerGroup(),
medium: L.layerGroup(),
large: L.layerGroup()
};
for(let i = 0; i < data.elements.length; i++) {
let e = data.elements[i];
......@@ -168,17 +183,11 @@ class Main {
// console.log(e);
// }
if(this._ids[e.id] || !e.tags.advertising || adValsIgnored.indexOf(e.tags.advertising) >= 0) { continue; }
if(this._ids[e.type+e.id] || !e.tags.advertising || adValsIgnored.indexOf(e.tags.advertising) >= 0) { continue; }
this._ids[e.id] = true;
this._ids[e.type+e.id] = true;
let advertisingVal = (adIcons[e.tags.advertising]) ? e.tags.advertising : "unknown";
let marker = L.marker(
(e.type === 'node') ? L.latLng(e.lat, e.lon) : L.latLng(e.center.lat, e.center.lon),
{
icon: (adIcons[e.tags.advertising]) ? adIcons[e.tags.advertising] : adIcons.unknown
}
);
//Create popup content
let popupContent = document.createElement("div"); //this._getPoiPopupHTML(e.tags, e.id);
let title = document.createElement("h3");
......@@ -218,15 +227,53 @@ class Main {
//Define popup itself
let popupOptions = (infoTableAdded) ? { minWidth: 250 } : {};
let popup = L.popup(popupOptions).setContent(popupContent);
marker.bindPopup(popup);
this._map.addLayer(marker);
//Create markers for each size
let coords = (e.type === 'node') ? L.latLng(e.lat, e.lon) : L.latLng(e.center.lat, e.center.lon);
this._markersLayers.small.addLayer(L.marker(coords, { icon: adIcons[advertisingVal].small }).bindPopup(popup));
this._markersLayers.medium.addLayer(L.marker(coords, { icon: adIcons[advertisingVal].medium }).bindPopup(popup));
this._markersLayers.large.addLayer(L.marker(coords, { icon: adIcons[advertisingVal].large }).bindPopup(popup));
}
//Show layer group with correct icon size
this._map.addLayer(this._markersLayers[that.zoomIconSize[that.lastZoom]]);
},
minZoomIndicatorOptions: {
minZoomMessage: "Zoom in to see data"
}
}).addTo(this.map);
//Handle zoom change for icon resizing
this.map.on("zoomend", () => {
let currentZoom = this.map.getZoom();
if(this.mapData._markersLayers) {
//Remove previous layer if any
if(
this.lastZoom >= 15
&& this.zoomIconSize[this.lastZoom] != undefined
&& this.mapData._markersLayers[this.zoomIconSize[this.lastZoom]]
&& this.map.hasLayer(this.mapData._markersLayers[this.zoomIconSize[this.lastZoom]])
&& (currentZoom < 15 || this.zoomIconSize[currentZoom] != this.zoomIconSize[this.lastZoom])
) {
this.map.removeLayer(this.mapData._markersLayers[this.zoomIconSize[this.lastZoom]]);
}
//Add layer if needed
if(
this.zoomIconSize[currentZoom] !== undefined
&& (
(this.zoomIconSize[this.lastZoom] !== undefined && this.zoomIconSize[currentZoom] != this.zoomIconSize[this.lastZoom])
|| this.lastZoom < 15
)
&& this.mapData._markersLayers[this.zoomIconSize[currentZoom]]
) {
this.map.addLayer(this.mapData._markersLayers[this.zoomIconSize[currentZoom]]);
}
}
this.lastZoom = currentZoom;
});
}
}
......
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