Openlayers Beispiel aus dem OSM Wiki funktioniert nicht

Im OSM-Wiki ist ein Openlayers Beispiel aufgeführt. Ich habe jetzt die dort aufgeführte “beispielkarte.html” und “beispiel.gpx” erzeugt und letztere hier hochgeladen. Letztere wird bei DragnDrop in JOSM angezeigt.

Sehe ich es richtig, dass jetzt beim Öffnen der “beispielkarte.html” der GPX Track in der OSM-Karte angezeigt werden sollte? Tatsächlich sehe ich im Firefox, Edge und Opera Browser nur die Karte mit einem Pointer an der in der html Datei spezifizierten Koordinate.

Mich verwundert, dass in der html Datei kein Pfad auf die “beispiel.gpx” Datei genannt werden muss. Ist da eine Suchfunktion eingebaut?

Bitte beachte, dass die OpenLayers-Version, die Du extern lädst, uralt ist, es ist die Version 2.13.1 und der Hinweis von Nakaner in https://wiki.openstreetmap.org/wiki/Ope … er_example ist eindeutig: solltest Du nicht mehr benutzen. Diese Version wird nicht mehr gepflegt und der Beispielcode funktioniert nicht mit einer aktuellen Version von OpenLayers. Da gab es wohl bei Version 3.0.0 einen kompletten “Neustart”.

Nein, keine Suchfunktion! Mit Deiner Angabe

beispiel.gpx 

muss sich die gpx-Datei im gleichen Ordner befinden, wie Deine beispielkarte.html.
Ich persönlich würde Dir, wenn Du da ganz neu bist, raten, stattdessen die Bibliothek leaflet zu verwenden.

Gerade gesehen: Die Warnung steht nicht bei jedem Beispiel. Aber hier Openlayers POI layer example - OpenStreetMap Wiki

Hallo,

das Beste wäre, die alten OpenLayers-Beispiele, die noch auf OpenLayers 2 basieren, zu löschen, damit sie aus Suchindexen verschwinden und niemanden mehr in die Irre führen.

Viele Grüße

Michael

1 Like

Hallo,

ich hab’ die Beispieldatei für den GPX-Track für die Verwendung von leaflet und dem Plugin leaflet-omnivore modifiziert:

<!DOCTYPE html>
<html>
<head>
	<!-- 
        Source: http://wiki.openstreetmap.org/wiki/Openlayers_Track_example 
                Modifiziert zur Verwendung von leaflet statt OpenLayers-
    
        Hinweis: Die Anzeige des Tracks funktioniert ausschließlich, wenn diese HTML-Datei
                 über einen Webserver aufgerufen wird.
    -->
	<title>Simple OSM GPX Track</title>
	<!--  Leaflet javascript libraries
	 	 Wir binden die  Bibliothek direkt aus dem Internet ein, 
	 	 die Dateien können bei Bedarf aber auch lokal abgespeichert werden)
 	 -->
	 <meta charset="utf-8" />
	
	 <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
	 <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>	 <link rel="stylesheet" href="Control.FullScreen.css" />
     <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/leaflet-omnivore/v0.3.1/leaflet-omnivore.min.js'></script>
 
</head>
<body>
	<!-- define a DIV into which the map will appear. leaflet needs a defined height -->
	<div style="height:600px; width:90%" id="map"></div>

    <script>
        // Imitialisiere das Map-Objekt mit Startposition auf der Karte und Zoom-Stufe 
	    var map = new L.map('map').setView([47.52, 7.571726], 12);

        // Füge einen Tile-Layer hinzu
		L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
			maxZoom: 19,
			attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
		}).addTo(map);

        // Füge den GPX-Track hinzu 
        var gpxtrack = omnivore.gpx('beispiel.gpx')
            .on('ready', function() {
            map.fitBounds(gpxtrack.getBounds());
        }).addTo(map);
	</script>

</body>
</html>

Screenshot:

Zu beachten:

  • Bei diesem einfachen Beispiel muss sich die GPX-Datei im gleichen Verzeichnis befinden, wie die HTML-Datei.
  • Der GPX-Track wird nur angezeigt, wenn die HTML-Datei über einen Webserver aufgerufen wird, beim Aufruf über den Explorer (finder, …) schlägt der Aufruf von omnivore fehl, in den Entwicklertools, hier Chrome, kann man die Fehlermeldung lesen:
Access to XMLHttpRequest at 'file:///C:/Test/beispiel.gpx' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
1 Like

