Leaflet JavaScript Seiteninhalte in MarkerPopup einbinden

00elNino · 04. Okt. 2014

Hallo

Ich bin gerade dabei mit hilfe von Leaflet Bibliotheken ( Leaflet - a JavaScript library for mobile-friendly maps ) eine WebGIS applikation zu programmieren. Ich habe dort einen Marker an der aktuellen Position des benutzer gesetzt. Der Marker ist mit einem Popup verbunden in dem die Genauigkeit der Position, die koordinaten und Adresse stehen sollen. Das mit der Adresse bekomme ich aber leider nicht hin.

Ich wollte zum ermitteln der Adresse die Reverse Geocoding API von Nominatim benutzen ( Nominatim - OpenStreetMap Wiki ) . Nominatim liefert XML oder geoJason als Ergebnis. Wie z.B. hier
http://nominatim.openstreetmap.org/reverse?format=json&lat=52.52001&lon=13.40495&addressdetails=1%22

Ich möchte diese Informationen (Straße, Hausnummer ect.) nun als Text in das Popup einbinden. Zur Zeit habe ich nur den Link zum Ergebnis eingebunden (siehe Anhang). Schöner wäre aber wenn die Strße und so direkt im Popup fenster stehen.

Kann mir dajemand von euch helfen?

Hier der code des Markers:

HTML:

function onLocationFound(e) {
	var radius = e.accuracy / 2;
            
		L.marker(e.latlng, {
                clickable: true,
                draggable: false,
				opacity: 0.9,
				title: 'Click for more Information',
                icon: L.icon({
                    iconUrl: 'leaflet/images/kreuz.gif',
                    iconAnchor: [32, 32],
                    popupAnchor: [0, -32]
                })
            })
		.addTo(map)
		.bindPopup("<b>You are here</b><br>Accuracy: "+ radius +"m<br> LatLong: "+  e.latlng.toString().slice(7,25)+' <br> <a href=http://nominatim.openstreetmap.org/reverse?format=json&lat='+e.latlng.toString().slice(7,15)+'&lon='+e.latlng.toString().slice(17,25)+'&addressdetails=1">Address</a>') 
}

kkapsner · 04. Okt. 2014

Da das Teil CORS-Header mitsendet, kann du die Informationen über AJAX abrufen und dann anzeigen.

00elNino · 04. Okt. 2014

Danke für die schnelle Antwort. Ich bin leider ein Javascript Anfänger und weiß daher nicht genau wie man die Informationen des Teil CORS-Header über AJAX abrufen kann. ES wäre nett wenn du mir da ein paar Tipps geben könntest.

mikdoe · 05. Okt. 2014

CORS Header sind nicht durch dich auszulesen sondern sie führen dazu, dass du Requests über Kreuz machen darfst, die sonst durch die SOP verhindert werden: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS
Das bedeutet, du kannst einfach über einen Ajax Request die gewünschten Daten über die API laden. Das könntest du ohne diese Header nicht. Wie man einen Ajax Request durchführt ist bekannt oder eher nicht? Falls nicht, setzt du ein Framework wie jQuery ein?

j-l-n · 05. Okt. 2014

00elNino schrieb:
weiß daher nicht genau wie man die Informationen des Teil CORS-Header über AJAX abrufen kann. ES wäre nett wenn du mir da ein paar Tipps geben könntest.

Klar, schau einfach mal hier im Forum, da haben wir schon zu fast allen Themen etwas

00elNino · 05. Okt. 2014

Ich hab mich damit jetzt ne ganze weile beschäftigt. Und bin aber leider trotzdem gescheitert. Komm hier irgendwie nicht weiter

. Ich glaube mir fehlt da einiges an Vorwissen um den passenden code selbst zusammenzubauen.

mikdoe schrieb:
Wie man einen Ajax Request durchführt ist bekannt oder eher nicht? Falls nicht, setzt du ein Framework wie jQuery ein?

Ich weiß leider nicht wie man einen Ajax request durchführt. Und ja ich habe versucht JQuery einzusetzen.

Könnte ihr so nett sein mir den Code für den Ajax Request mit JQuery sagen, der zu meinem Fall passt. Ich würde gerne mit dem Ajax request z.B. nur den Straßennamen auslesen und in meinen MarkerPopup ausgeben.

