Commit ea294765 authored by Adrien Pavie's avatar Adrien Pavie

Popup content changed, support & direction tags illustrated

parent affd0829
......@@ -71,3 +71,12 @@ header span.catch {
right: 0;
bottom: 0;
}
#openadvertmap .leaflet-popup-content h3 {
margin-bottom: 0;
}
.leaflet-popup-content p.oam-feature-details {
text-align: center;
margin-top: 5px;
}
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m17.422 1020.4c-4.0768-0.3638-8.2922 0.8222-11.677 3.6473-6.7705 5.6501-7.6893 15.746-2.0489 22.525 5.6404 6.7791 15.727 7.7119 22.517 2.0847a0.86145 0.86418 0 0 0 0.03119 -0.027 0.86145 0.86418 0 0 0 0.0059 0 0.86145 0.86418 0 0 0 0.04678 -0.037c6.7515-5.6727 7.6361-15.771 1.9729-22.531-2.8316-3.3801-6.7702-5.2939-10.847-5.6577zm-0.15206 1.7112c3.6358 0.3244 7.147 2.0366 9.6792 5.0593 5.0645 6.0455 4.2785 15.02-1.7604 20.094a0.86145 0.86418 0 0 0 -0.02534 0.023 0.86145 0.86418 0 0 0 -0.0039 0 0.86145 0.86418 0 0 0 -0.04289 0.033c-6.0729 5.0334-15.053 4.2007-20.097-1.8618-5.0441-6.0625-4.2293-15.033 1.8267-20.087 3.028-2.5268 6.7881-3.5903 10.424-3.2659z" fill="#808080"/>
<path d="m13 1036.4h6l-3-12z" fill-rule="evenodd" fill="#808080"/>
<path d="m19 1036.4h-6l3 12z" fill-rule="evenodd" fill="#ccc"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m6.334 2l-5 5h-1.334v2h14.5v5h-4.5v12h12v-12h-4.5v-5h14.5v-2h-5.334l4.334-4.334-0.666-0.666-5 5h-4.668l4.334-4.334-0.666-0.666-5 5h-4.668l4.334-4.334-0.666-0.666-5 5h-4.668l4.334-4.334-0.666-0.666-5 5h-4.668l4.334-4.334-0.666-0.666z" fill-rule="evenodd" transform="translate(0 1020.4)" fill="#808080"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m3.5 0v30h-3.5v2h32v-2h-16.5v-12h4v3.5h9v-9h-9v3.5h-4v-16h-12zm2 1h1v28h-1v-28zm3.5 0h1v28h-1v-28zm3.5 0h1v28h-1v-28z" fill-rule="evenodd" transform="translate(0 1020.4)" fill="#808080"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)" fill="#808080">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m0 1050.4v-2h32v2h-32z" fill-rule="evenodd"/>
<rect transform="scale(1,-1)" height="12" width="12" y="-1047.4" x="10"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m10 2v12h4.5v14h-14.5v2h32v-2h-14.5v-14h4.5v-12h-12z" fill-rule="evenodd" transform="translate(0 1020.4)" fill="#808080"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)" fill="#808080">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m0 1052.4v-2h32v2h-32z" fill-rule="evenodd"/>
<path d="m8 1.5v28h16v-28h-16zm2 2h12v18h-12v-18z" transform="translate(0 1020.4)"/>
</g>
</svg>
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns="http://www.w3.org/2000/svg" height="32" width="32" version="1.1" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" viewBox="0 0 32 32.000001">
<g transform="translate(0 -1020.4)">
<path style="color-rendering:auto;text-decoration-color:#000000;color:#000000;isolation:auto;mix-blend-mode:normal;shape-rendering:auto;solid-color:#000000;block-progression:tb;text-decoration-line:none;text-decoration-style:solid;image-rendering:auto;white-space:normal;text-indent:0;text-transform:none" d="m9 0v1.334l-5 5 0.666 0.666 4.334-4.334v4.668l-5 5 0.666 0.666 4.334-4.334v4.668l-5 5 0.666 0.666 4.334-4.334v4.668l-5 5 0.666 0.666 4.334-4.334v4.668l-5 5 0.666 0.666 4.334-4.334v5.334h2v-14.5h5v4.5h12v-12h-12v4.5h-5v-14.5h-2z" fill-rule="evenodd" transform="translate(0 1020.4)" fill="#808080"/>
</g>
</svg>
......@@ -21,6 +21,10 @@ require("leaflet-geosearch");
require("leaflet-geosearch/src/js/l.geosearch.provider.openstreetmap");
require("../../../node_modules/leaflet-overpass-layer/dist/OverPassLayer.bundle.js");
String.prototype.capitalizeFirstLetter = function() {
return this.charAt(0).toUpperCase() + this.slice(1);
};
/**
* Main controller manages everything related to main page.
*/
......@@ -77,11 +81,50 @@ class Main {
});
}
/*
* Utility functions for popup content creation
*/
let tagToImg = function(key, value, validValues, parentNode) {
if(value !== undefined && validValues.indexOf(value) >= 0) {
let img = document.createElement("img");
img.src = "img/"+key+"_"+value+".png";
img.title = key+" = "+value;
parentNode.appendChild(img);
}
};
let directionTagToImg = function(value, parentNode) {
if(value !== undefined) {
let directions = {
"N": 0, "north": 0, "NNE": 22, "NE": 45, "ENE": 67, "E": 90, "east": 90, "ESE": 112, "SE": 135, "SSE": 157, "S": 180, "south": 180,
"SSW": 202, "SW": 225, "WSW": 247, "W": 270, "west": 270, "WNW": 292, "NW": 315, "NNW": 337
};
//Check if value is valid
if(!isNaN(parseInt(value)) || directions[value] !== undefined) {
let valInt = parseInt(value);
//Convert text value into int
if(isNaN(valInt)) {
valInt = directions[value];
}
if(valInt !== undefined && valInt >= 0 && valInt < 360) {
let compass = document.createElement("img");
compass.src = "img/compass.png";
compass.title = "direction = "+value;
compass.style.transform = "rotate("+valInt+"deg)";
parentNode.appendChild(compass);
}
}
}
};
/*
* Overpass layer
*/
this.mapData = new L.OverPassLayer({
query: "(node({{bbox}})[advertising]);out qt;",
query: "(node({{bbox}})[advertising];way({{bbox}})[advertising]);out qt center;",
onSuccess: function(data) {
let adValsIgnored = [ "no" ];
......@@ -100,7 +143,25 @@ class Main {
}
);
let popupContent = this._getPoiPopupHTML(e.tags, e.id);
//Create popup content
let popupContent = document.createElement("div"); //this._getPoiPopupHTML(e.tags, e.id);
let title = document.createElement("h3");
title.appendChild(document.createTextNode(e.tags.advertising.replace("_", " ").capitalizeFirstLetter()));
popupContent.appendChild(title);
let details = document.createElement("p");
details.className = "oam-feature-details";
tagToImg("support", e.tags.support, ["ceiling", "column", "ground", "pole", "poster_box", "wall_mounted"], details);
directionTagToImg(e.tags.direction, details);
details.appendChild(document.createElement("br"));
let link = document.createElement('a');
link.href = 'http://www.openstreetmap.org/edit?editor=id&node=' + e.id;
link.appendChild(document.createTextNode('Edit this entry in iD'));
details.appendChild(link);
popupContent.appendChild(details);
//Define popup itself
let popup = L.popup().setContent(popupContent);
marker.bindPopup(popup);
......
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