Du bist nicht angemeldet. Der Zugriff auf einige Boards wurde daher deaktiviert.

#51 06. Januar 2014 20:52

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#52 07. Januar 2014 22:44

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Offline

#53 08. Januar 2014 03:01

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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.


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#54 08. Januar 2014 08:01

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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.

Offline

#55 08. Januar 2014 10:34

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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)

Offline

#56 11. Januar 2014 20:47

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

Keine gute Idee?

Offline

#57 12. Januar 2014 14:13

mike-r
CMS/ms-Profi
Registriert: 21. Dezember 2010
Beiträge: 898
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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


Unablässige Tools für's Webdevelopement/ Fehlerfindung: CSS Validierungsservice, Bildschirmlineal, Firebug, Tidy, Deutsche CSS-Referenz

Offline

#58 13. Januar 2014 23:16

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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!

Offline

#59 13. Januar 2014 13:06

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.194

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Offline

#60 13. Januar 2014 18:34

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Offline

#61 18. Januar 2014 17:46

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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!

Offline

#62 22. Januar 2014 10:36

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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?

Offline

#63 23. Januar 2014 09:16

brandy
Server-Pate
Registriert: 05. Juni 2011
Beiträge: 710
Webseite

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Offline

#64 29. August 2014 12:10

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 380

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

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


Man ist so alt, wie man sich fühlt...

Offline

#65 29. August 2014 13:11

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.194

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

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

Offline

#66 29. August 2014 17:40

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 380

Re: [GELÖST] OpenStreetMap-Karte einbauen

Ich habe jetzt folgendes gemacht:

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

<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:

<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

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 ???


Man ist so alt, wie man sich fühlt...

Offline

#67 29. August 2014 18:50

NaN
Moderator
Ort: Halle (Saale)
Registriert: 09. November 2010
Beiträge: 4.194

Re: [GELÖST] OpenStreetMap-Karte einbauen

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.

Offline

#68 29. August 2014 19:30

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 380

Re: [GELÖST] OpenStreetMap-Karte einbauen

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


Man ist so alt, wie man sich fühlt...

Offline

#69 30. August 2014 10:45

Dancer62
Server-Pate
Ort: 26345 Bockhorn, Niedersachsen
Registriert: 08. November 2013
Beiträge: 380

Re: [GELÖST] OpenStreetMap-Karte einbauen

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.


Man ist so alt, wie man sich fühlt...

Offline