Hide Table of Contents
Analysis
Dynamic Layers
Editing
Feature Layers
Feature Table
Graphics
Map
Mobile
Online and Portal
Popups and Info Windows
Query and Select
Renderers, Symbols, Visualization
Search
Web tiled
Explore in the sandbox
Open in CodePen
View live sample
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>