add tree-popup
This commit is contained in:
parent
cb8d258e7e
commit
03f406dc7a
|
|
@ -1,5 +1,5 @@
|
|||
const TREES_MIN_ZOOM = 17;
|
||||
const TREE_LABELS_MIN_ZOOM = 20;
|
||||
const TREE_LABELS_MIN_ZOOM = 19;
|
||||
|
||||
var map = L.map('map', {
|
||||
maxZoom: 30,
|
||||
|
|
@ -55,7 +55,7 @@ function treeIcon(entry) {
|
|||
div.appendChild(label);
|
||||
function updateLabel() {
|
||||
label.style.visibility = map.getZoom() >= TREE_LABELS_MIN_ZOOM ? "visible" : "hidden";
|
||||
label.style.fontSize = (75 + 20 * (map.getZoom() - TREE_LABELS_MIN_ZOOM)) + "%";
|
||||
label.style.fontSize = (80 + 20 * (map.getZoom() - TREE_LABELS_MIN_ZOOM)) + "%";
|
||||
}
|
||||
updateLabel();
|
||||
|
||||
|
|
@ -80,37 +80,105 @@ map.on('zoom', function() {
|
|||
});
|
||||
|
||||
function treePopup(coords, entry) {
|
||||
var popup = L.popup()
|
||||
.setLatLng(coords);
|
||||
var popup = L.popup({
|
||||
minWidth: 600,
|
||||
maxWidth: window.innerWidth / 3,
|
||||
maxHeight: window.innerHeight * 0.7,
|
||||
}).setLatLng(coords);
|
||||
popup.on('add', function() {
|
||||
var info = {};
|
||||
function update(newInfo) {
|
||||
console.log("info +=", newInfo);
|
||||
Object.keys(newInfo).forEach(function(k) {
|
||||
info[k] = newInfo[k];
|
||||
});
|
||||
|
||||
popup.setContent(function() {
|
||||
var div = document.createElement("div");
|
||||
div.setAttribute("class", "tree-popup");
|
||||
var div1 = document.createElement("div");
|
||||
div.appendChild(div1);
|
||||
var h2 = document.createElement("h2");
|
||||
h2.textContent = entry.german;
|
||||
if (entry.age)
|
||||
h2.textContent += " (" + entry.age + ")";
|
||||
div.appendChild(h2);
|
||||
div1.appendChild(h2);
|
||||
var p = document.createElement("p");
|
||||
p.textContent = entry.botanic;
|
||||
div.appendChild(p);
|
||||
div1.appendChild(p);
|
||||
|
||||
if (info.area) {
|
||||
p = document.createElement("p");
|
||||
p.textContent = JSON.stringify(info.area);
|
||||
div.appendChild(p);
|
||||
function getArea(key) {
|
||||
var result = null;
|
||||
info.area.forEach(function(area) {
|
||||
if (!result && area[key]) result = area[key];
|
||||
});
|
||||
return result;
|
||||
}
|
||||
function addH3(text) {
|
||||
var h3 = document.createElement("h3");
|
||||
h3.textContent = text;
|
||||
div1.appendChild(h3);
|
||||
}
|
||||
function addP(text) {
|
||||
var p = document.createElement("p");
|
||||
p.textContent = text;
|
||||
div1.appendChild(p);
|
||||
}
|
||||
addH3("Bodenqualität");
|
||||
var schutt = getArea("schutt");
|
||||
if (schutt != null) {
|
||||
addP("Schutt: " + schutt);
|
||||
}
|
||||
var versiegelung = getArea("versiegelung");
|
||||
if (versiegelung != null) {
|
||||
addP("Versiegelung: " + versiegelung);
|
||||
}
|
||||
var gebietstyp = getArea("gebietstyp");
|
||||
if (gebietstyp != null) {
|
||||
addP("Gebietstyp: " + gebietstyp);
|
||||
}
|
||||
var natuerliche_bodenfunktion = getArea("natuerliche_bodenfunktion");
|
||||
if (natuerliche_bodenfunktion != null) {
|
||||
addP("Natürliche Bodenfunktion: " + natuerliche_bodenfunktion);
|
||||
}
|
||||
}
|
||||
if (info.tree) {
|
||||
p = document.createElement("p");
|
||||
p.style.maxHeight = "10em";
|
||||
p.style.overflow = "scroll";
|
||||
p.textContent = JSON.stringify(info.tree);
|
||||
div.appendChild(p);
|
||||
if (info.tree && info.tree.details) {
|
||||
var details = info.tree.details;
|
||||
var div2 = document.createElement("div");
|
||||
function addH(level, text) {
|
||||
var h = document.createElement("h" + level);
|
||||
h.textContent = text;
|
||||
div2.appendChild(h);
|
||||
}
|
||||
function addP(text) {
|
||||
var p = document.createElement("p");
|
||||
p.textContent = text;
|
||||
div2.appendChild(p);
|
||||
}
|
||||
div.appendChild(div2);
|
||||
|
||||
addH(2, details["Latin name"]);
|
||||
if (details.Wildlife == "1") {
|
||||
addP("Geliebt von der Fauna.");
|
||||
}
|
||||
addH(3, "Boden");
|
||||
if (details.Acid == "1") {
|
||||
addP("Sauer");
|
||||
}
|
||||
if (details.Alkaline == "1") {
|
||||
addP("Alkalisch");
|
||||
}
|
||||
if (details.Soil) {
|
||||
addP("Boden: " + details.Soil);
|
||||
}
|
||||
addH(3, "Wachstum");
|
||||
if (details["Growth rate"]) {
|
||||
addP("Wachstumsrate: " + details["Growth rate"]);
|
||||
}
|
||||
if (details.Height) {
|
||||
addP("Höhe: " + details.Height);
|
||||
}
|
||||
}
|
||||
|
||||
return div;
|
||||
|
|
@ -126,7 +194,6 @@ function treePopup(coords, entry) {
|
|||
fetch(["", "tree", entry.id].join("/"))
|
||||
.then(res => res.json())
|
||||
.then(data => {
|
||||
console.log("tree data", data);
|
||||
update({ tree: data });
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -8,7 +8,6 @@
|
|||
<style>
|
||||
#map { margin: 0; padding: 0; width: 100vw; height: 100vh; }
|
||||
body { margin: 0; padding: 0; font-family: sans-serif; }
|
||||
|
||||
.leaflet-div-icon {
|
||||
background: none;
|
||||
border: none;
|
||||
|
|
@ -28,6 +27,33 @@
|
|||
color: black;
|
||||
text-shadow: -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white, 1px 1px 0px white;
|
||||
}
|
||||
|
||||
.tree-popup {
|
||||
display: flex;
|
||||
flex-flow: row;
|
||||
align-items: stretch;
|
||||
justify-content: center;
|
||||
}
|
||||
.tree-popup p {
|
||||
line-height: 1.2em;
|
||||
}
|
||||
.tree-popup > div {
|
||||
flex: 0 1 50%;
|
||||
}
|
||||
.tree-popup > div:nth-child(1) {
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.tree-popup p {
|
||||
margin: 0.2rem 0rem;
|
||||
}
|
||||
.tree-popup h2 {
|
||||
margin: 1rem 0 0.5rem;
|
||||
}
|
||||
.tree-popup h3 {
|
||||
margin: 0.5rem 0 0.2rem;
|
||||
padding: 0;
|
||||
border-bottom: 1px solid #aaa;
|
||||
}
|
||||
</style>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
||||
</head>
|
||||
|
|
|
|||
Loading…
Reference in New Issue