OSM in Website einbinden

Markus B · 2008-07-19 19:03:09

Mit welchem HTML-Code kann OSM in eine Website so eingebunden werden, dass a) in der Website ein Ausschnitt aus der lokalen Kartendarstellung als Bild (irgendein Grafikformat) statisch angezeigt wird, und bei Klick auf das Bild ein Fenster aufgeht, in dem nur der Kartenausschnitt (also möglichst ohne den linken Menu-Balken und die Reiter oben) von OSM gezeigt wird und in diesem gezoomt und gescrollt werden kann? b) in der Website ein Ausschnitt aus der lokalen Kartendarstellung nur der Kartenausschnitt von OSM dynamisch gezeigt wird und in diesem direkt gezoomt und gescrollt werden kann? Danke, Markus

PHerison · 2008-07-19 19:09:32

http://wiki.openstreetmap.org/index.php/OpenLayers

krza · 2008-07-20 13:00:25

Ich habe mir die Sache auch endlich mal angeschaut und muss zugeben, dass ich damit nicht klarkomme. Auf der von Dir angegebenen Seite, PHerison, sind ja zwei Beispiele verlinkt. http://wiki.openstreetmap.org/index.php … le_Example Das erste mit dem statischen Marker ist okay. Das funktioniert und kann entsprechend angepasst werden, obgleich mir aufgefallen ist, dass der Marker etwas daneben liegt, wenn man die Koordinaten-Angaben aus Potlatch übernimmt (L-Taste). Und auch die aus den Viewern passen nicht ganz. Komische Sache. Jedenfalls kann man das hinkriegen mit der genauen Position, wenn man mit den lat/lon-Werten etwas rumspielt. http://wiki.openstreetmap.org/index.php … er_example Aber dann gibt´s da noch das zweite Beispiel. Das ist aber irgendwie der Wurm drin, denn da passt nichts zueinander. Wenn man es öffnet, werden zwei Marker gesetzt. Wunderbar. Verwendet wurden die Mercator-Koordinaten. Nun habe ich mal im Viewer die lat/lon-Koordinaten dieser beiden Punkte bestimmt und mit Hilfe der entsprechenden Seite in Mercator-Koordinaten umgewandelt - die haben aber nicht sehr viel mit den Werten zu tun, die im Script stehen. Dann kam zwischenzeitlich wohl OpenLayers2.6 raus, in dem man auch direkt lat/lon verwenden kann, und es wurde ein entsprechendes Beispiel eingefügt. Das aber passt weder zur Darstellung in der Karte noch zu den Mercator-Werten. Und vor allem: Wenn man das mal probiert, wird gar nichts angezeigt. Entweder ist 2.6 also doch noch nicht aktiv, oder die eingebundenen Files sind nicht die richtigen. Denn die Syntax stimmt laut OpenLayers-Seite. Das ist aber auch alles, was man da rausbekommt. Den Rest kann man im Sinne der Beispiele knicken. Meine Frage also: Hat schon mal jemand das Beispiel mit den POIs erfolgreich an die eigenen Vorgaben angepasst? Wenn ja, wie? Danke, Kristian

dsp77 · 2008-07-22 14:32:27

Hier wurde mal vor einiger Zeit ein Link angegeben der zu funktionier scheint: http://geggus.net/sven/plan/ In dem Beispiel hat der Benutzer aber leider allen interessanten Code in eine Datei markers.js gesteckt und die ist nicht runter ladbar. Ich habe auch mal das zweite Beispiel mit der Textdatei probiert bin aber auch nicht viel weiter gekommen.

PHerison · 2008-07-22 14:35:48

dsp77 wrote:

In dem Beispiel hat der Benutzer aber leider allen interessanten Code in eine Datei markers.js gesteckt und die ist nicht runter ladbar.

view-source:http://geggus.net/sven/plan/js/markers.js Habe es mir aber nicht naeher angesehen, ob da was brauchbares drin steht. [EDIT]: Funktioniert nicht BBCode Einfach

