Hallo OSM-Gemeinde,
ich möchte auf meiner Homepage die OSM einbinden. (ist nicht das Problem)
Nun möchte ich aber, dass der User auf der Map eine Fläche “zeichnen” kann und die Fläche errechnet und ausgegeben wird.
Am lieben per PHP.
Hat jemand Ansätze für mich? Also unter was ich genauer suchen muss? DANKE
Hi - und erst mal herzlich willkommen im Forum.
Frage: Womit erstellst du deine Anwendung? OpenLayers oder Leaflet? Oder gar was ganz anderes?
Gruss
walter
Ok. Aus der Frage lese ich heraus das es nicht auf einer “normalen” Website geht.
Ich habe mit keinem von beiden bisher Berührungspunkte gehabt. Habe aber kein Problem mich einzulesen.
Für mich wäre halt eine der wichtigsten Funktion die Flächenberechnung. Daher habt ihr vielleicht Tipps.
Irgendwie verstehe ich deine beiden Aussagen nicht: a) “ist nicht das Problem” und b) “Habe aber kein Problem mich einzulesen.”
Mach das in Leaflet - ist einfacher.
Erstelle ZUERST eine Seite, in der der von dir gewünschte Kartenteil dargestellt wird. DANACH kannst du dir die Edit-Funktionen von Leaflet ansehen. Damit geht das.
Gruss
walter
ps: wenn du beides zugleich versuchen solltest, sehe ich für dich keine Chance das hinzukriegen.
+1
Du wirst das Ganze in Javascript programmieren müssen - Malen auf einer Karte funktioniert per Definition nicht mit serverseitigem PHP.
Wenn Du es geschafft hast, die Karte mit Leaflet auf Deiner Seite darzustellen, ist es relativ leicht das Zeichnen und Fläche berechnen einzubauen. Lealflet hat eine Menge guter Beispiele.
Viel Erfolg.
Alles klar. Vielen Dank! :)
Konkret leaflet.draw, Doku siehe hier: https://leaflet.github.io/Leaflet.draw/docs/leaflet-draw-latest.html .
So, ich habe mich nun mit Leaflet beschäftigt und ein 1. Ergebnis produziert.
Nun habe ich eine Karte und kann Polygene zeichnen oder Rechtecke. Alles super.
Eine Adresseingabe habe ich auch gefunden … funzt aber leider nicht. 
Nun stehe ich vor folgenden Fragen (bin mit JavaScript nicht unbedingt gut befreundet 
)
1.) Wie kann ich die Fläche des gezeichneten Polygons berechnen?
2.) Was habe ich bei der Adresseingabe falsch gemacht?
Ich danke für Eure Unterstützung.
Funktioniert hier. Edit: nicht. Klick auf die Ergebnisse springt nicht um
Ich habe weiter getüftelt. (https://mn-bergen.de/data/geo/osm.php)
Nun erhalte ich bei der Adressuche Ergebnisse. Aber beim anklicken werden sie nicht angezeigt in der Karte. Obwohl ich der Meinung bin, dass ich diese in die Karte lade.
Ergänzung:
Adressuche inkl. Darstellung in der MAP klappt.
Dafür bekomme ich jetzt die POLYGON Zeichnung nicht eingeblendet.
Kann mal jemand bitte einen Blick in das JS (erreichbar über den Quelltext) ansehen und mir sagen wie ich (das aktuell als Kommentar gekennzeichnete) Zeichnungstool wieder integriere??
DANKE
Ergänze das hier:
...
map.on('draw:created', function(e) {
if(e.layerType === 'polygon') {
var area = L.GeometryUtil.geodesicArea(e.layer.getLatLngs());
console.log(area);
}
...
Also du hast ja das “map.on(‘draw:created’, …” bereits, dort halt ergänzen. In “area” hast du dann als Dezimalwert die Fläche in qm.
Des weiteren würde ich empfehlen im HTML dein Suchformular so zu schreiben:
<form id="search">
<input type="text" name="addr" value="" id="addr" size="10" />
<input type="submit" value="Suchen">
<div id="results"/>
</form>
<script src="map.js"></script>
Dann ist es wirklich ein Formular und somit funktioniert im Eingabefeld auch das Enter-Drücken.
Das JS musst du dann anpassen. Statt das im HTML drin steht, was “onclick” passieren soll (Enter-Drücken ist ja kein Click ;-), wird das jetzt im JS angegben, das entsprechende Funktion beim Formular-Absenden (egal wie das passiert) eben reagiert:
// Funktion ADRESSE suchen
$(document).ready(function() {
$('#search').submit(function(e) {
e.preventDefault();
var inp = document.getElementById("addr");
$.getJSON('https://nominatim.openstreetmap.org/search?format=json&limit=5&q=' + inp.value, function(data) {
var items = [];
$.each(data, function(key, val) {
bb = val.boundingbox;
items.push("<li><a href='#' onclick='chooseAddr(" + bb[0] + ", " + bb[2] + ", " + bb[1] + ", " + bb[3] + ", \"" + val.osm_type + "\");return false;'>" + val.display_name + '</a></li>');
});
$('#results').empty();
if(items.length != 0) {
$('<p>', { html: "Gefundene Adressen:" }).appendTo('#results');
$('<ul/>', { 'class': 'my-new-list', html: items.join('') }).appendTo('#results');
} else {
$('<p>', { html: "Es konnte keine Adresse gefunden werden." }).appendTo('#results');
}
});
});
});
Das “$(document).ready(function() {” sorgt dafür, dass der Teil darin erst ausgeführt wird, wenn der Browser auch das ganze HTML-Dokument geladen hat.
Und dann “$(‘#search’).submit(function(e) {” sorgt eben für das Hören auf den Absende-Event.
Das “e.preventDefault();” sorgt dafür, dass die Seite nicht neuläd, weil das normalerweise bei einem HTML-Formular passiert (Eingaben werden halt normalerweise z.B. an eine PHP-Seite geschickt, aber hier macht es ja alles das JS selbst).
Edit, achja und vergiss im CSS nicht aus “div#search {” einfach nur “#search {” zu machen, denn das div wurde ja zu einem form 
Hallo, vielen Dank für deine Tipps. Es haben auch alle geklappt … bis auf diesen.
Habe die Ergänzung an mehreren Stellen versucht … ohne Erfolg. Habe im HTML-Teil die Ausgabe der Variable “area” versucht. Es kommt nichts raus. JavaScript und ich sind leider keine Freunde.
An welcher Stelle genau muss ich deinen Vorschlag anbringen? Ich danke Dir!
Vielleicht hast Du generell noch einen Tipp für mich an welche/n Stellen ich etwas hinzufüge um “Buttons” auf der Karte hinzuzufügen?
Ich nochmal. Habe jetzt verschiedene Ansichten hinzugefügt.
Nun fehlt mir nur noch die o.g. Berechnung der Fläche aus den gezeichneten Polygonen … den vorgeschlagenen Code habe ich wie gesagt schon an diversen Stellen eingesetzt … aber entweder bleibt der Bildschirm weiß … oder es passiert nichts.
Wo genau muss ich diesen einbinden?
Schau Dir Deine Seite mal in der Konsole deines Browsers an (bei FireFox mit F12 einblenden). Da taucht bei mir ein
Uncaught ReferenceError: area is not defined
<anonymous> https://mn-bergen.de/data/geo/osm.php:33
osm.php:33:5
<anonym> https://mn-bergen.de/data/geo/osm.php:33
auf.
Wenn ich dann eine Fläche zeichne kommt noch die Fehlermeldung (Gekürzt)
Uncaught ReferenceError: leafletPip is not defined
...
map.js:61:15
Achso ja, ich hatte es halt in die Konsole ausgegeben mit der Zeile:
console.log(area);
Du musst den Wert aus “area” dann natürlich ins HTML setzen.
Habe deine Seite mal kopiert und hier korrigiert:
http://a404.de/dnd/osm/2020-10-12_area/
Gleich auch noch paar weitere Punkte gefixt, wie dass auch halt bei Editierung die Fläche berechnet wird. Da das ganze jetzt hier aber immer weniger mit OSM zu tun hat, bin ich hier demnächst raus. Ich empfehle dir da eher entsprechende Webentwickler-/JavaScript-Forum aufzusuchen dann.
Gruß,
asca
Liebe/r the-asca,
vielen Dank für deine Unterstützung. So habe ich mir das gedacht. :):):):):):):) SUPER
Ich bin echt dankbar.