Mehrere Karten auf einer Seite + Adressumrechnung

wellseo · February 7, 2013, 10:57am

Ja Servus Gemeinschaft!

Mein erster Beitrag hier nun und zu allererst ein Dankeschön an Euch! Ich sehe hier eine Menge Aktivität - und das ist es, was ein Produkt wesentlich bereichert. Ein Dankeschön, das Ihr OSM verbessert!

Nach einer Kurzen Beschreibung, mein Anliegen:

Für einen wohltätigen Verein (Vermisstensuche) baue ich eine Karte bzw. Karten. In der Karte (pro vermisste Person [ist ein Artikel]) soll der Geburtsort eingetragen werden. Strasse, Hausnummer, Bundesland und Staat habe ich in PHP-Variablen und/oder als benutzerfefiniertes Feld. “Benutzerdefiniertes Feld” - genau, die Website basiert auf Wordpress.

Ich habe mich durch http://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden bzw. http://wiki.openstreetmap.org/wiki/DE:Beginners%27_guide schon durchgehangelt. Das Resultat: Karte funktioniert. Nun wird es aber tricky, denke ich:

Ich brauche mehrere Karten auf einer (Unter-)Seite. Das habe ich bisher nicht realisieren können, weil:

Im wirt ja per onload=“beispielfunktion-fuer-karte()” aufgerufen. Diese Funktion im -Bereich enthält ja aber nur den Code für eine Karte. Ich brauche aber teilweise bis zu 10 auf einer Seite (da ich die Karten zum Beispiel auch im Loop der index.php anzeigen möchte). Und vor Allem: ich muss die jeweilige Funktion einem Beitrag zuweisen, da ich in der Funktion ja die Adressangabe machen muss.

Ich hätte für jeden vermisste Person/Artikel eine eindeutige ID, welche ich per PHP abrufen kann. Somit könnte ich die Map-Funktionen eindeutig benennen. Auch die jeweilen Adress-Variablen kann ich so identifizieren/aufrufen.

Um mal auf den Punkt zu kommen: ich kann bisher immer nur eine Funktion aufrufen. Aber ich brauche sie mehrmals und immer unterschiedlich, da es ja unterschiedliche Adressen sind. Ich habe schon versucht die Funktion (ist ja JavaScript) in body unterzubringenn (im jeweiligen Bereich des Artikels, damit jeder Artikel seine eigene Funktion erhält). Auch habe ich jede Funktion (den Namen dessen) mit meiner Artikel-ID ergänzt und versucht den onload-Befehl in den Artikelbereich zu bekommen (natürlich auch wieder mir der Artikel-ID verfeinert). No Result.

Und nun zum zweiten Bösen: wie bekomme ich die Adressumrechnung hin. Wie gesagt. Ort, Bundesland Staat habe ich.

Ich hoffe Ihr könnt mich irgendwie auf den richtigen Pfad bringen. Nachfragen sind gerne erwünscht und werden so schnell wie möglich beantwortet. Und nein, ich kann leider keinen Link anbieten, da die Website hinter dem Schutzschild “Wartungsmodus” steht.

Ich grüße Euch!

P.S.: Ich habe natürlich schon Google abgefragt oder versucht irgendwo einen Code zu analysieren - bisher ohne Erfolg…

Netzwolf · February 7, 2013, 12:09pm

Moins,

Here we go.

Das Thema Geocoding hatten wir vor Kurzem in einem anderen Thread angesprochen.

Du solltest es auf jeden Fall vorab erledigen und die Koordinaten in Deine Datenbank aufnehmen und keinesfalls bei jedem Aufruf der Kartes.

Gruß Wolf

geri-oc · February 7, 2013, 3:44pm

Vielleicht müsste es so etwas wie die Camping-Site von user chrisMein sein.

Dann bei ihm anfragen.

wellseo · February 8, 2013, 12:34pm

Servus Gemeinscht, Wolf und geri-oc. Vielen Dank für Eure Hilfestellungen und Bemühungen!

