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

#26 20. Dezember 2013 15:42

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Das bloße Verwenden der API reicht nicht aus.
Man kann aber das Neuzeichnen der Karte über die API anstoßen.
Und das geht eben nicht, wenn man nur das iFrame verwendet.
(kommt ja von einer anderen Quelle)

Läuft am Ende darauf hinaus, dass die Karte immer zweimal gerendert werden muss.
D.h. ich würde entweder auf diese Tabs verzichten, oder die Karte erst laden/zeichnen, wenn der Tab-Inhalt angezeigt werden soll. (Performance und so...)

Offline

#27 21. Dezember 2013 23:09

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

NaN schrieb:

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

Das bloße Verwenden der API reicht nicht aus.
Man kann aber das Neuzeichnen der Karte über die API anstoßen.
Und das geht eben nicht, wenn man nur das iFrame verwendet.

Werfen wir da jetzt 3 Sachen durcheinander? Google-api, OSM-Frame und Openlayers-"api"?


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

Offline

#28 21. Dezember 2013 17:20

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Also ich meinte eigentlich OpenLayers API.
Aber bei GoogleMaps soll ja das gleiche Problem sein.
Mir sind die Probleme bisher weder bei OSM noch bei GoogleMaps aufgefallen.
Hatte dieses Szenario einfach noch nicht.
Kann da nur das beisteuern, was ich über Recherchen im Netz finde.
Das hier war das erste was mir aufgefallen war:
http://stackoverflow.com/questions/1076 … bbed-panel
Da geht's zwar um Twitters Bootsrap, aber eben auch um Maps in Tabs.
Die Idee ist, die Karte neuzuzeichnen, sobald sich die Größe des Containers ändert, der die Karte beinhaltet.

Dadurch wird die Karte aber immer zweimal gezeichnet. Einmal falsch (was man nicht sieht) und einmal richtig, wenn man den Tab öffnet. Das erste Mal könnte man sich doch sparen, wenn man die Karte eh noch nicht sieht, oder?

Nehme ich die iFrame-Lösung und ändere per Javascript beim Aktivieren eines Tabs das src-Attribut (z.B. einfach die aktuelle URL speichern, dass Attribut leeren und wieder mit der aktuellen URL füllen), wird die Karte zweimal geladen und zweimal gezeichnet.

Spielt also keine Rolle, welche Lösung man nimmt, das Problem gibt es scheinbar bei allen dreien.

Offline

#29 21. Dezember 2013 19:30

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

NaN schrieb:

Also ich meinte eigentlich OpenLayers API.

Ich hab jetzt mal noch ein weiteres Testcase gebaut über Openlayers:
http://nopaste.info/c691ef7382.html
Problem dabei: es ist recht schludrig aus vorhandenem Code zusammengeklickert und funktioniert noch nicht ganz wie gewollt (kaum Ahnung von JS):
- Map1 keine Ahnung, wie ich die als "standard" setzen kann (sieht man im Code und in der Funktionsweise gut, was ich meine)
- die Maps sind alle da, aber man kann nich rumschieben und zoomen (ka, was das wieder is). Nach- oder neugeladen wird da trotzdem nix.

Andere Methode:
http://nopaste.info/18766109a3.html funktioniert alles - muss man sich nur noch das Tabbing dazupfriemeln und das JS auf Wechsel umschreiben.

€: Jetz 'n Schnaps smile (777. Beitrag)

Beitrag geändert von mike-r (21. Dezember 2013 19:32)


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

Offline

#30 22. Dezember 2013 11:39

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

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

Offline

#31 22. Dezember 2013 14:37

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Perfekt!


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

Offline

#32 23. Dezember 2013 07:31

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Hört sich ganz gut an!
Was bedeutet das ESPG im Javascript, bzw. wo kommt das her?

Offline

#33 23. Dezember 2013 17:03

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

Re: [GELÖST] OpenStreetMap-Karte einbauen


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

Offline

#34 25. Dezember 2013 14:19

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Danke :-)

Ich werd mich heute noch ans einbauen deines Vorschlags machen - ich melde mich sobald ich etwas zu Wege gebracht habe!

Danke vorerst mal!

Offline

#35 27. Dezember 2013 23:52

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Hallo!

