[GELÖST] OpenStreetMap-Karte einbauen

brandy · 17. Dezember 2013 08:52

Hallo!

Wie baue ich den Embed-Code von OpenStreetMap am Besten auf meiner Seite ein?

Hier ein Test-Code:

Hier klicken, um den Code zum Kopieren zu markieren

<iframe width="425" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="http://www.openstreetmap.org/export/embed.html?bbox=15.64573287963867%2C47.07766256844053%2C15.753278732299803%2C47.133979780788366&amp;layer=mapnik&amp;marker=47.10582862231551%2C15.699505805969238" style="border: 1px solid black"></iframe><br/><small><a href="http://www.openstreetmap.org/?mlat=47.1058&amp;mlon=15.6995#map=14/47.1058/15.6995">Größere Karte anzeigen</a></small>

NaN · 17. Dezember 2013 09:59

Im Inhalt wirst Du ihn so nicht verwenden können - wegen des Editors.
Zwei Möglichkeiten:

a) Globaler Inhaltsblock (bei dem der Editor permanent deaktiviert wird).
Den kann Du dann auch im Editor verwenden: {global_content name="meineMap"}

b) Stichwort {embed}

brandy · 17. Dezember 2013 10:12

Danke für die Tipps.
Gibt es Probleme wenn ich 3 verschiedene Karten auf einer Seite verwenden möchte?
Ich hab jetzt nämlich 3 eingebaut und der erste funktioniert - die beiden letzten dann aber nicht mehr!

Hier ein Link: Link

NaN · 17. Dezember 2013 10:36

Hm also bei mir funktionieren alle drei.
Aber mit dem Zoom scheint etwas nicht zu stimmen.
Ich sehe immer die ganze Welt.

Beim ersten iFrame fehlt die Höhe.

brandy · 17. Dezember 2013 10:46

Ich hab jetzt diesen Code eingebaut:

Hier klicken, um den Code zum Kopieren zu markieren

{embed url='http://www.openstreetmap.org/export/embed.html?bbox=16.076409816741943%2C47.039604529710935%2C16.08898401260376%2C47.04641121655868&amp;layer=hot&marker=47.04300798169152%2C16.08269691467285'}

Er zeigt mir jetzt leider nur eine total ausgezoomte Variante, aber auf den beiden anderen Tabs wirds gar nicht angezeigt...
Wie bekomm ich das hin?

brandy · 17. Dezember 2013 13:25

Wenn ich drei Karten auf der einen Seite einbaue, funktioniert nur die erste - die beiden anderen sind immer total ausgezoomt - mit was hängt das zusammen?

Vielen Dank!

mike-r · 17. Dezember 2013 14:35

Mal ins Blaue: schon versucht auch wirklich unterschiedliche Karten zu laden? Momentan unterscheiden sich bei Dir nur die Links auf die Gross-ansicht.

brandy · 17. Dezember 2013 15:15

Ja, ich hab aktuelle eines einfach drei mal kopiert - ich bau dir aber gleich drei unterschiedliche Karte ein - schau in 3 Minuten nochmal drauf - danke!

mike-r · 17. Dezember 2013 16:51

Ja, geht nach wie vor nicht. Keinen Plan, wo das klemmt.

Alternativ könntest Du die Karte direkt via Openlayers einbinden. Ich hatte da mal ein Plugin in der Mache:
http://www.cmsmadesimple.de/forum/viewt … 139#p26139
Ich meine allerdings - wenn ich mich recht entsinne, dass das so nur läuft, wenn Tracks eingebunden sind, die Funktion müsste man wahrscheinlich aus dem Plugin (was recht übersichtlich ist) rausnehmen oder auf optional setzen.
Das Original von dem Plugin ist hier:
http://dev.cmsmadesimple.org/projects/osmtag und funktioniert wahrscheinlich auch wieder, da die letzte Änderung neuer ist, als mein Gefrickel damals.

brandy · 17. Dezember 2013 18:16

Danke - ich hab das Plugin installiert und auch gleich eingebaut. Schaut ja nicht schlecht aus.

Kann man den Kartentyp aber auf Humanitarian umstellen?
Und eins wär noch wichtig - kann ich die width auf 100% ändern?

EDIT:
Mehrere Karten kann man auf einer Seite auch nicht darstellen lassen - habe ich gerade festgestellt!

Beitrag geändert von brandy (17. Dezember 2013 18:18)

mike-r · 18. Dezember 2013 03:52

brandy schrieb:

Kann man den Kartentyp aber auf Humanitarian umstellen?

HOT müsstest Du im Plugin-code entweder fest einstellen oder zur Auswahl umprogrammieren.

Und eins wär noch wichtig - kann ich die width auf 100% ändern?

Mhh?

Mehrere Karten kann man auf einer Seite auch nicht darstellen lassen - habe ich gerade festgestellt!

in meinem Testcase laufen mit meiner Version vom Mai mehrere Karten gleichzeitig.
habe gerade leider keine Zeit Deine Szenarien (oder die aktuelle DEV-Version) zu testen, hast Du einen Link?

brandy · 18. Dezember 2013 07:43

Hier mal der Link: Link

Kannst du mal testweise mehrere Mapausschnitte auf einer Seite platzieren?

Vielen Dank!

brandy · 18. Dezember 2013 11:36

Gut ich habs gerade selbst ausprobiert - 3 gleiche Karten in einem Tab funktionieren - jeweils in einen anderen Tab eingefügt sind sie total ausgezoomt...
Woran kann das liegen?

Hier seht ihr es am Besten - im ersten Tab sind zwei unterschiedliche Karten eingefügt und in den beiden anderen Tabs nochmals die erste Karte.
Link

Vielleicht habt ihr eine Idee?

Beitrag geändert von brandy (18. Dezember 2013 11:39)

brandy · 19. Dezember 2013 08:41

Hat keiner eine Idee an was das liegen könnte?
Es hilft nämlich auch nichts wenn ich es in globale Inhaltsblöcke auslagere.

Andynium · 19. Dezember 2013 09:45

Mit welchem Plugin arbeitest du gerade?

Wenn du mit dem embed Plugin arbeitest - hast du für jede Karte eine individuelle ID vergeben?

brandy · 19. Dezember 2013 10:42

Hallo!

Momentan hab ich es mit der iframe-Variante gemacht...
Wie ich es aber mit der embed-Variante gearbeitet habe, hab ich drauf geachtet...

Ich versteh nicht ganz wieso es im ersten Tab funktioniert, dann aber nicht mehr - hat das mit dem Zeitpunkt des Ladens zu tun?

Klenkes · 19. Dezember 2013 10:46

Keine Ahnung ob es was damit zu tun hat, aber Opera Dragonfly meldet verschiedene "Declaration Syntax Error" im CSS, und du hast im Quelltext stehen:

<style style="text/css">

brandy · 19. Dezember 2013 10:59

Ich hab gerade geschaut - kommt von Foundation - habs auf anderen Seiten von mir auch.
Nur hab ich dort halt auch kein OSM!

NaN · 19. Dezember 2013 14:23

Das Problem liegt daran, dass die Bereiche in denen Du die anderen Karten anzeigen willst, beim Laden der Seite "hidden" sind. Durch diese Tabs, haben die ja display:none;

Ich verstehe zwar nicht warum das Probleme bereitet, aber das scheint ein bekanntes Problem zu sein. Funktionieren tun jedenfalls nur die Karten, die auch von Anfang an sichtbar sind.

Dieses Problem soll man umgehen können, indem man die Karte nicht einfach über ein iFrame einbindet, sonden mit Hilfe von OpenLayers API. Dann baut man die Karte sozusagen via Javascript.

Einfacher wäre es für Dich vielleicht, wenn Du Tab-Links (VA Team ...) mit einer Funktion belegst, die erst bei Klick die iFrames in den Inhalt einfügen bzw. die URL des iFrames setzen.

brandy · 19. Dezember 2013 14:54

Hört sich schlüssig an...
Werd mich jetzt mal einlesen und schauen ob ich da was zusammenbringe!

Vielen Dank!

brandy · 19. Dezember 2013 14:56

Habs gerade probiert - hab jetzt mal testweise alle Tabs auf "active" gesetzt. Dann funktionieren die Tabs zwar nicht mehr, aber die Karten werden angezeigt...

mike-r · 19. Dezember 2013 15:09

du könntest am Tab eine JS-Funktion hinzufügen, die beim draufklicken den zugehörigen iframe neu lädt. Das sollte gehen (Karte wird zumindest korrekt angezeigt, wenn ich die mit den Browserfunktionen neulade)

Beitrag geändert von mike-r (19. Dezember 2013 15:11)

faglork · 19. Dezember 2013 19:22

Moin!

NaN schrieb:

Das Problem liegt daran, dass die Bereiche in denen Du die anderen Karten anzeigen willst, beim Laden der Seite "hidden" sind. Durch diese Tabs, haben die ja display:none;
Ich verstehe zwar nicht warum das Probleme bereitet, aber das scheint ein bekanntes Problem zu sein. Funktionieren tun jedenfalls nur die Karten, die auch von Anfang an sichtbar sind.

Das ist auch bei GoogleMaps so.

NaN schrieb:

Dieses Problem soll man umgehen können, indem man die Karte nicht einfach über ein iFrame einbindet, sonden mit Hilfe von OpenLayers API. Dann baut man die Karte sozusagen via Javascript.

Also CGGoogleMaps nutzt das API und es geht trotzdem nicht :-(

Servus,
Alex

mike-r · 19. Dezember 2013 21:26

NaN schrieb:

Dieses Problem soll man umgehen können, indem man die Karte nicht einfach über ein iFrame einbindet, sonden mit Hilfe von OpenLayers API. Dann baut man die Karte sozusagen via Javascript.

Gerade in einem kleinen Testcase (ohne CMS) getestet: funktioniert prima. (in einer alternativen einblenden-funktion, die aber den Iframe vorher auch nicht lud)

@ brandy: hast Du osmtag überhaupt mal getestet? Bau das doch mal ein, damit man sehen kann, was für neue Probleme auftreten falls es bei Dir wirklich nicht geht.

brandy · 20. Dezember 2013 09:17

Ich habs schon mal drinnen gehabt - leider hat es nur auf der ersten Seite funktioniert...

Ich komm jetzt aber leider nicht auf den Server - ich kanns erst morgn Früh wieder aus OSM-Tag umbauen... Ich geb euch dann Bescheid!

Forum für CMS/made simple

#1 17. Dezember 2013 08:52

[GELÖST] OpenStreetMap-Karte einbauen

#2 17. Dezember 2013 09:59

Re: [GELÖST] OpenStreetMap-Karte einbauen

#3 17. Dezember 2013 10:12

Re: [GELÖST] OpenStreetMap-Karte einbauen

#4 17. Dezember 2013 10:36

Re: [GELÖST] OpenStreetMap-Karte einbauen

#5 17. Dezember 2013 10:46

Re: [GELÖST] OpenStreetMap-Karte einbauen

#6 17. Dezember 2013 13:25

Re: [GELÖST] OpenStreetMap-Karte einbauen

#7 17. Dezember 2013 14:35

Re: [GELÖST] OpenStreetMap-Karte einbauen

#8 17. Dezember 2013 15:15

Re: [GELÖST] OpenStreetMap-Karte einbauen

#9 17. Dezember 2013 16:51

Re: [GELÖST] OpenStreetMap-Karte einbauen

#10 17. Dezember 2013 18:16

Re: [GELÖST] OpenStreetMap-Karte einbauen

#11 18. Dezember 2013 03:52

Re: [GELÖST] OpenStreetMap-Karte einbauen

#12 18. Dezember 2013 07:43

Re: [GELÖST] OpenStreetMap-Karte einbauen

#13 18. Dezember 2013 11:36

Re: [GELÖST] OpenStreetMap-Karte einbauen

#14 19. Dezember 2013 08:41

Re: [GELÖST] OpenStreetMap-Karte einbauen

#15 19. Dezember 2013 09:45

Re: [GELÖST] OpenStreetMap-Karte einbauen

#16 19. Dezember 2013 10:42

Re: [GELÖST] OpenStreetMap-Karte einbauen

#17 19. Dezember 2013 10:46

Re: [GELÖST] OpenStreetMap-Karte einbauen

#18 19. Dezember 2013 10:59

Re: [GELÖST] OpenStreetMap-Karte einbauen

#19 19. Dezember 2013 14:23

Re: [GELÖST] OpenStreetMap-Karte einbauen

#20 19. Dezember 2013 14:54

Re: [GELÖST] OpenStreetMap-Karte einbauen

#21 19. Dezember 2013 14:56

Re: [GELÖST] OpenStreetMap-Karte einbauen

#22 19. Dezember 2013 15:09

Re: [GELÖST] OpenStreetMap-Karte einbauen

#23 19. Dezember 2013 19:22

Re: [GELÖST] OpenStreetMap-Karte einbauen

#24 19. Dezember 2013 21:26

Re: [GELÖST] OpenStreetMap-Karte einbauen

#25 20. Dezember 2013 09:17

Re: [GELÖST] OpenStreetMap-Karte einbauen

Fußzeile des Forums