Umleitungen mit OpenStreetMap darstellen

Veröffentlicht am: 20.08.2024

In Kategorie: Software

Straßen und andere Verkehrsinfrastruktur muss gewartet und saniert werden, daran besteht kein Zweifel. Dann werden die fraglichen Bauwerke gesperrt und Umleitungen eingerichtet. Mit etwas Glück bzw. Ortskenntnis bekommt man eine Vorwarnung.

Im Beispiel soll es um die Sperrung der Hirschaider Main-Donau-Kanal-Brücke im August/September 2024. Die Marktgemeinde hat zum aktuellen Zeitpunkt jedoch nur eine textuelle Beschreibung der Umleitungen auf ihrer Homepage veröffentlicht:

Die Umleitung nördlich Hirschaid erfolgt über Strullendorf auf die B 505 an Pettstadt vorbei Richtung Sassanfahrt und umgekehrt.

Die Umleitung südlich läuft von Hirschaid über Altendorf - Neuses an der Pegnitz auf die Staatsstraße 2264 nach Hallerdorf - FO 19 - Schnaid - FO 10 Kleinbuchfeld - Sassanfahrt und umgekehrt.

Quelle: Markt Hirschaid

Mit meiner Ortskenntnis konnte ich nur die nördliche Umleitung direkt bewerten, für die südliche musste ich dann aber doch zu einem Kartendienst greifen.

Google Maps zeigt die Straßenbezeichnungen wie FO 10 und FO 19 nur beim Klick auf die entsprechende Straße an, man muss also wissen, wo man suchen muss.
Bing Maps findet die FO 19 gar nicht (die FO 10 immerhin in der Suche).
OpenStreetMap hingegen zeigt auf FO 10 und FO 19 beim Blick auf die Karte (ungefähr ab Zoom-Stufe 15) an.

Also kann ich mir die Umleitungen mit OpenStreetMap zusammen puzzeln.

Geht das nicht besser und bürgerfreundlicher?

Ich denke schon. Folgende Schritte wären meiner Meinung nach notwendig und auch nicht zu viel Aufwand.

Markieren der Umleitung auf GraphHopper einem OpenStreetMap basierten Routenplaner. Die südliche Umleitung kann unter diesem Link bereits eingesehen werden: südliche Umleitung (ebenso die nördliche Umleitung).
Die erstellten Routen können als GPX-Dateien von GraphHopper herunter geladen werden. Diese GPX Dateien können dann mit leafletjs auf OpenStreetMap Karten dargestellt werden. Dies Ansichten sind interaktiv, sind also u.a zoombar um auch kleinere Ausschnitte anzeigen zu können.

Herunterladen der GPX Datei

Das Ergebnis sieht dann für die beiden Umleitungen für die Sperrung der Brücke wie folgt aus:

Der folgende HTML/JavaScript Code sorgt für die obige Darstellung der beiden Umleitungen:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.9.4/leaflet.js" defer></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet-gpx/2.1.0/gpx.min.js" defer></script>
<div id="map" style="width: 600px; height: 400px;">
    <!-- die Karte wird in diesem div dargestellt -->
</div>
<script type="module">
    // Hier müssen die Links auf die GPX Dateien und entsprechende Farben angegeben werden
    var urls = [
        ['./images/osm_detours/blocked.gpx', 'red'], 
        ['./images/osm_detours/south_official.gpx', 'black'],
        ['./images/osm_detours/north_official.gpx', 'blue'],
    ];

    const map = L.map('map');
    L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: 'Map data &copy; <a href="http://www.osm.org">OpenStreetMap</a>'
    }).addTo(map);

    var north = -180;
    var south = 180;
    var east = -180;
    var west = 180;

    function show(url, color) {
        new L.GPX(url, {
            async: true, polyline_options: { color: color },
            markers: {
                startIcon: './images/osm_detours/empty.png',
                endIcon: './images/osm_detours/empty.png',
            },
            marker_options: {
                iconSize: [0, 0],
                iconAnchor: [-100000000, -100000000],
            },
        })
        .on('loaded', (e) => {
            north = Math.max(north, e.target.getBounds().getNorth());
            south = Math.min(south, e.target.getBounds().getSouth());
            east = Math.max(east, e.target.getBounds().getEast());
            west = Math.min(west, e.target.getBounds().getWest());
            map.fitBounds([
                [north, east],
                [south, west]
            ]);
        })
        .addTo(map);
    }

    urls.forEach((data) => show(data[0], data[1]));
</script>

Mit diesem recht einfachen Code-Schnipsel kann man Umleitungen für Bürger deutlich übersichtlicher und verständlicher (als mit einer textuellen Beschreibung) darstellen.