Hide Table of Contents
View Web tiled sample in sandbox
Web tiled

Description

WebTiledLayer provides a simple way to add non-ArcGIS Server map tiles as a layer to a map.

Code

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Web tiled</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/dijit/themes/nihilo/nihilo.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%; width: 100%;
        margin: 0; padding: 0;
      }
      body{
        background-color: #fff; overflow:hidden;
        font-family: sans-serif;
      }
      #header {
        padding: 4px 15px 4px 0;
        background-color: dimgray;
        color: white;
        font-size: 16pt;
        text-align: right;
        font-weight: bold;
        height:55px;
      }
      #subheader {
        color: white;
        font-size: small;
        padding: 5px 0 0 0;
        text-align: right;
      }
    </style>

    <script src="https://js.arcgis.com/3.46/"></script>
    <script>
      var map;
      require([
        "esri/map", "esri/layers/WebTiledLayer", "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function(
        Map, WebTiledLayer, parser
      ) {
        parser.parse();

        map = new Map("map", {
          center: [137, 37],
          zoom: 5
        });

        var webtiles = new WebTiledLayer("https://tile.openstreetmap.org/{level}/{col}/{row}.png",
        {
          copyright: ' OpenStreetMap'
        });
        map.addLayer(webtiles);
      });
    </script>
  </head>
  <body class="nihilo">
    <div id="mainWindow"
         data-dojo-type="dijit/layout/BorderContainer"
         data-dojo-props="design:'headline',gutters:false"
         style="width: 100%; height: 100%; margin: 0;">
      <div id="header"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'top'">
        WebTiledLayer
        <div id="subheader">WebTileLayer provides a simple way to add non-ArcGIS Server map tiles as a layer to a map.</div>
      </div>
      <div id="map" class="shadow"
           data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="region:'center'">
      </div>
    </div>
  </body>
</html>
 
          
Show Modal