Ich habe die Beschreibung so zusammengekürzt, dass nur noch das erwähnt wird, was damit funktioniert. Damit hat der Nicht-Webentwickler und einfache OSM-Mapper die Möglichkeit, die von ihm mitgeschaffene Karte auf html Basis zu erzeugen und weiß somit, wie man sie in eine Website einbetten kann. Denn nichts frustriert mehr, als wenn man bemerkt, dass nur andere die eigenen Beiträge nutzen können aber man selbst nicht. Die Erkenntnis könnte dazu führen, zukünftig nicht mehr zu mappen. Solange es für ihn kein verstehbares Beispiel mit der aktuellen Version gibt, ist ein schlechtes aber funktionierendes Beispiel mit einer alten Version besser als gar keines. Und die Beschreibung führt jetzt nicht mehr in die Irre, sondern funktioniert auch.

Erst einmal recht vielen Dank für Deine Arbeit. :o)

Ich fürchte nur, dass gerade die Anfänger, an die sich der hier im Fokus stehende Artikel richtet, in der Regel keinen Zugriff auf einen Webserver haben. Im Wiki-Artikel wird erklärt, mit welchem Editor man eine Textdatei öffnen, diese mit der Endung html versehen und den Text reinkopieren soll. Wenn man sich Webspace gemietet hat, wird man schon deutlich schwierigere Probleme gemeistert haben. Das fängt schon mit der Unmenge von Technobabble an, mit der man bei der Auswahl eines solchen zugekippt wird. Sicherlich könnte man im Artikel einen Link explizit für solche User mit Zugriff auf Server einbinden. Die Lösung ist aber kein Ersatz für den hier in Frage stehenden allerblutigsten Anfänger ohne Zugriff auf Webserver. Ich würde einen neuen Wiki-Artikel draus machen.

Lieber @Tirkon,

OpenLayers 2 zu verwenden ist keine Lösung für einen “allerblutigsten Anfänger”. Dieser sollte zuallerst die entsprechende Warnung in der Übersichtsseite lesen und beherzigen:

Dieser hypothetische Anfänger sollte also mit leaflet anfangen und OpenLayers 2 auf dem Abstellgleis lassen, auf dem es sich befindet. Ich unterstütze @Nakaner darin, dass diese Beispiele allesamt aus dem Wiki verschwinden sollten, damit sich solche Anfänger gar nicht mehr damit herumschlagen.

Zum Webserver.
Viele Javascript-Aufrufe funktionieren nicht, wenn die enthaltende Datei über das Dateisystem aufgerufen wird (z.B. Doppelklick im Windows Explorer). Einen lokalen Webserver auf dem eigenen Rechner zu nutzen, löst viele dieser Probleme. Für die einfachen Beispiele hier reicht zum Beispiel unter Windows der TinyWeb aus.
Alternativen wären das Aktivieren des in Windows enthaltenen Webservers (IIS) oder z.B. XAMPP (das es auch in einer portablen Version gibt).

(Unter Linux und MacOS dürfte standardmäßig ein Webserver installiert sein …)

In der englischen Version des von Dir genutzten (und geänderten) Wiki-Artikels wird der Webserver als Voraussetzung genannt - und es werden Alternativen (von 2011) aufgeführt. In einem eventuellen neuen Übersichtsartikel, der sich nicht mehr auf OpenLayers 2 bezieht, könnten die drei, vier Schritte, um tinyweb zum Laufen zu bringen, erklärt werden.

Also tu Dir bitte einen Gefallen - und lasse OpenLayers 2 in Frieden ruhen. Folge der Empfehlung und nutze leaflet.

PS: Das Beispiel DE:Openlayers POI layer example - OpenStreetMap Wiki funktioniert übrigens nicht von der lokalen Festplatte, die leaflet-Variante dagegen schon :wink:

Tirkon
January 16

Vinzenz_Mai:

ich hab’ die Beispieldatei für den GPX-Track für die Verwendung von leaflet und dem Plugin leaflet-omnivore modifiziert:

Erst einmal recht vielen Dank für Deine Arbeit. :o)

Ich fürchte nur, dass gerade die Anfänger, an die sich der hier im Fokus stehende Artikel richtet, in der Regel keinen Zugriff auf einen Webserver haben.

kommt wohl drauf an. Eigentlich muss man nur diesen Befehl eingeben:

python3 -m http.server

und hat dann einen lokalen Webserver mit root in dem Verzeichnis, wo man es aufgerufen hat. Meintest Du das?