Eingebaut hab ich das ganze jetzt mal - Link
Ich versteh nicht ganz wem ich "inhalt1" und "map1" zuweisen muss, sodass das ganze funktioniert?

Vielen Dank!

Offline

#36 30. Dezember 2013 10:53

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Kann mir hierzu vielleicht noch jemand kurz helfen?

Vielen Dank!

Offline

#37 30. Dezember 2013 15:21

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Es funktioniert doch? Du musst nur noch innerhalb der #inhalte die #maps hinzufügen.


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

Offline

#38 30. Dezember 2013 21:13

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Tut mir leid - ich hab heute Nachmittag etwas ausprobiert - hab deshalb einen anderen Code eingebaut gehabt - dort hat es funktioniert!
Jetzt hab ich wieder deinen Vorschlag eingebaut - sieh mal hier:
Link

Beitrag geändert von brandy (30. Dezember 2013 21:44)

Offline

#39 01. Januar 2014 14:04

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Gutes neues Jahr!

@mike-r: Jetzt hab ich deinen Code eingebaut und die beiden Divs angelegt, die benötigt werden - was hab ich noch vergessen?
Vielen Dank!

Offline

#40 02. Januar 2014 14:27

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Drei OSM-Karten sind jetzt eingebaut!
Vielen Dank mal dafür!

Hier nochmal ein Link: Link

Da dies jetzt funktioniert hätte ich noch zwei Fragen:

#1: Bekommt man die Karte responsive, zB so dass der Marker immer zentriert im umgebenden Div platziert ist?

#2: Wie kann ich den Layer "Humanitarian" verwenden. Im Quelltext von OSM hängt dieser als "layer=H" an den Koordinaten dran.

Mein momentaner Code für die Karte sieht so aus:

    map = new OpenLayers.Map("inhalt2");
    map.addLayer(new OpenLayers.Layer.OSM());
 
    var lonLat = new OpenLayers.LonLat(15.6856,47.1005)
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            map.getProjectionObject() // to Spherical Mercator Projection
          );
 
    var zoom=15;
 
    var markers = new OpenLayers.Layer.Markers( "Markers" );
    map.addLayer(markers);
 
    markers.addMarker(new OpenLayers.Marker(lonLat));
 
    map.setCenter (lonLat, zoom);

Danke!

Beitrag geändert von brandy (02. Januar 2014 15:44)

Offline

#41 02. Januar 2014 20:26

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

brandy schrieb:
[...]
    map.setCenter (lonLat, zoom);

Hier müsste statt lonlat die Adresse des Markers stehen. Ungetestet: http://trac.osgeo.org/openlayers/wiki/O … .setCenter

Wegen Hot: probier mal statt

map.addLayer(new OpenLayers.Layer.OSM("hot"));

:

map.addLayer(new OpenLayers.Layer.OSM("Humanitarian Style"));

Wenn das nicht geht, musst Du wahrscheinlich den Tileserver noch definieren, wie das geht kannst Du hier abschreiben:
http://harrywood.co.uk/maps/examples/op … .view.html


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

Offline

#42 03. Januar 2014 23:09

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Vielen Dank!

Punkt 1:
hab ich noch nicht ausführlich genug getestet - hat jetzt so noch nicht funktioniert, werd ich mir aber morgen nochmal ansehen.

Punkt 2:
Die ersten beiden Varianten funktionieren nicht - leider sad
Danach hab ich diesen hier noch eingebaut:

map.addLayer(new OpenLayers.Layer.OSM("Humanitarian Style",                                                   
                                           ["http://a.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png",
                                            "http://b.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png",
                                            "http://c.tile.openstreetmap.fr/hot/${z}/${x}/${y}.png"],
                                            {attribution: "© <a href='http://www.openstreetmap.org/'>OpenStreetMap</a> and contributors, under an <a href='http://www.openstreetmap.org/copyright' title='ODbL'>open license</a>. Humanitarian style by <a href='http://hot.openstreetmap.org'>H.O.T.</a>",
                                            "tileOptions": { "crossOriginKeyword": null }}));

Muss ich da sonst noch wo was geben, damit das funktioniert?
Vielen Dank!

Offline

#43 05. Januar 2014 14:34

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Habs jetzt nochmals wegen Punkt 1 geschaut:
Hab den vorgeschlagenen Tag

map.setCenter(new OpenLayers.LonLat(17.99,59.3),10);

