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