Include tile layers

In addition to the known vector maps, there are more maps that can be integrated by the API in the form of tiles. The example illustrates this by drawing in temperature data.

The example is complete; you can save it locally in a file and call it in the browser. You only have to replace the value for the apiKey and (for this example) enter the access code of the tile provider (APP_ID). You can get the latter from the provider's website at: Open Weather Map .

SmartMaps map

Code example: Include tile layers

<!DOCTYPE html>
<html>

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

<body>
  <div id="map-wrapper">
    <!-- Predefined DIV element into which the map is loaded. -->
    <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) {

      // We obtain tiles from Open Weather Map; request your own access ID 

      // here at => https://openweathermap.org/appid
      var appId = '{APP_ID}';
      // Tile of the temperature layer
      var TileUrl = 'http://tile.openweathermap.org/map/temp_new/{z}/{x}/{y}.png?appid=' + appId
      var DemoLayer = new L.tileLayer(TileUrl);

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

      // Add tile layer to map.
      DemoLayer.addTo(map);
    });
  </script>
</body>
</html>