OpenStreetMap in Website einbinden
-
OpenStreetMap in Website einbinden · MarcoRuby (Gast) · 14.12.2012 08:17 · [flux]
Hallo,
Ich habe wieder mal eine frage .
Wie kann ich Openstreetmap in eine Website einbinden ?
Die Anleitung aus dem OpenStreetMap Wiki habe ich genau befolgt und hat leider nicht funktioniert. Es kommt immer nur eine Webiste mit Karte(Testversion). 🙁
Wäre super wenn ihr mir helfen könntet.
lg
- Re: OpenStreetMap in Website einbinden · wambacher (Gast) · 14.12.2012 08:25 · [flux]
MarcoRuby wrote:
Wäre super wenn ihr mir helfen könntet.
Wäre super, wenn du uns mehr Infos geben würdest 😉
Ein Link zu deiner Seite oder zumindest ein Stückchen Code.Gruss
Walter -
- Re: OpenStreetMap in Website einbinden · user_5359 (Gast) · 14.12.2012 08:47 · [flux]
Hallo Michael,
Kannst Du uns einen Link setzen vom Testergebnis setzen? Ist sicherlich nur eine Kleinigkeit, den man im Code schneller sieht als man Fragen stellen kann.
Mit freundlichen Grüßen Georg V.
P.S. Willkommen im Forum. -
- Re: OpenStreetMap in Website einbinden · wambacher (Gast) · 14.12.2012 09:16 · [flux]
mach mal den Firebug auf (F12 und reload) und dann kommt in Zeile 58: jumpTo not defined.
addMarker ist auch nicht definiert.
Gruss
walteroder steht das in tom.js drin?jo, steht drin.
so, hab tom.js eingebaut, knallt immer noch. allerdings irgenwo in den Tiefen von OL. Würde mich mal an den Autor wenden, da ich keineLustZeit habe, mich um Scripte zu kümmern, die irgendwer irgendwann zusammengebaut hat und die angeblich 100% funktionieren sollen. -
- Re: OpenStreetMap in Website einbinden · moenk (Gast) · 14.12.2012 09:52 · [flux]
Moin,
vielleicht hilft Dir das wenn ich Dir einfach meinen Code zur Selbstbedienung freigebe?
Hier ist eine Karte mit Markern: http://yapis.eu/?id=9&lang=de
Den Pfad zum OpenLayers und ein paar Kleinigkeiten musste natürlich anpassen.LG,
-moenk
- Re: OpenStreetMap in Website einbinden · wambacher (Gast) · 14.12.2012 09:57 · [flux]
michael94 wrote:
ok danke, der autor ist thomas heiles.
wie könnte ich den kontaktieren?
finde keine email oder ähnliches..lg
ich glaube, den kannst du vergessen. tom hat das zeug 2008 erstellt.
- Re: OpenStreetMap in Website einbinden · mblaettermann (Gast) · 14.12.2012 10:09 · [flux]
Hallo,
wenn es um reine Karten mit ein paar Markern geht, empfehle ich immer Leaflet.Js (http://leafletjs.com/) .
Das kann zwar längst nicht soviel, wie OpenLayers, ist dafür aber auch schlanker im Download und etwas fixer in der Dartstellung.
Scripte hier aus dem OSM Wiki würde ich nicht mehr verwenden, weil man nicht weiß für welche Version von OpenLayers die Dinger mal gecodet wurden. OpenLayers wird ja auch weiterentwickelt.
Gruß
M -
- Re: OpenStreetMap in Website einbinden · mblaettermann (Gast) · 14.12.2012 10:25 · [flux]
michael94 wrote:
hallo,
wir würden gerne OSM nutzen weil wir eine Strecke brauchen die dazu extra in OSM eingetragen ist 😉
danke euch allen!
lg
Kannst du mit Leaflet ohne Probleme! Einfach die die URL aus dem Beispiel auf der Startseite anpassen.
Gruß
M -
- Re: OpenStreetMap in Website einbinden · mblaettermann (Gast) · 14.12.2012 10:37 · [flux]
<!DOCTYPE␣html> <html> <head> <title>Map␣|␣Testanwendung</title> <meta␣http-equiv="content-type"␣content="text/html;␣charset=UTF-8"␣/> <script␣type="text/javascript"> //<![CDATA[
//␣create␣a␣map␣in␣the␣"map"␣div,␣set␣the␣view␣to␣a␣given␣place␣and␣zoom var␣map␣=␣L.map('map');//␣add␣a␣CloudMade␣tile␣layer␣with␣style␣#997 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',␣{ attribution:␣'Map␣data␣©␣<a␣href="http://openstreetmap.org">OpenStreetMap</a>␣contributors,␣<a␣href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }).addTo(map);L.marker([51.5,␣-0.09]).addTo(map)
//]]> </script> </head> <body>
<div␣id="header"> <h1>Karte␣(Testversion)</h1> <div␣id="map"></div> </div>
</body> </html>
Hier ein Beispiel mit Leaflet.
Bitte beachte auch, dass externe Javascripts teilweise von Browser erst geladen werden, wenn die html Seite im HTTP Kontext liegt. Also im Browser die Adresse mit http:// beginnt und nicht mit file://Also testweise mal auf deinen Webserver hochladen oder Lokal aufm Apache. Keine Ahnung wie bewandert du in dem Bereich bist.EDIT: Hab grad im Screenshot gesehen, das du auf localhost unterwegs bist - sollte also nicht das Problem sein 🙂
Gruß
M -
- Re: OpenStreetMap in Website einbinden · mblaettermann (Gast) · 14.12.2012 11:05 · [flux]
Ich Depp... 😄
Hier nochmal neu. (Hatte die externen Links vergessen und nicht getestet) 🙁
<!DOCTYPE␣html> <html> <head> <title>Map␣|␣Testanwendung</title> <meta␣http-equiv="content-type"␣content="text/html;␣charset=UTF-8"␣/>
<link␣rel="stylesheet"␣href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.css"␣/> <!--[if␣lte␣IE␣8]> <link␣rel="stylesheet"␣href="http://cdn.leafletjs.com/leaflet-0.4/leaflet.ie.css"␣/> <![endif]-->
<script␣src="http://cdn.leafletjs.com/leaflet-0.4/leaflet.js"></script>
</head> <body>
<div␣id="header"> <h1>Karte␣(Testversion)</h1> <div␣id="map"␣style="height:␣500px;"></div>
<script␣type="text/javascript">
//<![CDATA[
var␣lon␣=␣6.641389; var␣lat␣=␣49.756667; var␣zoom␣=␣7;
//␣create␣a␣map␣in␣the␣"map"␣div,␣set␣the␣view␣to␣a␣given␣place␣and␣zoom var␣map␣=␣L.map('map').setView([lat,␣lon],␣zoom);//␣add␣a␣CloudMade␣tile␣layer␣with␣style␣#997 L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',␣{ attribution:␣'Map␣data␣©␣<a␣href="http://openstreetmap.org">OpenStreetMap</a>␣contributors,␣<a␣href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>' }).addTo(map);L.marker([lat,␣lon]).addTo(map)
//]]> </script> </div>
</body> </html>
Bei mir Läuft es...
Gruß
M - Re: OpenStreetMap in Website einbinden · Joachim Moskalewski (Gast) · 14.12.2012 11:24 · [flux]
Zum Code aus entstanden aus dem Wiki-Beispiel: Um die Karte selbst zu bekommen folgendes verändern:
jumpTo(lon,␣lat,␣zoom);
Ändern in:
map.setCenter(new␣OpenLayers.LonLat(lon,␣lat).transform(new␣OpenLayers.Projection("EPSG:4326"),␣new␣OpenLayers.Projection("EPSG:900913")),␣zoom);Im Code wird zudem versucht, die Karte in das HTML-Element mit der ID "map" zu laden - das ist aber nicht vorhanden. Zudem scheint via CSS im vorgesehenen Element gar keine Größenangabe zu existieren... Daher den HTML-Code z.B. so ergänzen bzw. ändern:
<div␣id="map"␣style="width:500px;␣height:500px;"></div>
Funktioniert erst einmal die Kartendarstellung, sind die Marker ein weiteres Kapitel...
-
-
- Re: OpenStreetMap in Website einbinden · mblaettermann (Gast) · 14.12.2012 12:36 · [flux]
Klar... Da muss man dann das Script etwas anpassen, aber es geht.
Wo kommen die Marker denn her? MySQL Datenbank? Ein PHP-Script?
Bewegen sich die Marker, oder willst du neue/weitere Marker nachladen, wenn die Karte bewegt wird?
Die HTML Seite mit der Map würde per AJAX/Json die Marker laden und in die Karte schreiben.
Ich würde die Marker jedoch vorher in eine eigene LayerGroup schieben: http://leafletjs.com/reference.html#layergroupDie LayerGroup kann man mit der Methode clearLayers() leeren und dann neu befüllen.
Du brauchst also 2 Funktionen: initMap() und getMarkers().
var␣map;
muss aber vorher definiert werden, damit
getMarkers()
auch Zugriff darauf hat.
Wenn Du noch weitere Fragen hast, gern.
Gruß
M - Re: OpenStreetMap in Website einbinden · moenk (Gast) · 14.12.2012 16:03 · [flux]
michael94 wrote:
Ja wäre super wenn du mir den code zukommen lassen könntest 🙂
und mir vielleicht ein bisschen helfen könntest den zum laufen zu bringen :-)Michael,
den siehst Du doch wenn Du die Seite aufrufst - das Main-DIV kopierste Dir mal in ein HTML-Gerüst und dann sollte das auch schon sofort funktionieren.
LG,
-moenk
-
- Re: OpenStreetMap in Website einbinden · moenk (Gast) · 20.12.2012 17:25 · [flux]
Moin,
in meinem Beispiel würdest Du Datum und Uhrzeit und was auch immer als GeoRSS zur Verfügung stellen und jeder Marker ist dann anklickbar und zeigt eben diese Information, das kann OpenLayers sehr komfortabel.
LG,
-moenk
-
- Re: OpenStreetMap in Website einbinden · Netzwolf (Gast) · 08.01.2013 00:44 · [flux]
Nahmd,
michael94 wrote:
die Karte soll sich eigentlich nicht bewegen, darum auch nicht unbedingt neu geladen werden...
die Marker bewesgen sich serwohl.. theoretisch sollte immer ein aktiver Marker reichen..Grundsätzlich gilt: Du kannst nicht von außen auf einen Browser zugreifen und den zu irgendetwas veranlassen (jedenfalls solange die Programmierer nicht geschlampt haben). Wenn sich in der Anzeige etwas tun soll, muss die Seite, genauer ein enthaltenes Skript sich darum kümmern.
In Deinem Fall wird die Seite in bestimmten Abstände eine Liste der anzuzeigenden Marker von einer bestimmten URL abholen. Ruf den Link auf und drück' ein paar Mal “Reload”, dann siehst Du, worum es geht.
Du solltest als erstes einen solchen Marker-Feed auf Deiner Maschine einrichten. Meinen Feed kannst Du zum Testen nicht benutzen, weil der Browser sich immer nur mit dem Server verbinden darf, von dem er die HTML-Seite geladen hat. Du kannst aber natürlich meinen Codeschnipsel bei Dir laufen lassen.
Hinweis: ich verwende eine etwas veraltete Technik und benutze Tab-getrennte CSV statt neuerer Formate wie XML oder JSON. Nur damit keine Klagen kommen.
Dieser Marker-Positions-Feed wird in eine Seite eingebunden. Und das war es auch schon. Kopier den Sourcecode auf Deine Maschine und pass ihn an.
Viel Spaß!
Gruß Wolf
-
- Re: OpenStreetMap in Website einbinden · Netzwolf (Gast) · 10.01.2013 21:27 · [flux]
Nahmd,
michael94 wrote:
1. Verwende ich ja Leaflet..
Mein Beispiel baut auf OpenLayers auf und funktioniert nicht mit Leaflet. 🙁
Mit Leaflet habe ich noch nicht gearbeitet und kann also auch nichts dazu sagen.
Da muss einer der Leaflet-Experten Dir weiterhelfen. Sorry.Gruß Wolf
-
- Re: OpenStreetMap in Website einbinden · Netzwolf (Gast) · 10.01.2013 23:31 · [flux]
Nahmd,
michael94 wrote:
EDIT: läuft jetz bei mir mit deinem codeschnipsel etc!
Sehr schön.
Zum Thema GeoRSS habe ich eine Beispielseite ins Netz gestellt inklusive eines rudimentären GeoRSS-Generator-Skript.
Ich denke, auf das Notwendigste reduzierte Beispiele sind nützlicher als viele Worte.
bei weiteren Fragen meld ich mich wieder!
Weiterhelfen bei Webanwendungen ist viel einfacher oder wird überhaupt erst möglich, wenn man das Angebot live sehen kann.
Wenn Du keine feste IP hast (und wer hat die schon daheim), kannst Du einen DynDNS-Service nutzen. Dabei bekommst Du eine Subdomain bei einem Service-Provider zugewiesen, Dein Rechner meldet seine IP-Adresse bei jeder Änderungen an den Betreiber, und die fleißigen Helfer aus dem Forum können den Namen der Subdomain in den Browser tippern und werden mit Deiner aktuellen IP verbunden.
Gruß Wolf
-
-
- Re: OpenStreetMap in Website einbinden · Netzwolf (Gast) · 08.02.2013 17:19 · [flux]
Nahmd,
michael94 wrote:
Wie kann ich in dem Skript von dir die Marker verändern?
kann man zB die Farbe von dem Marker ändern? also das der Marker mit der id 1 rot ist und der Marker mit der id 2 zB blau ist?Farben ändern kann man mit Dom/Style und JavaScript meines Wissens nicht (mit SVG natürlich schon).
oder vielleicht sogar das Symbol?
Das wiederum ist trivial (Methode “createIconFromData”. Du kannst Dir auch den HTML-Quellcode der Geschichtskarte anschauen (auch da nach “createIconFromData” suchen): die nutzt die Icon-Auswahl exzessiv.
Gruß Wolf
-