Maps werden nicht angezeigt, Javacript-Problem

Question

Hallo,

Ich habe mehrere Karten in meiner Homepage nach dieser Anleitung eingebunden: https://wiki.openstreetmap.org/wiki/DE:Karte_in_Webseite_einbinden

Die Karten wurden bis vor Kurzem immer angezeigt, jetzt aber nicht mehr. Offensichtlich gibt es Probleme mit den JavaScripts OpenLayers.js und OpenStreetMap.js

Laut meinem Provider können unsichere Elemente nicht geladen werden.

Answer 1

0

Klingt danach, als würde Deine Seite inzwischen über HTTPS laufen.

Dann musst Du nur die Angaben bzgl. der JS Dateien von http in https ändern im HTML Beispiel.

D.h.:

<script type="text/javascript" src="http://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="http://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script>

muss geändert werden in:

<script type="text/javascript" src="https://openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="https://www.openstreetmap.org/openlayers/OpenStreetMap.js">
</script>

Edit: Das Script von openlayers.org bitte ohne www. referenzieren, weil es sonst durch einen doppelten Redirect (https://www. -> http: -> https://) bei der Seite von openlayers.org zu einem Security Fehler (mixed active content) kommt, der das Javascript blockiert.

permanent link

answered 22 Jan '20, 16:50

Spiekerooger
3.1k●2●23●56
accept rate: 16%

edited 22 Jan '20, 23:01

Vielen Dank! Stimmt, meine Homepage wurde kürzlich auf https umgestellt. Die Javascripts auf src="https://... zu ändern, hatte ich schon ausprobiert, gerade noch mal. Aber leider kein Erfolg.

(22 Jan '20, 17:02) guenter-pilger

Im OpenStreetMap.js sind die opencyclemap tiles noch über http referenziert. Du könntest einfach die OpenStreetMap.js in Deinen Webhost kopieren und entsprechend referenzieren und in der Datei die http in https ändern.

(22 Jan '20, 17:08) Spiekerooger

Zudem müsstest Du die Tile-URLs auch anpassen, da sie für https nur über thunderforest laufen (einen API-Key wirst Du dort auch brauchen). Wobei das nur gilt, falls Du die Mapstile OpenCycle oder Transport verwendest. Für den OSM Standard Stil sollte es kein Problem machen.

(22 Jan '20, 17:14) Spiekerooger

Vielen Dank!

In der OpenStreetMap.js (in meinem Webspace) habe ich alles auf https gesetzt und das Script in der Karten.htm entsprechend adressiert. Das funktioniert nicht.

Den letzten Absatz habe ich möglicherweise nicht richtig verstanden. API-Key?

Zudem verhindert das Einstellen des Scripts in meinen Webspace eine Aktualisierung dieser Datei.

(22 Jan '20, 19:04) guenter-pilger

Nutzt Du denn den OpenStreetMap Stil oder den Transport oder Cyclemap Stil aus der OpenStreetMap.js?

Am Hilfreichsten wäre einmal ein Link auf die Seite/Unterseite, wo Du die Karte einbindest, dann kann man da schneller den Fehler finden.

(22 Jan '20, 20:15) Spiekerooger

Deine Frage kann ich mangels Fachwissen nicht beantworten.

Aber hier gerne die aufrufende Seite. Link auf Button "Landkarte" https://www.guenter-pilger.de/Alpspitze.htm

Die Kartenseite (nicht angepasst) https://www.guenter-pilger.de/OSM/alpspitze.htm

Angepasst die Kartenseite: https://www.guenter-pilger.de/TEST/alpspitze.htm

Die Kartenseiten lassen sich natürlich direkt ohne die Hauptseite aufrufen.

(22 Jan '20, 20:33) guenter-pilger

@guenter-pilger: Bitte antworte auf Nachfragen mit Hilfe der Kommentarfunktion, nicht als neue Antwort zu deiner Ursprungsfrage.

(22 Jan '20, 20:42) TZorn

Ich habe die Antwort oben editiert.

https://www.openlayers.org darf nicht verwendet werden, stattdessen bitte https://openlayers.org verwenden.

Da ist bei openlayers.org leider ein suboptimaler Redirect drin.

Allgemein sollte man sowieso am Besten die openlayers.js selbst hosten. (Oder notfalls die bei openlayers.org angegebene cdn URL von jsdelivr.net).

(22 Jan '20, 23:00) Spiekerooger

Vielen Dank, das funktioniert jetzt so! Nur die Textfelder scheinen mir jetzt viel größer geworden zu sein als vorher oder täusche ich mich da?

(23 Jan '20, 08:34) guenter-pilger

In der OSM/tom.js hast Du:

feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(100,20) } );

In der TEST/tom.js hast Du:

feature.popupClass = OpenLayers.Class(OpenLayers.Popup.FramedCloud, {minSize: new OpenLayers.Size(300,180) } );

D.h.: wenn Du wieder die OSM/tom.js verwendest oder die Zeile in der TEST/tom.js änderst, werden die Textfelder kleiner.

(23 Jan '20, 08:57) Spiekerooger

In meinem TEST-Ordner war ein falscher Eintrag für die map.css drin. link href="map.css"

Jetzt ist alles in Ordnung. Nochmals vielen Dank für deine Hilfe!

(23 Jan '20, 09:19) guenter-pilger

showing 5 of 11 show 6 more comments

Maps werden nicht angezeigt, Javacript-Problem

Follow this question

Related questions