MBCDN

Dies ist eine alte Version des Dokuments!

Inhaltsverzeichnis

Python
Leaflet
- Marker
- Routing

Python

import folium
 
# Koordinaten für den Kartenmittelpunkt
latitude = 48.2082
longitude = 16.3738
 
# Karte erstellen
map_osm = folium.Map(location=[latitude, longitude], zoom_start=12)
 
# Marker hinzufügen
folium.Marker([latitude, longitude], popup='Wien').add_to(map_osm)
 
# Karte anzeigen
map_osm.save('map.html')

import folium
import overpy
 
# Koordinaten für den Kartenmittelpunkt
latitude = 48.2082
longitude = 16.3738
 
# Overpass API-Abfrage erstellen
api = overpy.Overpass()
 
# Overpass API-Abfrage ausführen
result = api.query(f'node(around:2000, {latitude}, {longitude})["highway"];out;')
 
# Karte erstellen
map_osm = folium.Map(location=[latitude, longitude], zoom_start=14)
 
# Straßennamen hinzufügen
for node in result.nodes:
    if 'name' in node.tags:
        folium.Marker([node.lat, node.lon], popup=node.tags['name']).add_to(map_osm)
 
# Karte anzeigen
map_osm.save('map.html')

import requests
 
# Overpass API-Abfrage für Straßen in Wien
overpass_url = "http://overpass-api.de/api/interpreter"
query = '''
    [out:xml];
    area["name"="Wien"]->.a;
    way(area.a)["highway"];
    out;
'''
response = requests.get(overpass_url, params={'data': query})
 
# Daten lokal speichern
with open('wien_streets.osm', 'wb') as file:
    file.write(response.content)

import folium
import xml.etree.ElementTree as ET
 
# XML-Daten laden
tree = ET.parse('wien_streets.osm')
root = tree.getroot()
 
# Koordinaten für den Kartenmittelpunkt
latitude = 48.2082
longitude = 16.3738
 
# Karte erstellen
map_osm = folium.Map(location=[latitude, longitude], zoom_start=14)
 
# Straßennamen hinzufügen
for way in root.findall(".//way"):
    street_name = None
    coords = []
    for tag in way.findall(".//tag"):
        if tag.get('k') == 'name':
            street_name = tag.get('v')
            break
    if street_name:
        for nd in way.findall(".//nd"):
            ref = nd.get('ref')
            node = root.find(f".//node[@id='{ref}']")
            if node is not None:
                lat = float(node.get('lat'))
                lon = float(node.get('lon'))
                coords.append([lat, lon])
        if coords:
            folium.PolyLine(coords, color="blue", weight=2, popup=street_name).add_to(map_osm)
 
# Karte anzeigen
map_osm.save('map.html')

Leaflet

Marker setzen

<!DOCTYPE html>
<html>
<head>
  <title>Wien Karte mit Marker</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    const map = L.map('map').setView([48.2082, 16.3738], 13); // Wien-Zentrum

    // OSM-Tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap-Mitwirkende'
    }).addTo(map);

    // Marker hinzufügen
    const marker = L.marker([48.2082, 16.3738]).addTo(map); // Wien-Zentrum
    marker.bindPopup("<b>Wien!</b><br>Hauptstadt von Österreich").openPopup();

    // Weitere Marker hinzufügen (z. B. Stephansdom)
    const stephansdom = L.marker([48.2064, 16.3705]).addTo(map); // Stephansdom
    stephansdom.bindPopup("<b>Stephansdom</b><br>Berühmte Kirche in Wien").openPopup();
  </script>
</body>
</html>

Marker mit Adresse setzen (Geocoder)

