HennWeb

Buch erstellen
Diese Seite zum Buch hinzufügen

Buch erstellen
Diese Seite aus Buch entfernen

Buch anzeigen, ändern(0 Seite/n)

Hilfe

Dies ist eine alte Version des Dokuments!

Openstreetmap

Karte mit einbinden

mit Suchfunktion nach Ort

Wichtig hierfür ist folgender Code:

  <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />
  <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
  
   <script>
   L.Control.geocoder().addTo(map);
   </script>

Beispiel:

download

<!DOCTYPE html>
<html>
  <head>
    <title>Leaflet Control Geocoder</title>

    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no initial-scale=1, maximum-scale=1"
    />

    <link rel="stylesheet" href="https://unpkg.com/leaflet@latest/dist/leaflet.css" />
    <link rel="stylesheet" href="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.css" />

    <script src="https://unpkg.com/leaflet@latest/dist/leaflet-src.js"></script>
    <script src="https://unpkg.com/leaflet-control-geocoder/dist/Control.Geocoder.js"></script>
    <style type="text/css">
      body {
        margin: 0;
      }
      #map {
        position: absolute;
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
  
  <div id="map"></div>

  <script type="text/javascript">
     var map = L.map('map').setView([0, 0], 2);
     L.tileLayer('https://{s}.tile.osm.org/{z}/{x}/{y}.png', {
       attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
     }).addTo(map);
     L.Control.geocoder().addTo(map);
  </script>
  
  </body>
</html>