DE:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to navigation Jump to search

Wie man eine OpenStreetMap-Karte in seine eigene Webseite einbaut

Dieses einfach Beispiel zeigt, wie man einen Ausschnitt von OpenStreetMap auf seiner Webseite anzeigen kann. Mit diesem DHTML-Codeschnipsel baut man die OpenLayers Javascript-Bibliothek ein, um die Karte anzuzeigen.


Hinweis: OpenStreetMap liefert die Tile-Bilder

Bitte beachte, dass die Kartendaten direkt von den Servern von OpenStreetMap kommen. OSM kann für diese Methode keine offizielle Unterstützung geben und kann nicht garantieren, dass die Versorgung konstant bleibt. Die Karten-Server haben immer wieder Ausfälle und sogar die URLs der Karten können sich ändern. Wenn du viele Besucher bzw. viel Traffic erwartest, dann nimm rechtzeitig Kontakt mit den verantwortlichen Entwicklern auf.

Du kannst auch eine eigene Karte erzeugen und einen eigenen Karten-Server betreiben. Dort wird beschrieben, wie man einen eigenen Karten-Server aufsetzt, bzw. die Karte nach eigenen Wünschen gestaltet und erzeugt. Das hat den Vorteil, dass man unabhängiger von den OSM-Karten-Servern wird und es entlastet zudem die OSM-Server.

Anleitung

Kopiere folgender Code in eine neue HTML-Datei:

<html>
  <head>
    <title>OpenLayers Demo</title>
    <style type="text/css">
      html, body, #basicMap {
          width: 100%;
          height: 100%;
          margin: 0;
      }
    </style>
    <script src="https://openlayers.org/api/OpenLayers.js"></script>
    <script>
      function init() {
        map = new OpenLayers.Map("basicMap");
        var mapnik = new OpenLayers.Layer.OSM();
        map.addLayer(mapnik);
        map.setCenter(new OpenLayers.LonLat(13.41,52.52) // Center of the map
          .transform(
            new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
            new OpenLayers.Projection("EPSG:900913") // to Spherical Mercator Projection
          ), 15 // Zoom level
        );
      }
    </script>
  </head>
  <body onload="init();">
    <div id="basicMap"></div>
  </body>
</html>

Erweiterungen

Wenn man eine andere Basiskarte benutzen möchte, dann kann man dazu folgenden Code verwenden:

var newLayer = new OpenLayers.Layer.OSM("New Layer", "path_to_tiles/", {numZoomLevels: 19});
"New Layer" - im Menü anzuzeigender Name der Basiskarte
"path_to_tiles" - URL zum Server der Basiskarte
"numZoomLevels:" - Anzahl der verwendeten Zoomstufen

Mögliche Basiskarten sind:

Basiskarte URL Zoomstufen
OpenLayers.Layer.OSM.Mapnik 19
OpenLayers.Layer.OSM.Maplint
OpenLayers.Layer.OSM.CycleMap

Diese Idee weiterentwickeln?

Jeder ist eingeladen diese Seite und den Code weiter zu verbessern. Das Original stammt von Harry Wood und zeigt nur das Notwendigste mit lediglich einem definiertem Layer und ohne URL-Parameter Unterstützung (Permalink). Die Version von OpenLayers ist 2.13 vom Server openlayers.org - schon ein wenig angestaubt. Sollten also weitere Ideen da sein, diese Methode zu verbessern, dann immer her damit.

Minimallösung Button

Button als Link zu einem Kartenausschnitt nutzen. Beispiel „Kirche Köthen“ Die Webadresse ist hierbei durch eine eigene zu ersetzen, dazu die Funktion Permalink in der OSM Karte nutzen.

Anleitung

Kopiere folgender Code eines Buttons „Anfahrt“. Der Button kann nach belieben in Style angepasst werden.

<button onclick="window.location.href = 'https://openstreetmap.de/karte/?zoom=18&lat=51.75117&lon=11.97369&layers=B00TT';"
style=
"text-align:center; font-size:24px"
type="button">Anfahrt</button>

Verwandte Artikel