mikdoe · 05. Okt. 2014

Welche Parameter müssen denn an welche URL geschickt werden?

00elNino · 05. Okt. 2014

Von dieser Seite hier möchte ich z.B. den Straßennamen auslesen:

http://nominatim.openstreetmap.org/reverse?format=xml&lat=52.52001&lon=13.40495&addressdetails=1"

und danach als String hier in diesem Markerpopup schreiben:

HTML:

function onLocationFound(e) {
	var radius = e.accuracy / 2;
            
		L.marker(e.latlng, {
                clickable: true,
                draggable: false,
				opacity: 0.9,
				title: 'Click for more Information',
                icon: L.icon({
                    iconUrl: 'leaflet/images/kreuz.gif',
                    iconAnchor: [32, 32],
                    popupAnchor: [0, -32]
                })
            })
		.addTo(map)
		.bindPopup("<b>You are here</b><br>Accuracy: "+ radius +"m<br> LatLong: "+  e.latlng.toString().slice(7,25)+' <br> ') // hier soll der Straßenname rein 
}

kkapsner · 05. Okt. 2014

Der Grundcode ist in etwa Folgender:

HTML:

<!DOCTYPE html>

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Fenstertitel</title>
</head>
<body>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
$.get(
	"http://nominatim.openstreetmap.org/reverse?format=json&lat=52.52001&lon=13.40495&addressdetails=1%22",
	function(data){
		$("<div>").text(data.address.road).appendTo($(document.body));
	}
);</script>
</body>
</html>

00elNino · 05. Okt. 2014

Danke kkapsner. Das funktioniert sehr gut so wie du es vorgeschlagen hast. Leider habe ich nicht geschafft das Ergebnis als String in einer Variable zu speichern. Ich habe probiert das Ergebnis als String in einem alert fenster auszugeben, bekomme aber immer nur [object Object] angezeigt.

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

<script>
var strasse = $.get(
	"http://nominatim.openstreetmap.org/reverse?format=json&lat=52.52001&lon=13.40495&addressdetails=1%22",
	function(data){
	$("<div>").text(data.address.road);
	}
);


alert(String(strasse));

</script>

</div>
</body>
</html>

ich habe auch schon strasse.toSource(), JSON.stringify(strasse) und andere sachen ausprobiert, aber irgendwas mach ich grundlegend falsch denke ich. Kannst du da bitte nochmal helfen?

j-l-n · 06. Okt. 2014

00elNino schrieb:
irgendwas mach ich grundlegend falsch denke ich. Kannst du da bitte nochmal helfen?

Zum einen kann das nicht klappen, da $.get ist ein XHR-Objekt ist. Zum anderen ist AJAX asynchron, d.h., Code muss im Callback ausgeführt werden - es wird nicht gewartet. Und was dieses String() soll, weiß ich auch nicht...

HTML:

<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

</head>
<body>

<script>
var strasse = function(callback){
  $.get(
    "http://nominatim.openstreetmap.org/reverse?format=json&lat=52.52001&lon=13.40495&addressdetails=1%22",
    function(data){
      callback(data);
    }
  );
}

strasse(
  function(data){
    var adresse = data.address.road;
    $("<div>").text(adresse);
    alert(adresse);
  }
);
</script>

</div>
</body>
</html>

00elNino · 06. Okt. 2014

j-l-n schrieb:
Und was dieses String() soll, weiß ich auch nicht...

Ich möchte das Ergebnis vom Ajax request (Strassenname) eigentlich in eine Variable speichern um sie danach auch ausserhalb der funktion weiterverwenden zu können. Deshalb hatte ich das mit dem String gemeint.

kkapsner · 06. Okt. 2014

Da AJAX asynchron ist, wird das so nie funktionieren (außer du machst es synchron, was ich hier nicht empfehlen würde, da es nicht nötig ist).
Du musst also den Code, der deinen Marker erzeugt, in den Callback des AJAX packen, da du erst dort alle Informationen hast.

00elNino · 07. Okt. 2014

