Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen angezeigt.

--- programmieren:openstreetmap [24/03/2021 11:49] – angelegt conny
+++ programmieren:openstreetmap [24/03/2021 12:14] (aktuell) – Externe Bearbeitung 127.0.0.1
@@ Zeile 1: / Zeile 1: @@
 ===== Openstreetmap =====
-==== Karte mit einbinden ====
+==== Karte einbinden ====
-mit Suchfunktion nach Ort
+mit Suchfunktion nach Ort\\
+Quelle: https://github.com/perliedman/leaflet-control-geocoder
+Wichtig hierfür ist folgender Code:
+<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>
+</code>
+Beispiel:
 <code | download>
 <!DOCTYPE html>
@@ Zeile 46: / Zeile 59: @@
 </html>
 </code>
 <html>
-<!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" />
@@ Zeile 70: / Zeile 74: @@
       #map {
         position: absolute;
-        width: 100%;
+         width: 60%;
-        height: 100%;
+        height: 60%;
       }
     </style>
-  </head>
-  <body>
     <div id="map"></div>
@@ Zeile 85: / Zeile 88: @@
 L.Control.geocoder().addTo(map);
     </script>
-  </body>
-</html>
 </html>