[GELÖST] OpenStreetMap-Karte einbauen

mike-r · 06. Januar 2014 20:52

Ich glaube nicht, dass das ein Foundation-problem ist, sondern von Openlayers und/oder Openstreetmap

brandy · 07. Januar 2014 22:44

Ok, ein Herr vom Openlayers-Forum hat gemeint, ich müsste mit fixen Werten arbeiten.

Ich hab mir jetzt aber gedacht, dass ich einfach zwei divs mache und für die jeweils kleine und große Ansicht ein- bzw. ausblende - mittels der Visibility-Klassen - Link
Das Problem, das sich jetzt ergibt, ist die Zuweisung der Karte mit der id, da ich das div ja zweimal einbauen müsste...

mike-r · 08. Januar 2014 03:01

brandy schrieb:

Ok, ein Herr vom Openlayers-Forum hat gemeint, ich müsste mit fixen Werten arbeiten.

das hab ich ja auch schonmal(TM) gemeint, das wäre auf jeden Fall das einfachste.

brandy · 08. Januar 2014 08:01

Ja, okay, ich werds jetzt fix machen, jedoch muss ich jetzt jede Karte nochmals laden und in ein Div stecken, das dann eingeblendet wird wenn die entsprechenden Größe anzeigbar ist.

brandy · 08. Januar 2014 10:34

Ich hab jetzt noch eine Idee - Kann ich nicht das Div #inhaltx nehmen - dieses dann z.B. die Größe 940px x 400px zuweisen und innerhalb des containerx-div sowohl horizontal als auch vertikal zentriert positionieren?

Und das container-div sollte sich dann einfach in der Breite des Mediums anpassen!

Beitrag geändert von brandy (08. Januar 2014 10:59)

brandy · 11. Januar 2014 20:47

Keine gute Idee?

mike-r · 12. Januar 2014 14:13

Ich verstehe nicht, was du vorhast, funktioniert doch jetzt alles?

brandy · 13. Januar 2014 23:16

Ja in der großen Version funktioniert alles - ich hätte die Karte aber gerne responsive, deshalb meine Idee, das inhaltx-div mit der Karte im container-div zu zentrieren!

NaN · 13. Januar 2014 13:06

Du müsstest meiner Meinung nach bei dem DIV mit der ID "inhalt1" im Stylesheet die Eigenschaft width: 940px !important; rausnehmen.

brandy · 13. Januar 2014 18:34

Hab ich gerade getestet - da bin ich dann wieder gleich weit wie mit einer Breite von 100% - da funktionieren die Karten dann nicht mehr!

brandy · 18. Januar 2014 17:46

Ich habs ja schon mal mit den visibility-Classes von Foundation probiert!

Das Problem dabei war ja, dass das div eine id hat und diese dann drei mal ins Template eingefügt werden sollte und das dannn nicht funktioniert hat.

Hast du da vielleicht eine Idee wie ich das anstellen könnten.
Theoretisch könnte ich ja für alle Bildschirmgrößen eine Karte einfügen lassen und dann dementsprechend die Breite einstellen!

Vielen Dank für eure Hilfe!

brandy · 22. Januar 2014 10:36

Ich hab jetzt nochetwas ausprobiert - und zwar die media-queries von Foundation:
Foundation

Anscheinend kann er da aber nachträglich nichts mehr ändern - meint ihr, dass es damit funktionieren könnte?

brandy · 23. Januar 2014 09:16

Schaut mal, was die Leute von Foundation in der aktuellsten Version eingebaut haben:
Foundation

Ich muss jetzt noch checken, ob das mit Foundation 4 auch schon geht, bzw. ob ich das ganze irgendwie problemlos updaten kann...

Dancer62 · 29. August 2014 12:10

NaN schrieb:

Hier noch ein Beispiel: http://jsfiddle.net/KWX47/
Ist garnicht so kompliziert wie ich dachte.
Da wird auch nix doppelt geladen/gezeichnet.

Hab ich das jetzt richtig verstanden: ich kopiere den HTML-Code mit dem Editor direkt in meinen Inhalt, lege ein neues Stylesheet an und verbinde es mit meinem Template, speichere das JavaScript ab und referenziere es anschließend mittels

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="{root_url}/uploads/themes/.../js/jquery.openstreetmaps.js" ></script>

in meinem Template ?

Bei mir tut sich da leider nichts bis auf die Textausgabe... cry

Beitrag geändert von Dancer62 (29. August 2014 12:32)

NaN · 29. August 2014 13:11

Hab ich das jetzt richtig verstanden: ich kopiere den HTML-Code mit dem Editor direkt in meinen Inhalt

Fehler: Niemals HTML Code im Editor!
Never ever!
Das geht einfach nicht gut.

Entweder den Editor stattdessen für diese Seite immer deaktivieren (siehe Tab "Optionen"), und dann mit Copy & Paste ...
Oder den HTML-Code in einen globalen Inhaltsblock mit generell deaktiviertem Editor speichern und die Map dann mit {global_content name="Meine_Map"} im Inhalt einfügen.

ABER...

jsfiddle ist da bissle kompliziert/unübersichtlich, wenn man es nicht ständig verwendet.
Drei Dinge brauchst Du:
1. HTML Code (das sind die Tabs und die zugehörigen DIVs oben links)
2. Javascript (unten links - das muss noch in <script>...</script> Tags; UND links im Menü unter "External Ressources" das OpenLayers Script):

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
    map = new OpenLayers.Map("map1");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(11.9926, 51.4986).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);

    map = new OpenLayers.Map("map2");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(12, 52).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);


    map = new OpenLayers.Map("map3");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(11, 50).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);
