You are not logged in.

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

Markus B
Member
Registered: 2008-07-05
Posts: 695

OSM in Website einbinden

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

Offline

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

PHerison
Member
From: Rhein-Main
Registered: 2008-04-04
Posts: 1,628

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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

Offline

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

dsp77
Member
From: .de
Registered: 2008-06-18
Posts: 21

Re: OSM in Website einbinden

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.

Offline

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

PHerison
Member
From: Rhein-Main
Registered: 2008-04-04
Posts: 1,628

Re: OSM in Website einbinden

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 sad 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)

Offline

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

dsp77
Member
From: .de
Registered: 2008-06-18
Posts: 21

Re: OSM in Website einbinden

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

Offline

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

PHerison
Member
From: Rhein-Main
Registered: 2008-04-04
Posts: 1,628

Re: OSM in Website einbinden

Ich schrieb ja, dass ich es mir nicht naeher angesehen habe... yikes 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... roll

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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 wink Mit anderen Worten: Alles ist da, man muss es nur finden. Das ist nun die nächste Aufgabe wink  Kristian

Offline

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

John07
Member
Registered: 2007-11-13
Posts: 245

Re: OSM in Website einbinden

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

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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.

Offline

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

Markus B
Member
Registered: 2008-07-05
Posts: 695

Re: OSM in Website einbinden

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

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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?

Offline

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

Markus B
Member
Registered: 2008-07-05
Posts: 695

Re: OSM in Website einbinden

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

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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.

Offline

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

Markus B
Member
Registered: 2008-07-05
Posts: 695

Re: OSM in Website einbinden

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)

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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

Offline

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

theiles
Member
Registered: 2008-08-11
Posts: 15

Re: OSM in Website einbinden

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. wink   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)

Offline

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

Hobby Navigator
Member
From: Aßlar, Germany
Registered: 2007-11-11
Posts: 1,616

Re: OSM in Website einbinden

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) hmm Georg


"Ich denke, dass es einen Weltmarkt für vielleicht fünf Computer gibt."
Thomas Watson, Vorsitzender von IBM, 1943

Offline

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

theiles
Member
Registered: 2008-08-11
Posts: 15

Re: OSM in Website einbinden

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. smile

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

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 sad

Offline

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

theiles
Member
Registered: 2008-08-11
Posts: 15

Re: OSM in Website einbinden

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. lol  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)

Offline

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

krza
Moderator
From: Köln
Registered: 2008-05-24
Posts: 640

Re: OSM in Website einbinden

Ick will aber kein Google wink  Ü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.

Offline

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

theiles
Member
Registered: 2008-08-11
Posts: 15

Re: OSM in Website einbinden

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! smile

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

Offline

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

zapfen
Member
From: Basel / Switzerland
Registered: 2008-08-07
Posts: 167
Website

Re: OSM in Website einbinden

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

Offline

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

Markus B
Member
Registered: 2008-07-05
Posts: 695

Re: OSM in Website einbinden

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

Offline

Board footer

Powered by FluxBB