view-source:http://geggus.net/sven/plan/js/markers.js

als URL eintippen und Du hast den Quelltext.

Last edited by PHerison (2008-07-22 15:50:04)

dsp77 · 2008-07-22 16:51:47

Das funktioniert nicht. Ich hab das schon mit dem Browser probiert. Alle gelisteten Klassen können runtergeladen werden, nur nicht diese.

PHerison · 2008-07-22 17:31:22

Ich schrieb ja, dass ich es mir nicht naeher angesehen habe... Was da zurueckkommt ist der HTML-Code der Fehlerseite ("Objekt nicht gefunden!"). Da hat der Autor wohl einen kaputten Verweis in seinem HTML. Daraus folgt: Die .js-Datei ist fuer die Funktion nicht noetig...

krza · 2008-07-22 17:59:31

Der Grund dürfte sein, dass es dieses JS-File nicht gibt ;-) "markers.js" ist einfach eine Zeilen-Leiche, die zu löschen vergessen wurde. Wenn Du Dir den Klumpatsch lokal runterlädst, klappt es aber noch immer nicht sofort, weil sich das OpenLayers.js, dieses Miststück ;-), sich noch andere Dateien einbindet, die Genosse Sven natürlich auch alle liegen hat. Abhilfe schafft, die Datei (wie eigentlich auch üblich) direkt von OpenLayers einzubinden (http://www.openlayers.org/api/OpenLayers.js). Damit hat man immer die aktuellste Version am Start und vor allem auch keinen eigenen Server-Traffic damit. Nach dieser kleinen Modifikation läuft das Skript. Nur das Bild des Hauses hatte ich vergessen Mit anderen Worten: Alles ist da, man muss es nur finden. Das ist nun die nächste Aufgabe Kristian

John07 · 2008-07-22 18:07:58

Hilft euch das: http://wiki.openstreetmap.org/index.php … ers_Marker ? Das ist fast das selbe wie beim Sven. Gruß Jonas

krza · 2008-07-22 18:21:05

Danke für den Hinweis, John, aber das ist o.g. statische Beispiel, nicht aber das mit den "dynamischen" Markern, die erstens mehrfach und zweitens klickbar sind.

Markus B · 2008-07-24 12:11:32

Darf ich nochmal nachfragen nach einer "HowTo"-Anleitung: Bei mir öffnet ein Bike-Park als Sport- und Touristenattraktion. Auf deren Website wäre eine zoombare OSM-Karte hübsch. Nicht zuletzt als Werbung für OSM, denn die Biker haben meist ein GPS dabei... Aber ich weiss nicht wie es geht. Gruss, Markus

krza · 2008-07-24 20:52:34

Ich will mir das Beispiel von Sven am WE nochmal genauer angucken. Zunächst habe ich die Files etwas aufgeräumt, damit sie lesbarer werden. Das hat mir aber auch nur bedingt geholfen. Irgendwann habe ich es dann sogar zum Laufen bekommen, musste aber feststellen, dass es sehr labil ist. Schon das erste Verschieben der Karte mit der Maus führt zu Bildfehlern, der Marker verschwindet für immer, und insgesamt läuft es sehr ruckelig und langsam. Der einzige Unterschied ist allerdings die oben schon genannte Einbindung der OpenLayers.js vom Server statt der lokalen Files. Kann das die beschriebenen Effekte verursachen und möglicherweise der Grund sein, warum Sven sich für die lokale Variante entschieden hat?

Markus B · 2008-07-28 11:08:07

Hier gibts eine gleichlautende Anfrage und Ideen: http://wiki.openstreetmap.org/index.php … le_Example http://wiki.openstreetmap.org/index.php … er_example Ein reiner Anwender wünscht sich natürlich ein How-To, also ein "Rezept"... Eine entsprechende Seite würde viel zur Verbreitung von OSM beitragen. Gruss, Markus

krza · 2008-07-28 16:44:43

Wenn Du genau hinschaust, siehst Du, dass ich die beiden Links oben auch schon hingeschrieben hatte, was dafür spricht, dass sie nicht wirklich weitergeholfen haben.

Markus B · 2008-07-31 22:43:56

Hallo Kristian,

krza wrote:

Wenn Du genau hinschaust

ja, das geschieht manchmal, dass ich etwas zwar lese, und wenn ich es später woanders entdecke, mich nicht mehr erinnere es gelesen zu haben. Manchmal hilft es, jemandem einen Link zu schicken - hier war es doppelt gemoppelt. Sorry. Wenn Du - oder jemand anders - eine Lösung gefunden hat, schreibst Du dann ein HowTo im Wiki? Wäre super! Gruss, Markus

Last edited by Markus B (2008-07-31 22:45:37)

krza · 2008-07-31 23:08:17

Ich bin bisher aus Zeitgründen nicht weitergekommen, aber wenn ich was habe, wird es zur Verfügung gestellt, klar.

theiles · 2008-08-11 16:19:28

Building Maps into Your Swing Application with the JXMapViewer heißt die Überschrift von Joshua Marinacci und beschäftigt sich mit der IDE Netbeans und der Swing Komponente JXMapViewer. Joshua erklärt Schritt für Schritt wie man die Daten von openstreetmap sinnvoll in eine einfache Java-Applikation einbinden kann. URL: 1) http://today.java.net/pub/a/today/2007/ … iewer.html 2) http://today.java.net/pub/a/today/2007/ … iewer.html