<!DOCTYPE html>
<html>
<head>
  <title>Wien Karte mit Adresse und Marker</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
  <style>
    #map {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  <script>
    const map = L.map('map').setView([48.2082, 16.3738], 13); // Wien-Zentrum

    // OSM-Tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap-Mitwirkende'
    }).addTo(map);

    // Geocoding: Adresse eingeben und Marker setzen
    const geocoder = L.Control.Geocoder.nominatim();

    // Beispiel: Adresse "Stephansdom, Wien" in Koordinaten umwandeln und Marker setzen
    geocoder.geocode("Stephansdom, Wien", function(results) {
      const latlng = results[0].center;
      const marker = L.marker(latlng).addTo(map);
      marker.bindPopup("<b>Stephansdom</b><br>Berühmte Kirche in Wien").openPopup();
      map.setView(latlng, 16); // Karte auf Marker zentrieren
    });

  </script>
</body>
</html>

Marker

<!DOCTYPE html>
<html>
<head>
  <title>Wien Karte mit Adresse und Marker</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script>
    // Initialisiere die Karte mit Wien als Mittelpunkt
    const map = L.map('map').setView([48.2082, 16.3738], 13); 

    // OSM-Tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap-Mitwirkende'
    }).addTo(map);

    // Geocoding API (Nominatim) für eine Adresse
    function geocodeAddress(address) {
      fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`)
        .then(response => response.json())
        .then(data => {
          if (data.length > 0) {
            const latlng = [data[0].lat, data[0].lon]; // Koordinaten der ersten Antwort
            const marker = L.marker(latlng).addTo(map);
            marker.bindPopup(`<b>${address}</b><br>Gefunden in OSM`).openPopup();
            map.setView(latlng, 16); // Karte auf den Marker zentrieren
          } else {
            alert("Adresse nicht gefunden!");
          }
        })
        .catch(error => console.error('Geocoding-Fehler:', error));
    }

    // Beispiel: Geocode für "Stephansdom, Wien"
    geocodeAddress("Stephansdom, Wien");

  </script>
</body>
</html>

Routing

<!DOCTYPE html>
<html>
<head>
  <title>Wien Karte mit Adresse, Marker und Weg</title>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <link rel="stylesheet" href="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.css" />
  <style>
    #map {
      height: 100vh;
    }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="https://unpkg.com/leaflet-routing-machine/dist/leaflet-routing-machine.js"></script>
  <script>
    // Initialisiere die Karte mit Wien als Mittelpunkt
    const map = L.map('map').setView([48.2082, 16.3738], 13);

    // OSM-Tiles
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      maxZoom: 19,
      attribution: '&copy; OpenStreetMap-Mitwirkende'
    }).addTo(map);

    // Geocoding API (Nominatim) für eine Adresse
    function geocodeAddress(address) {
      return fetch(`https://nominatim.openstreetmap.org/search?format=json&q=${encodeURIComponent(address)}`)
        .then(response => response.json())
        .then(data => {
          if (data.length > 0) {
            const latlng = [data[0].lat, data[0].lon];
            return latlng;
          } else {
            alert("Adresse nicht gefunden!");
            return null;
          }
        })
        .catch(error => {
          console.error('Geocoding-Fehler:', error);
          return null;
        });
    }

    // Beispiel: Geocode für "Stephansdom, Wien" und "Prater, Wien"
    async function drawRoute() {
      const startAddress = "Stephansdom, Wien";
      const endAddress = "Prater, Wien";

      const startCoords = await geocodeAddress(startAddress);
      const endCoords = await geocodeAddress(endAddress);

      if (startCoords && endCoords) {
        // Route mit Leaflet Routing Machine zeichnen
        L.Routing.control({
          waypoints: [
            L.latLng(startCoords),
            L.latLng(endCoords)
          ],
          routeWhileDragging: true
        }).addTo(map);
      }
    }

    // Route zeichnen
    drawRoute();
  </script>
</body>
</html>

MBCDN

Benutzer-Werkzeuge

Webseiten-Werkzeuge

Inhaltsverzeichnis

Python

Leaflet

Marker

Routing

Seiten-Werkzeuge