DE:OpenLayers Simple Example

From OpenStreetMap Wiki
Jump to: navigation, search
Verfügbare Sprachen — OpenLayers Simple Example
· Afrikaans · Alemannisch · aragonés · asturianu · azərbaycanca · Bahasa Indonesia · Bahasa Melayu · Bân-lâm-gú · Basa Jawa · Baso Minangkabau · bosanski · brezhoneg · català · čeština · dansk · Deutsch · eesti · English · español · Esperanto · estremeñu · euskara · français · Frysk · Gaeilge · Gàidhlig · galego · Hausa · hrvatski · Igbo · interlingua · Interlingue · isiXhosa · isiZulu · íslenska · italiano · Kiswahili · Kreyòl ayisyen · kréyòl gwadloupéyen · Kurdî · latviešu · Lëtzebuergesch · lietuvių · magyar · Malagasy · Malti · Nederlands · Nedersaksies · norsk bokmål · norsk nynorsk · occitan · Oromoo · oʻzbekcha/ўзбекча · Plattdüütsch · polski · português · português do Brasil · română · shqip · slovenčina · slovenščina · Soomaaliga · suomi · svenska · Tiếng Việt · Türkçe · Vahcuengh · vèneto · Wolof · Yorùbá · Zazaki · српски / srpski · беларуская · български · қазақша · македонски · монгол · русский · тоҷикӣ · українська · Ελληνικά · Հայերեն · ქართული · नेपाली · मराठी · हिन्दी · অসমীয়া · বাংলা · ਪੰਜਾਬੀ · ગુજરાતી · ଓଡ଼ିଆ · தமிழ் · తెలుగు · ಕನ್ನಡ · മലയാളം · සිංහල · ไทย · မြန်မာဘာသာ · ລາວ · ភាសាខ្មែរ · ⵜⴰⵎⴰⵣⵉⵖⵜ · አማርኛ · 한국어 · 日本語 · 中文(简体)‎ · 吴语 · 粵語 · 中文(繁體)‎ · ייִדיש · עברית · اردو · العربية · پښتو · سنڌي · فارسی · ދިވެހިބަސް


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="http://www.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). Sollten also weitere Ideen da sein, diese Methode zu verbessern, dann immer her damit.

Verwandte Artikel