eingebaut.
Zentriert hat sich das ganze aber danach nicht!

Vielen Dank!

Offline

#44 05. Januar 2014 15:04

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Mach doch mal ne Kopie von der Seite und lass Deine Änderungen auch drin, dass man sehen kann was schiefläuft, momentan hast Du weder die Definitionen vom HOT-Tileserver drin noch das mapcenter(url)


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

Offline

#45 05. Januar 2014 21:11

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

So,hab nun alles eingebaut.

Interessanterweise ignoriert er mir im Quelltext den Bereich mit den Tiles - habs so eingebaut wie in meinem vorletzten Beitrag!

Offline

#46 05. Januar 2014 22:23

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Zum fixieren der Zentrierung kann ich nichts weiteres zu sagen, ist sicherlich zielführender da im OSM-Forum/ oder auf der Mailingliste/ oder im IRC mal zu fragen. (Ich weiss aber, dass man es hinbekommt, da es bei "laufenden" GPXen auch "irgendwie" geht, siehe: http://www.netzwolf.info/kartografie/op … player.htm )

Zum Tile-server: solang Du das nicht in Deinen Code bekommst, wird es nicht funktionieren wink
Cache schon gelöscht? {literal} etc auch drumgebaut?

Ich hab mit dem oben auch von Dir zitierten HOT-Code (von Harrywood) das gerade mal in ner Single-datei getestet, und das geht prima.


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

Offline

#47 06. Januar 2014 01:38

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Das mit dem Tile-Server funktioniert jetzt - ich hab das {literal} an anderer Position hingestellt...
Vielen Dank!

Das mit dem Zentrieren werd ich dort nachfragen!
Danke mal für deine Hilfe!

Offline

#48 06. Januar 2014 10:58

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Ok, ich hab gestern Nacht und heute früh nochwas ausprobiert:
Ich hab die width von Map-umgebenden Div auf 100% gestellt. Dann baut er mir die Karte so ein, dass sie auch beim Verkleinern in der Mitte bleibt (so wie es sein soll) - Leider aber nur bei der ersten Karte. Die beiden anderen sind dann zu kurz und etwas verschoben - ich habs jetzt mal so drinnengelassen damit ihr es sehen könnt.

Interessanterweise passt sich das ganze an sobald ich Firebug öffne - somit kann ich nicht ganz nachvollziehen was da nicht funktioniert.

Vielleicht sagt es euch was...
Danke!

[EDIT]
Nochwas ist interessant:
Geht man zB auf den zweiten Tab - die Karte wird zu klein dargestellt - verkleinert man nun das Browserfenster und vergrößert man es wieder, passt es auf einmal - muss ich da nochwas zum Zeitpunkt des Klicks laden?

Beitrag geändert von brandy (06. Januar 2014 13:23)

Offline

#49 06. Januar 2014 15:42

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

brandy schrieb:

Ok, ich hab gestern Nacht und heute früh nochwas ausprobiert:
Ich hab die width von Map-umgebenden Div auf 100% gestellt. Dann baut er mir die Karte so ein, dass sie auch beim Verkleinern in der Mitte bleibt (so wie es sein soll) -

Das täuscht. Wenn man mit Scrollrad verkleinert verschiebt sich die Karte von der Maus weg. Zoomen mit dem Plus sollte eigentlich die Karte auch so bleiben. Das habe ich mir bei den kleinen Karten garnicht angeschaut ich zoome immer mit dem Scrollrad

Leider aber nur bei der ersten Karte. Die beiden anderen sind dann zu kurz und etwas verschoben

Liegt sicherlich daran, dass nirgendwo feste Breiten angegeben sind. Beim Laden der Seite "wissen" die unsichtbaren Karten noch nicht (bzw. rechnen einen falschen Wert) was 100% sind. Abhilfe sollte schaffen hier feste Pixelwerte anzugeben; die Seite hat eh eine starre Breite von 960px, da kann man eigentlich nix kaputtmachen.


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

Offline

#50 06. Januar 2014 18:39

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

Re: [GELÖST] OpenStreetMap-Karte einbauen

Ok danke!

Ich hab jetzt mal im Foundation-Forum nachgefragt ob die dazu schon eine Lösung haben.
Ich meld mich falls ich was weiß...
Notfalls bleibt mir noch das Openstreetmap-Forum!

Offline