API / Fläche berechnen / auf OSM Karte einzeichnen??

sveka wrote:

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.

sveka wrote:

ich möchte auf meiner Homepage die OSM einbinden. (ist nicht das Problem)

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.

Irgendwie verstehe ich deine beiden Aussagen nicht: a) "ist nicht das Problem" und b) "Habe aber kein Problem mich einzulesen."

Für mich wäre halt eine der wichtigsten Funktion die Flächenberechnung. Daher habt ihr vielleicht Tipps.

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.

wambacher wrote:

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.

+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/ … atest.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.

sveka wrote:

Eine Adresseingabe habe ich auch gefunden ... funzt aber leider nicht. :(

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.

the-asca wrote:

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.

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

sveka wrote:

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?

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.