</script>

3. die Stylesheets (oben rechts)

Dancer62 · 29. August 2014 17:40

Ich habe jetzt folgendes gemacht:

- Editor der Seite deaktiviert
- Code im Editor eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

<p>Falls Sie uns besuchen möchten, finden Sie uns hier:</p> 
<a href="#" onclick="document.getElementById('inhalt1').style.display = 'block';">Map 1</a>
<div id="inhalt1">
    <div id="map1" style="width:600px;height:400px;"></div>
</div>

(ich brauche erstmal nur eine Karte)
- Code im Template eingefügt:

Hier klicken, um den Code zum Kopieren zu markieren

<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
    map = new OpenLayers.Map("map1");
    var mapnik = new OpenLayers.Layer.OSM();
    map.addLayer(mapnik);
    var clonlat = new OpenLayers.LonLat(8.019120, 53.391230).transform( new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913") );
    var zoom = 12;
    map.setCenter(clonlat, zoom);
</script>

- Stylesheet mit

Hier klicken, um den Code zum Kopieren zu markieren

div.olControlAttribution {bottom:3px;}
    #inhalt {width:600px;height:400px;}
    li {display:inline-block;}

angelegt und mit meinem Template verknüpft.
- Seite aufgerufen und - nichts. Außer dem Link tut sich da gar nichts... sad

Wisst Ihr, warum ???

NaN · 29. August 2014 18:50

Wenn Du nur eine einzige Karte brauchst, dann bist Du hier verkehrt tongue
Dann kannst Du genausogut auch die iFrame-Lösung der jeweiligen Anbieter verwenden. Einfach GoogleMaps oder OpenStreetMap aufrufen, Kartenausschnitt wählen und dann die Funktionen zum Teilen/Einbetten auswählen.

Bei Google unten rechts auf das Zahnrad klicken und "Karte teilen und einbetten" und dann einfach im Tab "Einbetten" den iFrame-Code kopieren und in einem globalen Inhaltsblock einfügen.

Bei OpenStreetMap rechts auf das Viereck mit dem Pfeil ("Teilen") klicken, "HTML" wählen, kopieren und im globalen Inhaltsblock einfügen.

Den globalen Inhaltsblock dann einfach in den Inhalt der Seite einfügen, fertig.

Dancer62 · 29. August 2014 19:30

Danke - hat super geklappt.
"Willst du immer weiterschweifen ? Sieh, das Gute liegt so nah." (aus 'Erinnerungen', J.W. v. Goethe)

Dancer62 · 30. August 2014 10:45

NaN schrieb:

Fehler: Niemals HTML Code im Editor!
Never ever!
Das geht einfach nicht gut.

Vielleicht habe ich mich nur missverständlich ausgedrückt: ich habe den HTML-Code eingefügt, nachdem ich den Haken bei "HTML-Code anzeigen" gesetzt hatte. Dass es zu Problemen kommen kann, wenn ich HTML-Code in einen Text-Editor einfüge (der ja auch noch mit Textauszeichnungen arbeitet), kann ich mir durchaus vorstellen.

Forum für CMS/made simple

#51 06. Januar 2014 20:52

Re: [GELÖST] OpenStreetMap-Karte einbauen

#52 07. Januar 2014 22:44

Re: [GELÖST] OpenStreetMap-Karte einbauen

#53 08. Januar 2014 03:01

Re: [GELÖST] OpenStreetMap-Karte einbauen

#54 08. Januar 2014 08:01

Re: [GELÖST] OpenStreetMap-Karte einbauen

#55 08. Januar 2014 10:34

Re: [GELÖST] OpenStreetMap-Karte einbauen

#56 11. Januar 2014 20:47

Re: [GELÖST] OpenStreetMap-Karte einbauen

#57 12. Januar 2014 14:13

Re: [GELÖST] OpenStreetMap-Karte einbauen

#58 13. Januar 2014 23:16

Re: [GELÖST] OpenStreetMap-Karte einbauen

#59 13. Januar 2014 13:06

Re: [GELÖST] OpenStreetMap-Karte einbauen

#60 13. Januar 2014 18:34

Re: [GELÖST] OpenStreetMap-Karte einbauen

#61 18. Januar 2014 17:46

Re: [GELÖST] OpenStreetMap-Karte einbauen

#62 22. Januar 2014 10:36

Re: [GELÖST] OpenStreetMap-Karte einbauen

#63 23. Januar 2014 09:16

Re: [GELÖST] OpenStreetMap-Karte einbauen

#64 29. August 2014 12:10

Re: [GELÖST] OpenStreetMap-Karte einbauen

#65 29. August 2014 13:11

Re: [GELÖST] OpenStreetMap-Karte einbauen

#66 29. August 2014 17:40

Re: [GELÖST] OpenStreetMap-Karte einbauen

#67 29. August 2014 18:50

Re: [GELÖST] OpenStreetMap-Karte einbauen

#68 29. August 2014 19:30

Re: [GELÖST] OpenStreetMap-Karte einbauen

#69 30. August 2014 10:45

Re: [GELÖST] OpenStreetMap-Karte einbauen

Fußzeile des Forums