OpenStreetMap - Anstatt Google Maps in Android-Apps verwenden

Mit Hilfe der Bibliothek osmdroid können Entwicklern, auf OpenStreetMap-Karten in Android-Apps ähnlich komfortabel zuzugreifen wie auf Google-Maps-Karten. Durch Integration der Bibliothek OSMBonusPack ist sogar Routing und Geocoding möglich. Für den Einsatz auf Webseiten empfehle ich meinen Beitrag "Webseite mit interaktiver Karte ohne Google Maps? Leaflet.js".

Integration von osmdroid und OSMBonusPack

dependencies {
...
    implementation 'org.osmdroid:osmdroid-android:6.1.14'
    implementation 'com.github.MKergall:osmbonuspack:6.9.0'
}

Ein gutes Beispiel Projekt findet sich in der c't 23/2022 S. 138 oder unter https://gitlab.com/andreaslinke/lastlocation/-/tree/main/ .

Leaflet.js - draggable marker und Ausgabe der Koordinaten (lat, lng)

In dem Beitrag "Webseite mit interaktiver Karte ohne Google Maps? Leaflet.js" hatte ich beschrieben, wie man Leaflet.js auf seiner Webseite als gute Alternative zu Google Maps einbindet. 

In diesem Beispiel geht es darum einen "ziehbaren" Marker zu erstellen und die Koordinaten in zwei Feldern (lat, lng) anzuzeigen.

Es wird die Dragend-Methode für den Marker verwendet um lat und lng abzufangen:

<script type="text/javascript">
    function showMap() {
      
        var map = L.map('map_leaflet').setView([50.9033081, 9.5924615], 14);
        var my_divicon = L.divIcon({
            className: 'arrow_box'
        });
        var marker = L.marker([50.9033081, 9.5924615], {
            draggable:true
        });
        function addToTextBox(lt,ln){
            document.getElementById('lat').innerHTML = lt;
            document.getElementById('lng').innerHTML = ln;
          
        }
        marker.on('dragend', function(event){
            //alert('drag ended');
            var marker = event.target;
            var location = marker.getLatLng();
            var lat = location.lat;
            var lon = location.lng;
            addToTextBox(lat,lon);
            //alert(lat);
            //retrieved the position
          });
       
        // load a tile layer
        L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
            {
                attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
                maxZoom: 18,
                minZoom: 9
            }).addTo(map);
          
        // initialize the map
        //var map = L.map('map_leaflet', { layers: osm, tap: false } );
        L.control.scale({imperial:false}).addTo(map); // metrisch

        marker.addTo(map);
    }
</script>

Webseite mit interaktiver Karte ohne Google Maps? Leaflet.js

Leaflet.js ist eine Open-Source-JavaScript-Bibliothek für interaktive Karten auf der eigenen Webseite.

Die JavaScript Bibliothek ist klein, einfach und flexibel und derzeit wahrscheinlich die beliebteste Open-Source-Mapping-Bibliothek. Gleichzeitig ist Leaflet.js auch eine gute Alternative zu Google Maps, da eine Verwendung nur noch nach Registrierung möglich ist und nur noch in einem geringen Umfang kostenlos ist.

Die Bibliothek ist kostenlos und frei nutzbar (2-Clause BSD License).

Desweiteren ist es möglich, dass die Karten vom eigenen Server ausgeliefert werden können, somit muss im Impressum bei der Datenschutzerklärung (DSGVO) nicht auf einen externen Service verwiesen werden.

Aktuelles Beispiel, wenn die Verwendung der Google Maps API ohne Registrierung erfolgt:

Folgende Informationen fehlen Google: https://developers.google.com/maps/documentation/javascript/error-messages?utm_source=maps_js&utm_medium=degraded&utm_campaign=keyless#api-key-and-billing-errors

• Are you using an API key?
• Is billing enabled on your account?
• Is the provided billing method no longer valid (for example an expired credit card)?
• Is there an exceeded self-imposed daily limit on the API?
• Does your API key have an IP addresses restriction?

Integration von Leaflet.js in die eigene Webseite:

• Download der Bibliothek: https://leafletjs.com/download.html

• Ordner entpacken und unter ../leaflet speichern

• In der HTML-Datei ein div element mit einer id hinterlegen:
• <div id="map_leaflet"></div>

• Die CSS‐Datei und das Leaflet‐API‐Script einbinden:
• <link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />
• <script src="leaflet/leaflet.js"></script>

• Der Kartencontainer (mapid) muss eine definierte Höhe hat z.B. per CSS festlegen:
• #map_leaflet{ height: 392px; } 
• <div id="map_leaflet" style="width:800px; height:392px"></div>

• Damit ein Layer anzeigt werden kann, muss der Kartenbereich (hier mit den Koordinaten) initalisiert werden:
• var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);

• Wie auch die Google Maps API benötigt die Leaflet API Kartenbilder (Tiles im .png oder .jpeg Format), diese werden je nach Zoomstufe schachbrettartig zu einer Karten zusammengesetzt:
• https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png (Templatestring hinzufügen)
• Servernummer = (s)
• Zoomlevel = (z)
• Koordinaten = (x,y)
• Zoom Bereich und Copyright werden festgelegt

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
{
    attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
    maxZoom: 18,
    minZoom: 9
}).addTo(map);

• Metrischen Maßstab in der Karte einblenden:
• L.control.scale({imperial:false}).addTo(map); // metrisch

• Mit der Methode L.marker. kann man Orte auf der Karte markieren:
• L.marker([50.869333, 9.715948]).addTo(map);

• Mit bindPopup kann ein Popup hinterlegt werden und beim Aufrufen der Karte geöffnet werden:
• L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();

Weitere Beispiele finden sich auch auf der Herstellerseite: https://leafletjs.com/examples.html

Anbei der komplette Quellcode:

<html>
    <head>
...
        <link rel="stylesheet" href="leaflet/leaflet.css" rel="stylesheet" />
...
        <script src="leaflet/leaflet.js"></script>
...
        <script type="text/javascript"> 
            function showMap() {           
                // initialize the map
                var map = L.map('map_leaflet').setView([50.869333, 9.715948], 14);
               
                // load a tile layer
                L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                    {
                        attribution: 'Map data © OpenStreetMap and contributors CC-BY-SA',
                        maxZoom: 18,
                        minZoom: 9
                    }).addTo(map);
               
                L.control.scale({imperial:false}).addTo(map); // metrisch
               
                //L.marker([50.869333, 9.715948]).addTo(map);
                L.marker([50.869333, 9.715948]).addTo(map).bindPopup("Bahnhofsmission Bad Hersfeld").openPopup();
            }
        </script>
    </head>
   
    <body onload="showMap()">
...
        <div id="map_leaflet" style="width:800px; height:392px"></div>
...
    </body>
</html>