Alternativ kann man glaube ich auch über about:config (im Fall von Firefox) das CORS ausschalten, das würde ich aber eher nicht empfehlen, weil man sonst nicht vergessen sollte, es wieder anzuschalten.

Das fängt schon mit der Unmenge von Technobabble an, mit der man bei der Auswahl eines solchen zugekippt wird.

für solche Nutzer gibt es UMAP oder Wordpress plugins und ähnliches. Die Lösung hier richtet sich eher nicht an solche “blutigen Anfänger” denen man erklären muss, was ein Browser ist.

Ich habe nicht im Geringsten etwas dagegen, “OpenLayers 2 in Frieden ruhen” zu lassen. Bloß sollte man den zweiten Schritt nicht vor dem ersten tun. Man sollte überlegen, ob man etwas löscht, wofür man keine Ersatzlösung hat. Im Einzelnen:

Mit der inzwischen von mir angepassten Beschreibung des im Anfangsposting genannten Artikels kann der Anfänger ganz einfach eine Karte im html Format erstellen für jeden Punkt der Erde in jeder gewünschten Zoomstufe. Er braucht keinen Webserver und muss nur drei Parameter ändern. Wenn mich jemand fragt, wie er einen ersten Gehversuch in html machen kann, dann kann ich ihm diesen Artikel nennen, in dem er nur drei Parameter ändern muss. Warum willst Du mir die Möglichkeit nehmen, diese Frage nach Jahren der Suche endlich zu beantworten, indem Du den einzig für diese Leute umsetzbaren Artikel aus dem OSM-Wiki löschen willst?

Du sagst, leaflet sei einfacher und man solle es daher verwenden. Das Problem: Ich sehe keinen Wikiartikel mit einer leaflet-Lösung, bei der nur drei Parameter zu ändern sind, um das Gleiche zu erreichen. Solange das so ist, brauche ich den genannten Artikel als Antwort auf die Frage. Für alle anderen Beispiel-Artikel zu OpenLayers 2 habe ich keine Verwendung.

Von den von Dir als “hypothetisch” bezeichneten Usern gibt es in Deutschland über 83 Millionen. Sie besuchen regelmäßig einen Supermarkt, bei dem bei uns die Öffnungszeiten fehlen. Sie arbeiten bei einem Malerbetrieb, fahren jeden Tag durch eine 30er Zone, spazieren oder radeln regelmäßig über einen Weg, kennen jede Hausnummer in Ihrer ländlichen Siedlung und befahren mit ihrem Boot Gräben und kleine Kanäle, die allesamt in OSM noch nicht existieren. Wenn es von diesen hypothetischen Leuten pro viertel Quadratkilometer einen gäbe, der regelmäßig dasjenige mappt und aktualisiert, an dem täglich vorbeiläuft, könnten wir mit der Kartenqualität auch in der Fläche endlich an Google Maps anschließen.

Ich treffe manche von diesen Leuten unhypothetisch auf dem OSM Stand beim Chaos Communication Congress, an dem ich rund 12 Stunden täglich Fragen beantworte. Oder ich vermittle an einen anwesenden Spezialisten, beispielweise vom HOT Projekt, unsere Foundation Angestellte, den Kartendruckspezialisten oder an unseren Forumsmoderator Nakaner, bei dem kaum eine Frage unbeantwortet bleibt. Ich treffe die Leute zudem beispielsweise auf Mitgliederversammlungen von Angler-, Radler- Wander-, und Wassersportvereinen, die ich besuche, um Werbung für OSM zu machen.

Und es taucht auch mal der gar nicht hypothetische Wunsch auf, trotz der Existenz von umap etc. selbst eine OSM Karte in html darzustellen. Ich muss den Leuten dann sagen: “Tut mir leid, aber die einfachste Beschreibung, bei der ihr nur drei Parameter hättet ändern müssen, wurde ersatzlos aus dem Wiki gelöscht.”

1 Like

wozu braucht der Anfänger denn eine Karte “im html Format” wenn er keinen Webserver hat?

Der Sinn von html ist doch, Informationen mittels eines Webservers anderen zugänglich zu machen.

@Tirkon,

neuer Versuch, Dich zu erreichen - und vielleicht finde ich die Energie das ins Wiki einzufügen.

Einbinden von OSM-Karten in eine HTML-Datei

Um eine OSM-Karte in eine HTML-Datei einzubinden, werden Javascript-Bibliotheken wie zum Beispiel leaflet oder OpenLayers verwendet.