Super! Danke ihr habt mir echt geholfen. Hier ist mein Ergebnis wie ich das Problem mit dem Einbinden vom AJAX request in den Marker Popup gelöst habe. Im Popup erscheint jetzt die Stadt, Postleitzahl und Straße des Benutzers.

HTML:

<!DOCTYPE html>
<html>
    
    <head>
         <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />

        <!--[if lte IE 8]>
            <link rel="stylesheet" type="text/css" href=" leaflet/leaflet.ie.css" />
        <![endif]-->
																										<!-Beim Interpretieren des Codes wird IE8 Styleheet(oder anderer Browser) verwendet -> 
        
		 <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>

		<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script> 	

		<style>
            html, body, #map {
                height: 100%;
            }
            body {
                padding: 0;
                margin: 0;
            }
        </style>
        <title> MarkerPopupExample</title>
    </head>
    
<body>
<div id="page"></div>

<div id="header">
<div class="title">WebGIS Applikation</div>
</div>



<div id="map"></div>

<script src="leaflet.photon-master/leaflet.photon.js"></script>     

<script type="text/javascript">
	function myHandler(geojson) {								// Photon Reverse Geocoding function
			console.debug(geojson);
			};

	var map = L.map('map', {									// add map
			zoom: 13,
			photonControl: true,								// Photon Geocoding options
			photonControlOptions: {
			resultsHandler: myHandler,
			placeholder: 'Address search...',
			position: 'topleft'}
			}
			);
	  
			map.locate({setView: true, maxZoom: 16, watch:false, enableHighAccuracy:true})    	// Set Map Location to user Location
	
    var OSM = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {				// Loading Base Layers
                attribution: '© OpenStreetMap contributors'
            }).addTo(map);


	function onLocationFound(e) {					// location marker and marker pop-up function
	
	var nomURL = "http://nominatim.openstreetmap.org/reverse?format=json&lat="+e.latlng.toString().slice(7,15)+"&lon="+e.latlng.toString().slice(17,25)+"&addressdetails=1"; // Nominatim Reverse Geocoding URL
	
	var ajaxRequest = function(callback){				// AJAY Request Callback funktion zum zugreifen auf JSON in Nominatim URL
		$.get(
		nomURL,
		function(data){
			callback(data);
		}
		);		
	}
	
	ajaxRequest(										// Strassennamen suchen und in variable adresse speichern
		function(data){
		var street = data.address.road;
		$("<div>").text(street);
		var district = data.address.city_district;
		$("<div>").text(district);
		var zipcode = data.address.postcode;
		$("<div>").text(zipcode);
		var state = data.address.state;
		$("<div>").text(state);
		var city = data.address.city;
		$("<div>").text(city); 
		
		var radius = e.accuracy / 2;
		
		L.marker(e.latlng, {
                clickable: true,
                draggable: false,
				opacity: 0.9,
				title: 'Click for more Information',
            })
			.addTo(map)
			.bindPopup("<b>You are here</b><br>Accuracy: "+ radius +"m<br> LatLong: "+ e.latlng.toString().slice(7,25)+ "<br> State: " + state + "<br> City: " + city + "<br> Bezirk: " + district + "<br> Postcode: " + zipcode + "<br> Street: " + street)  //Nominatim reverse Geocoding
		}
		);
	}
	
	map.on('locationfound', onLocationFound);					// put location marker

</script>

</div>
</body>
</html>

kkapsner · 08. Okt. 2014

00elNino schrieb:
Danke ihr habt mir echt geholfen.

Bitte - gern geschehen.

Du solltest dir aber angewöhnen, deinen Code sauber zu formatieren. Macht das lesen/warten/abändern viel einfacher - v.A. wenn man mal mehrere Wochen nicht auf den Code geschaut hat.

Leaflet JavaScript Seiteninhalte in MarkerPopup einbinden

00elNino

New member

Anhänge

kkapsner

Super Moderator

00elNino

New member

mikdoe

Moderator

j-l-n

Guest

00elNino

New member

mikdoe

Moderator

00elNino

New member

kkapsner

Super Moderator

00elNino

New member

j-l-n

Guest

00elNino

New member

kkapsner

Super Moderator

00elNino

New member

kkapsner

Super Moderator