Last edited by theiles (2008-08-11 16:20:21)

Hobby Navigator · 2008-08-11 17:10:02

Hi und herzlich willkommen im Forum. Danke für den Tipp. Gibt es das Ganze auch in einer deutschen Übersetzung? Ich denke da kommen einige ganz schön ins schleudern.. (ich eingeschlossen) Georg

theiles · 2008-08-11 17:17:49

Es gibt keine deutsche Übersetzung dieser beiden Webseiten, zumindestens ist mir keine bekannt. Ich könnte die wichtigsten Sätze übersetzen, ist nicht schwer. Das braucht aber ne Weile, denke mal das ich es heute nicht mehr schaffen werde. Die Webseite vom Sven gefällt mir gut, versuche gerade lokal die Anwendung nachzubauen. Schaue mal wie weit ich heute noch damit komme, werde ansonsten heute abend meine Ergebnisse hier zeigen.

krza · 2008-08-11 17:31:56

Naja, Java ist ja gut und schön, aber es geht ja hier eher um die simple Einbindung in die Webseite mittels der OpenLayers-JavaScript-Bibliothek & Co. Habe übrigens noch nicht weiter probieren können bisher

theiles · 2008-08-11 18:22:00

Naja, mit rund 20 Zeilen Code (kein Witz) kann man eine doch recht eindrucksvolle Applikation schaffen. Weiß nicht wo die Probleme bestehen. Habe es mir mal näher angeschaut, hat recht schnell geklappt. http://www.bluecafe.eu/test/ Wie man schön erkennen kann wird eine Google Api benutzt. Originaler HTML-Quellcode:

<script src="http://maps.google.com/maps?file=api&v=2&key=ABQIAAAA59MG9Lpl71eVmEtrAGlIAxRxjaKfyy0M7VU40q6Zk9vzdXzIdRQkl3PSdUV_g_Qvy-k3XnO6OsgnVA"></script>

Last edited by theiles (2008-08-11 18:24:38)

krza · 2008-08-11 18:27:32

Ick will aber kein Google Übrigens kömmt da ´ne Fehlermeldung am Anfang, dass die Google-API für ´ne andere Seite registriert sei oderso. Funktionieren tut´s aber offenbar trotzdem.

theiles · 2008-08-11 18:48:23

So, und nun hat es sich ausgegoogelt. Kurze Information zum Quelltext:

<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="th.js"></script>

Wie man erkennt binde ich nun die OpenLayers.js von openlayers.org ein und lege sie nicht mehr lokal auf den Rechner. Weiterer JavaScript Code im Quelltextheader:

var lon = 6.641389; var lat = 49.756667; var zoom = 15;  [...]  addMarker(layer_markers, 6.641389, 49.756667, popuptext);

Diese Zeilen stellen eure jeweilige Position dar. Diese Dezimalzahlen sind sogenannte Gon-Angaben. Zu finden auf Wikipedia, fast jede Ortschaft ist dort mit einer geographischen Lageangabe versehen. Sie steht jeweils ganz rechts oben. Viel Spaß mit der Anwendung!

Last edited by theiles (2008-08-11 19:01:52)

zapfen · 2008-08-12 07:58:43

toll sieht gut aus. Bitte noch hier http://wiki.openstreetmap.org/index.php/OpenLayers dokumentieren. Falls Du keine Lust hast werde ich das übernehmen. Gruss zapfen

Markus B · 2008-08-12 11:13:35

Hallo Theiles,

zapfen wrote:

toll sieht gut aus.

das sieht so aus als ob Du die lang ersehnte Lösung gefunden hast...!? Kannst Du die Lösung bitte im Wiki in deutscher Sprache dokumentieren? Damit es allgemeinverständlich ist am besten als HowTo, damit auch der Gemeindeschreiber, der die Website pflegt, nachvollziehen kann, was genau er wie tun muss, dass OSM in der Gemeindeseite funktioniert. Und mich würde es als Initiator dieser Frage natürlich auch brennend interessieren. Diese Seite sollte im Wiki dann auch so verlinkt sein, dass sie von einem Anwender gefunden werden kann.

zapfen wrote:

Falls Du keine Lust hast werde ich das übernehmen.

Hallo Zapfen, das ist ja ein nettes Angebot! Bitte denke auch an die deutschsprachige Fassung de:OpenLayers Mit herzlichem Gruss, Markus

Announcement

#1 2008-07-19 19:03:09

OSM in Website einbinden

#2 2008-07-19 19:09:32

Re: OSM in Website einbinden

#3 2008-07-20 13:00:25

Re: OSM in Website einbinden

#4 2008-07-22 14:32:27

Re: OSM in Website einbinden

#5 2008-07-22 14:35:48

Re: OSM in Website einbinden

#6 2008-07-22 16:51:47

Re: OSM in Website einbinden

#7 2008-07-22 17:31:22

Re: OSM in Website einbinden

#8 2008-07-22 17:59:31

Re: OSM in Website einbinden

#9 2008-07-22 18:07:58

Re: OSM in Website einbinden

#10 2008-07-22 18:21:05

Re: OSM in Website einbinden

#11 2008-07-24 12:11:32

Re: OSM in Website einbinden

#12 2008-07-24 20:52:34

Re: OSM in Website einbinden

#13 2008-07-28 11:08:07

Re: OSM in Website einbinden

#14 2008-07-28 16:44:43

Re: OSM in Website einbinden

#15 2008-07-31 22:43:56

Re: OSM in Website einbinden

#16 2008-07-31 23:08:17

Re: OSM in Website einbinden

#17 2008-08-11 16:19:28

Re: OSM in Website einbinden

#18 2008-08-11 17:10:02

Re: OSM in Website einbinden

#19 2008-08-11 17:17:49

Re: OSM in Website einbinden

#20 2008-08-11 17:31:56

Re: OSM in Website einbinden

#21 2008-08-11 18:22:00

Re: OSM in Website einbinden

#22 2008-08-11 18:27:32

Re: OSM in Website einbinden

#23 2008-08-11 18:48:23

Re: OSM in Website einbinden

#24 2008-08-12 07:58:43

Re: OSM in Website einbinden

#25 2008-08-12 11:13:35

Re: OSM in Website einbinden

Board footer