Typischerweise will man die Karte in einer gewünschten Zoomstufe anzeigen und an einem bestimmten Punkt (Geographische Länge und Breite) zentrieren.

Bitte beachten::
Beim Aufruf direkt von der Festplatte unterliegt Javascript Einschränkungen, die sich von Browser zu Browser und sogar von Version zu Version unterscheiden können. Das gilt ganz besonders für den Zugriff auf Dateien.
Das führt gerne zu “Beispiel xyz aus dem OSM-Wiki funktioniert nicht”

Basisbeispiele mit leaflet:

  • Karte laden und zentrieren
  • Karte mit Marker und um die Markerposition zentriert
  • Karte mit Marker, der mit einem Popup ausgestattet ist

Ich hoffe, meine Beispiele sind anfängertauglich.

Zu tun:

  1. Laden der beiden erforderlichen Leaflet-Dateien
  2. Zielelement, in dem die Karte dargestellt werden soll
  3. Gewünschte Position und Zoomstufe (das einzige, was angepasst werden muss)
  4. Erstellen des Map-Objektes mit gewünschter Zentrierung und Zoomstufe
  5. Laden der Kartenkacheln (hier gilt es die Tile Usage Policy zu beachten - unabhängig von der Javascript-Bibliothek)

und für die zwei weiteren Beispiele

  1. Marker hinzufügen
  2. Marker mit einem Popup ausstatten (Popup-Text ist ebenfalls anzupassen)
Code der Beispieldatei
<!DOCTYPE html>
<html>

<head>
    <title>Einfache OSM-Karte</title>
     <meta charset="utf-8" />

    <!-- erforderliche leaflet-Dateien -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

</head>

<body>
    <!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
    <div style="height:600px; width:100%" id="map"></div>

        <script>
        // folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
        var long = 6.96147;     // Längenangabe
        var lat = 49.229018;    // Breitenangabe
        var zoom = 13;          // Zoomstufe

        // Erzeuge ein Map-Objekt  an der gewünschten Position und in der gewünschten Zoomstufe
        var map = new L.map('map').setView([lat, long], zoom);
   
        // und füge einen Tile-Layer hinzu
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

    </script>

</body>
</html>

Marker hinzufügen:
Füge hinter den Tile-Layer folgende Anweisung ein.

var marker = L.marker([lat, long]).addTo(map);
Code der Beispieldatei mit Marker
<!DOCTYPE html>
<html>

<head>
    <title>Einfache OSM-Karte mit Marker</title>
     <meta charset="utf-8" />

    <!-- erforderliche leaflet-Dateien -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

</head>

<body>
    <!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
    <div style="height:600px; width:100%" id="map"></div>

        <script>
        // folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
        var long = 6.96147;     // Längenangabe
        var lat = 49.229018;    // Breitenangabe
        var zoom = 13;          // Zoomstufe

        // Erzeuge ein Map-Objekt  an der gewünschten Position und in der gewünschten Zoomstufe
        var map = new L.map('map').setView([lat, long], zoom);
   
        // und füge einen Tile-Layer hinzu
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

         // Marker im Zentrum einfügen
         var marker = L.marker([lat, long]).addTo(map);

    </script>

</body>
</html>

Der Marker kann ganz einfach mit einem Popup ausgestattet werden, das beim Draufklicken erscheint:
Ergänze

 marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup;

(Text selbstverständlich nach eigenem Bedarf konfigurieren)

Code der Beispieldatei mit Marker, der mit einem Popup ausgestattet ist
<!DOCTYPE html>
<html>

<head>
    <title>Einfache OSM-Karte mit Marker, der mit einem Popup ausgestattet ist</title>
     <meta charset="utf-8" />

    <!-- erforderliche leaflet-Dateien -->
     <link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.3/dist/leaflet.css" integrity="sha256-kLaT2GOSpHechhsozzB+flnD+zUyjE2LlfWPgU04xyI=" crossorigin="" />
     <script src="https://unpkg.com/leaflet@1.9.3/dist/leaflet.js" integrity="sha256-WBkoXOwTeyKclOHuWtc+i2uENFpDZ9YPdf5Hf+D7ewM=" crossorigin=""></script>

</head>

