Kachel-Schichten einbinden

Zusätzlich zu den bekannten Vektorkarten gibt es weiterer Karten, die in Form von Kacheln von der API eingebunden werden können. Das Beispiel verdeutlicht dies durch Einzeichnen von Temperaturdaten.

Das Beispiel ist vollständig; Sie können es lokal in einer Datei abspeichern und im Browser aufrufen. Sie müssen lediglich den Wert für den apiKey ersetzen und (für dieses Beispiel) den Zugangscode des Kachel-Anbieters eintragen (APP_ID). Letzteren erhalten Sie von der Webseite des Anbieters unter: Open Weather Map .

SmartMaps-Karte

+-
SmartMaps | Leaflet Map data © OpenStreetMap

Codebeispiel: Kachel-Schichten einbinden

<!DOCTYPE html>
<html>

<head lang="en">
  <meta charset="UTF-8">
  <title>Tiles</title>
</head>

<body>
  <div id="map-wrapper">
    <!-- Vordefiniertes DIV-Element, in das die Karte geladen wird. -->
    <div id="map" style="width: 900px; height: 600px;"></div>
  </div>
  <!-- SmartMaps-API -->
  <script src="https://www.yellowmap.de/api_rst/api/loader?libraries=free-3&apiKey={API_KEY}"></script>
  <script>
    ym.ready(function(modules) {

      // Wir beziehen Kacheln von Open Weather Map; fordern Sie Ihre eigene Zugriffs-ID 
      // hier an => https://openweathermap.org/appid
      var appId = '{APP_ID}';
      // Kachel der Temperatur-Schicht
      var TileUrl = 'http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=' + appId
      var DemoLayer = new L.tileLayer(TileUrl);

      // Karte einzeichnen.
      var map = ym.map("map", {
        center: ym.latLng(39.717318, -23.425264),
        zoom: 3
      });

      // Kachelschicht der Karte hinzufügen.
      DemoLayer.addTo(map);
    });
  </script>
</body>
</html>