Wolf, ich bin deinem Beispiel ( http://www.netzwolf.info/kartografie/openlayers/multi.htm ) gefolgt und habe mir den Code angeschaut. Ok, bei Dir funktioniert es. Ich habe den Code kopiert und bei mir eingefügt. Trotz dessen, erhalte ich noch keine Karten angezeigt. Dort wo die Karten erscheinen sollen, wird zwar ein Code fabriziert, aber das Resultat ist optisch nicht ersichtlich. Eine CSS-Anweisung, welche jenes versteckt, existiert meiner Prüfung nach nicht. Darauf habe ich keine Hinweise. Auch wird die ID, welche in der ersten Karte verwendet wird, irgendwie nicht richtig erzeugt. Ich poste man den Code und erörtere das.

Hier das Krams im :


<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/tom.js"></script>
<script type="text/javascript">
function drawMap(id, lon, lat, zoom) {

	//----------------------------------------------------------------------------
	//	id: id des zugehörigen <div>
	//----------------------------------------------------------------------------

	var map = new OpenLayers.Map (id, {controls: []});

	//----------------------------------------------------------------------------
	//	Default-Koordinatensystem fuer alle Controls
	//----------------------------------------------------------------------------

	map.displayProjection = new OpenLayers.Projection("EPSG:4326");

	//----------------------------------------------------------------------------
	//	Kartenlayer
	//----------------------------------------------------------------------------

	map.addLayer (new OpenLayers.Layer.OSM.Mapnik('KartenId: ' + id));

	//----------------------------------------------------------------------------
	//	Positioniere auf die angegebene Position
	//----------------------------------------------------------------------------

	var lonLat = new OpenLayers.LonLat(lon, lat).
                        transform(map.displayProjection, map.getProjectionObject())

	map.setCenter (lonLat, zoom);
};

var mapIdSequence = 0;

function drawMaps () {

	var divElements = document.getElementsByTagName('div');

	for (divIndex=0; divIndex<divElements.length; divIndex++) {

		var div = divElements[divIndex];

		var title = div.title || '';

		if (title.substring(0,4) != 'map ') continue;

		var idLonLatTitle = title.split(' ', 5);

		var id = 'map' + ++mapIdSequence;

		div.id    = id;
		div.title = idLonLatTitle[4];

		drawMap(id, idLonLatTitle[1], idLonLatTitle[2], idLonLatTitle[3]);
	}
}
//-->
</script>

Mein -Anfang:


<body <?php body_class(); ?> onload="drawMaps()">

Und nun ein Artikel (dies der Code, wie er noch im Editor steht):


<div title="map <?php the_ID(); ?> 50 13 Karte Nummer<?php the_ID(); ?>" style="height:200; width:200; background: gray"></div>

So. Gespeichert, hochgelad und jene Seite aufgerufen, wo die Karten erscheinen sollten. Ich poste die Kartenausgabe von den ersten drei Artikeln, damit ersichtlich wird, das die Karte des ersten Artikels irgendwie nicht richtig verarbeitet wird. Komisch daran ist, dass der title=“xyz” nicht so aussieht, wie er aussehen sollte. Auch erscheint ein id=“map1”. In den anderen Artikeln nicht. Aber seht/vergleicht bitte selbst.

Artikel 1 / Karte 1 (der Code, welchen ich im Browser zurück bekomme):


<div style="height:200; width:200; background: gray" title="Karte" id="map1"></div>

Artikel 2 / Karte 2 (der Code, welchen ich im Browser zurück bekomme):


<div style="height:200; width:200; background: gray" title="map 40358 50 13 Karte Nummer40358"></div>

Artikel 3 / Karte 3 (der Code, welchen ich im Browser zurück bekomme):


<div style="height:200; width:200; background: gray" title="map 39507 50 13 Karte Nummer39507"></div>

Auch wenn nur der erste Artikel komisch erscheint, werden alle nicht angezeigt. Wisst Ihr einen Rat?

Netzwolf · February 8, 2013, 4:30pm

Nahmd,

Nach dem “map” müssen sofort die Koordinaten stehen, also


title="map <lon> <lat> <zoom> <optional der wirkliche Titel>"

Deine Id taucht im Text wenn überhaupt nur im “wirklichen Titel” auf.

In meinem Beispiel “map 14 47 10 Karte Nummer2” ist 14 die Länge, 47 die Breite, 10 der Zoom und der Rest der wirkliche Titel.

Ich habe in meinem Beispiel ein “.0” an die Koordinaten angehängt und einen Kommentar dazugeschrieben.

Gruß Wolf

Edit: Futur→Perfekt

wellseo · February 15, 2013, 4:21pm

Ja servus Wolf, servus geri-oc und servus Gemeinschaft!

Danke Wolf, Deine Erörterung hat mir geholfen. Adressen werden mittlerweile umgerechnet und auch die Karten werden angezeigt. Auch eine Zoomfunktion habe ich integrieren können. Die Adressumrechnung habe ich übrigends mit Hilfe eines anderen Dialogs von/mit Dir hier im Forum lösen können. (Für interessierte Leser/Nachmacher: http://forum.openstreetmap.org/viewtopic.php?id=15811)) Auch wenn Du mir zuvor empfohlen hast, diese Umrechnungen zwischenzuspeichern, mache ich es aktuell bei jedem Kartenaufruf. Ja, dauert 1-2 Sekunden, bis die Karten aufgebaut sind, was jedoch akzeptabel scheint. Oder siehst Du da noch andere Probleme?

Warum ich aber schreibe, abgesehen um wieder meinen Dank auszusprechen: Wie bekomme ich jetzt einen Marker in die Karte? Natürlich habe ich auch hier probiert mich zu belesen und/oder an anderen Karten mir ein Beispiel zu nehmen, was aber nicht recht funktioniert. Ist halt wirklich erst mein erstes Projekt mit OSM… Habe zuvor immer nur die API von Noodle genutzt.

Ich poste mal meinen bisherigen Code, damit man sehen kann, wie ich das bisher alles gebaut habe:

In meiner header.php:


<script type="text/javascript">
function drawMap(id, lon, lat, zoom) {

	//----------------------------------------------------------------------------
	//	id: id des zugehörigen <div>
	//----------------------------------------------------------------------------

	var map = new OpenLayers.Map (id, {controls: [
		new OpenLayers.Control.Zoom()
	]});

	//----------------------------------------------------------------------------
	//	Default-Koordinatensystem fuer alle Controls
	//----------------------------------------------------------------------------

	map.displayProjection = new OpenLayers.Projection("EPSG:4326");

	//----------------------------------------------------------------------------
	//	Kartenlayer
	//----------------------------------------------------------------------------

	map.addLayer (new OpenLayers.Layer.OSM.Mapnik('KartenId: ' + id));

	//----------------------------------------------------------------------------
	//	Positioniere auf die angegebene Position
	//----------------------------------------------------------------------------

	var lonLat = new OpenLayers.LonLat(lon, lat).
                        transform(map.displayProjection, map.getProjectionObject())

	map.setCenter (lonLat, zoom);
};

var mapIdSequence = 0;

function drawMaps () {

	var divElements = document.getElementsByTagName('div');

	for (divIndex=0; divIndex<divElements.length; divIndex++) {

		var div = divElements[divIndex];

		var title = div.title || '';

		if (title.substring(0,4) != 'map ') continue;

		var idLonLatTitle = title.split(' ', 5);

		var id = 'map' + ++mapIdSequence;

		div.id    = id;
		div.title = idLonLatTitle[4];

		drawMap(id, idLonLatTitle[1], idLonLatTitle[2], idLonLatTitle[3]);
	}
}
//-->
</script>

In meiner functions.php:


function umlaute($text)
{
$search  = array ('ä', 'ö', 'ü', 'Ä', 'Ö', 'Ü', 'ß');
$replace = array ('ae', 'oe', 'ue', 'Ae', 'Oe', 'Ue', 'ss');
$str2  = str_replace($search, $replace, $text);
return $str2;
}

In meiner content-index.php:


<?php
        $adresse=umlaute($adresse_g = get_post_meta($post->ID, 'geburtsplz_g', true) . " " . get_post_meta($post->ID, 'geburtsort_g', true) . " " . get_post_meta($post->ID, 'geburtsbundesland_g', true) . " " . get_post_meta($post->ID, 'geburtsland_g', true));
            
        $url = "http://nominatim.openstreetmap.org/search?format=json&q=" . rawurlencode($adresse);
        $response = file_get_contents($url);
        $parsed = json_decode($response);
        $result0 = $parsed[0];
        $lat=$result0->lat;
        $lon=$result0->lon;
?>

<div class="alignright">
    <div title="map <?php echo $lon ?> <?php echo $lat ?> 8 Karte-<?php the_ID(); ?>" style="height:200px;width:200px;background:gray;"></div>
</div>

Nun nochmal die finale Frage: wäre jemand so gnädig, mir die Integration eines Markers zu erörtern bzw. zu zeigen?

Vielen, vielen Dank für das Engagement!

Netzwolf · February 15, 2013, 5:19pm

Nahmd,

Hauptsächlich, dass der Betreiber des Übersetzungsservers mit einem Baseballschläger oder Ärgerem bei Dir auftaucht.

Gruß Wolf

Edit: Typo