<body>
    <!-- DIV-Element, in dem die Karte angezeigt werden soll, mit definierter Höhe -->
    <div style="height:600px; width:100%" id="map"></div>

        <script>
        // folgende drei Werte an die eigenen Wünsche anpassen (hier Saarbrücken, Deutsch-Französischer Garten in Zoomstufe 13)
        var long = 6.96147;     // Längenangabe
        var lat = 49.229018;    // Breitenangabe
        var zoom = 13;          // Zoomstufe

        // Erzeuge ein Map-Objekt  an der gewünschten Position und in der gewünschten Zoomstufe
        var map = new L.map('map').setView([lat, long], zoom);
   
        // und füge einen Tile-Layer hinzu
        L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
            maxZoom: 19,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
        }).addTo(map);

         // Marker im Zentrum einfügen
         var marker = L.marker([lat, long]).addTo(map);
         // 
         marker.bindPopup("Nordeingang, Deutsch-Französischer Garten").openPopup;

    </script>

</body>
</html>

Diese Beispiele enthalten keine Dateizugriffe, funktionieren auch direkt von der Festplatte.
Sie entsprechen dem, was Du in das OpenLayers-Beispiel für das “OpenLayers Track Example” geschrieben hast - Du benötigst ja gar keine Anzeige eines GPX-Tracks.

Ich vermute, um auszuprobieren, wie das aussieht.

Beim Aufruf direkt von der Festplatte unterliegt Javascript Einschränkungen, die sich von Browser zu Browser und sogar von Version zu Version unterscheiden können. Das gilt ganz besonders für den Zugriff auf Dateien.
Das führt gerne zu “Beispiel xyz funktioniert nicht”

genau, das führt immer wieder zu Problemen, das einfachste ist wohl wirklich, einen simplen webserver zu starten wie den o.g. in python. Wenn man https braucht muss man allerdings einen anderen nehmen.
Vermutlich könnte man das Problem auch umschiffen indem man die library von extern (web) einbindet, oder den library code inline ins html kopiert, aber das will man normalerweise nicht, wenn es ein Test sein soll, weil es im Produktivsystem dann sehr schlecht wäre (verhindert caching der einzelnen Dateien etc.)

localhost mit http sollte problemlos sein, ob wie von Dir angesprochen, den in Python integrierten, ob ein Miniwebserver wie tinyweb.exe, oder, oder, oder.

Die englische Wiki-Seite erwähnt diese nicht umsonst.
Das hat auch den Vorteil, dass man die Ressourcen lokal herunterladen und nutzen kann und dafür keine Ladezeiten entstehen. Ja, das geht auch von der Festplatte - aber ich bezweifle, dass das Zielpublikum, das @Tirkon aufführt, das macht. Die machen die zwei oder drei oder vier notwendigen Änderungen im Beispielcode (Position, Beschriftung Markerpopup und vielleicht Zoomlevel) und das wars. Ist ja auch ok.

Das Hauptproblem dürften - wie von mir bereits erwähnt - die Dateizugriffe sein, z.B. auf eine GPX-Datei (was hier ja Ausgangspunkt war) .Wenn man sich auf den Standpunkt versteift, dass man das aus einer lokalen Datei auf der Festplatte heraus können will, dann muss man mit dieser Einschränkung leben - das geht nicht.

Mit einem Workaround kriegt man seinen Track auch in die Festplatten-Version rein:
Im Fall der GPX-Datei: einen (Online-)Konverter nutzen, um diese in GeoJSON umzuwandeln, var gpxtrack = am Anfang der GeoJSON-Datei einfügen und die Datei als Javascript laden.

Ich hab’s mal mit einer größeren Radtour von 2016 gemacht, GPX-Datei über 5 MB groß, GeoJSON-Datei nur noch etwas über 1 MB :slight_smile:

Einbinden und Anzeige mit leaflet und folgendem zusätzlichen Code


    // Nach der nächsten Anweisunggibt es eine Javascript-Variable gpxtrack, 
    // die das Riesen-GeoJSON-Element enthält ...
    <script type="text/javascript" src="nancy_metz.geojson"></script>
    // ... und die kann von leaflet in die Karte eingebunden werden.
    <script>
        L.geoJSON(gpxtrack).addTo(map);
    </script>

hat auch lokal in Chrome und Firefox funktioniert.

Das macht aber auf Dauer keinen Spass.

Wenn ich was fürs Wiki schreibe, dann wäre das eine Kurzfassung des ausgezeichneten Leaflet Quick Start Guide, dessen einziges Manko die englische Sprache ist …

Ich habe das mal in einem Entwurf in meiner Benutzerseite zusammengefasst. Auf externe Links habe ich dort verzichtet, weil ich die Seite sonst nicht hätte erfolgreich abspeichern können :frowning:

Mir war heute die Idee gekommen, (warum eigentlich nicht früher?) das funktionierende Openlayers 2 Beispiel einfach auf einer Unterseite meines Benutzernamensraumes abzuspeichern. Das sind zwar fremde Federn, mit denen ich den schmücke, ist aber nicht zu ändern. Dann hätte es im Artikelraum gelöscht werden können und alle wären zufrieden. Jetzt komme ich nach Hause und sehe, dass Du eine Alternative auf Basis aktuellerer Software bereitstellst. Das ist natürlich noch viel genialer. :o)

Wir sind wieder einmal an dem Punkt angelangt, an dem der Informatiker sich nicht in den Mapper hineinversetzen kann. Denn der hat einen komplett anderen Beruf, bei dem Du wiederum nicht verstehen würdest, wenn er Dir gleich mit der fortgeschrittenen Bedienung eines Baggers ins Haus fällt. Ich empfehle, diesen Podcast zu hören, damit das Hineinversetzen besser gelingt.

Am Anfang ist der Bäcker, der nichts mit Programmieren am Hut hat und am Wochenende im Radlerverein Touren leitet. Irgendwann bekommt er mal mit, dass es gpx Dateien gibt, mit denen man die Touren auf der Karte anzeigen kann. Im Zuge dessen hört er auch von OSM und versucht, seine Backstube einzutragen und freut sich, dass sie tatsächlich in der Karte erscheint. Dadurch angefixt, arbeitet er sich weiter in OSM ein. Manche schaffen es dann irgendwann auch, eine Relation zu verstehen und zu mappen, während anderen das zu kompliziert ist und nichts mehr anfassen was darin involviert ist, sofern sie das bemerken. Leider steigen diese Mapper häufig aus OSM aus, wenn ein anderer sein Mapping in Relationen verwurstet und er es dann nicht mehr maintainen kann.

Irgendwann stellt sich die Frage, ob man selbst eine eigene Karte mit dem Selbst-Gemappten bauen kann. Man hört von umap und schafft auch dies. Bei manchen geht es dann noch weiter. Da die Profis mit html arbeiten, fragt man sich, ob man das auch hinkriegt. Und dann sind wir genau an dem Punkt, dass man sich jetzt weiterhangelt und das Ganze anhand der Anleitung erst einmal durch eine einzige html Datei löst, die man einfach doppelklickt und die Karte ist da. Um überhaupt erstmals eine html Datei beim Anklicken dazu zu bekommen, dass nun eine Karte angezeigt wird, ist es so was von egal, wie man das hinbekommt. Von daher ist es auch zweitrangig, ob das mit einem veralteten openlayers oder mit einem aktuellen geschieht. Es zählt nur das Ergebnis. Man muss einen bestimmten Code in eine anzulegende Textdatei kopieren und diese in html umbenennen. Dann reicht es, diese Datei anzuklicken, damit eine Karte erscheint. Dann ändert man die Parameter und das Selbst-Gemappte wird angezeigt. Man weiß jetzt, dass man das Ganze so auch im Internet zeigen könnte.

Nachdem man es jetzt geschafft hat, in den Bagger einzusteigen, den Sitz einzustellen und die Joysticks in die richtige Position zu bringen, will der eine oder andere jetzt auch lernen, wie man vor- und zurückfährt. Jetzt wird klar, dass der Motor laufen muss, damit es weitergeht.

So und jetzt ist vielleicht bei dem einen oder anderen Mapper der Punkt da, an dem Du Ihm mit Deiner Erklärung kommen kannst, warum es nicht ausreicht, eine html Datei zu haben, sondern es auch einen Webserver braucht. Wenn Du ihm das zu einem Zeitpunkt erklären willst, an dem er noch nicht erfahren hat, dass eine html Datei beim Öffnen eine Karte erzeugt, ist das zu früh. Und schließlich kannst Du dann erklären, wie er vorgehen muss, damit die Karte unter Beteiligung des Webserver erscheint.

So und jetzt ist vielleicht bei dem einen oder anderen Mapper der Punkt da, an dem Du Ihm mit Deiner Erklärung kommen kannst, warum es nicht ausreicht, eine html Datei zu haben, sondern es auch einen Webserver braucht.

Früher hat es ja ausgereicht, eine html Datei und deren Supportdateien (scripts, Daten, css, …) lokal vorzuhalten und anzuclicken, aber vor ein paar Jahren haben die Browserhersteller angefangen das Laden von lokalen Dateien des Nutzers zu blocken, aus Sicherheitsgründen, und daher braucht man jetzt einen lokalen Webserver damit es läuft.