add tree-popup
This commit is contained in:
parent
cb8d258e7e
commit
03f406dc7a
|
@ -1,5 +1,5 @@
|
||||||
const TREES_MIN_ZOOM = 17;
|
const TREES_MIN_ZOOM = 17;
|
||||||
const TREE_LABELS_MIN_ZOOM = 20;
|
const TREE_LABELS_MIN_ZOOM = 19;
|
||||||
|
|
||||||
var map = L.map('map', {
|
var map = L.map('map', {
|
||||||
maxZoom: 30,
|
maxZoom: 30,
|
||||||
|
@ -55,7 +55,7 @@ function treeIcon(entry) {
|
||||||
div.appendChild(label);
|
div.appendChild(label);
|
||||||
function updateLabel() {
|
function updateLabel() {
|
||||||
label.style.visibility = map.getZoom() >= TREE_LABELS_MIN_ZOOM ? "visible" : "hidden";
|
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();
|
updateLabel();
|
||||||
|
|
||||||
|
@ -80,37 +80,105 @@ map.on('zoom', function() {
|
||||||
});
|
});
|
||||||
|
|
||||||
function treePopup(coords, entry) {
|
function treePopup(coords, entry) {
|
||||||
var popup = L.popup()
|
var popup = L.popup({
|
||||||
.setLatLng(coords);
|
minWidth: 600,
|
||||||
|
maxWidth: window.innerWidth / 3,
|
||||||
|
maxHeight: window.innerHeight * 0.7,
|
||||||
|
}).setLatLng(coords);
|
||||||
popup.on('add', function() {
|
popup.on('add', function() {
|
||||||
var info = {};
|
var info = {};
|
||||||
function update(newInfo) {
|
function update(newInfo) {
|
||||||
|
console.log("info +=", newInfo);
|
||||||
Object.keys(newInfo).forEach(function(k) {
|
Object.keys(newInfo).forEach(function(k) {
|
||||||
info[k] = newInfo[k];
|
info[k] = newInfo[k];
|
||||||
});
|
});
|
||||||
|
|
||||||
popup.setContent(function() {
|
popup.setContent(function() {
|
||||||
var div = document.createElement("div");
|
var div = document.createElement("div");
|
||||||
|
div.setAttribute("class", "tree-popup");
|
||||||
|
var div1 = document.createElement("div");
|
||||||
|
div.appendChild(div1);
|
||||||
var h2 = document.createElement("h2");
|
var h2 = document.createElement("h2");
|
||||||
h2.textContent = entry.german;
|
h2.textContent = entry.german;
|
||||||
if (entry.age)
|
if (entry.age)
|
||||||
h2.textContent += " (" + entry.age + ")";
|
h2.textContent += " (" + entry.age + ")";
|
||||||
div.appendChild(h2);
|
div1.appendChild(h2);
|
||||||
var p = document.createElement("p");
|
var p = document.createElement("p");
|
||||||
p.textContent = entry.botanic;
|
p.textContent = entry.botanic;
|
||||||
div.appendChild(p);
|
div1.appendChild(p);
|
||||||
|
|
||||||
if (info.area) {
|
if (info.area) {
|
||||||
p = document.createElement("p");
|
function getArea(key) {
|
||||||
p.textContent = JSON.stringify(info.area);
|
var result = null;
|
||||||
div.appendChild(p);
|
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) {
|
if (info.tree && info.tree.details) {
|
||||||
p = document.createElement("p");
|
var details = info.tree.details;
|
||||||
p.style.maxHeight = "10em";
|
var div2 = document.createElement("div");
|
||||||
p.style.overflow = "scroll";
|
function addH(level, text) {
|
||||||
p.textContent = JSON.stringify(info.tree);
|
var h = document.createElement("h" + level);
|
||||||
div.appendChild(p);
|
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;
|
return div;
|
||||||
|
@ -126,7 +194,6 @@ function treePopup(coords, entry) {
|
||||||
fetch(["", "tree", entry.id].join("/"))
|
fetch(["", "tree", entry.id].join("/"))
|
||||||
.then(res => res.json())
|
.then(res => res.json())
|
||||||
.then(data => {
|
.then(data => {
|
||||||
console.log("tree data", data);
|
|
||||||
update({ tree: data });
|
update({ tree: data });
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|
|
@ -8,7 +8,6 @@
|
||||||
<style>
|
<style>
|
||||||
#map { margin: 0; padding: 0; width: 100vw; height: 100vh; }
|
#map { margin: 0; padding: 0; width: 100vw; height: 100vh; }
|
||||||
body { margin: 0; padding: 0; font-family: sans-serif; }
|
body { margin: 0; padding: 0; font-family: sans-serif; }
|
||||||
|
|
||||||
.leaflet-div-icon {
|
.leaflet-div-icon {
|
||||||
background: none;
|
background: none;
|
||||||
border: none;
|
border: none;
|
||||||
|
@ -28,6 +27,33 @@
|
||||||
color: black;
|
color: black;
|
||||||
text-shadow: -1px -1px 0px white, 1px -1px 0px white, -1px 1px 0px white, 1px 1px 0px white;
|
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>
|
</style>
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
|
||||||
</head>
|
</head>
|
||||||
|
|
Loading…
Reference in New Issue