Hide Table of Contents
Latest Samples
Analytics
Dynamic Layers
Editing
Graphics
HTML5
Map
Maps from ArcGIS.com
Mobile
Popups and Info Windows
Query and Select
Renderers
OpenStreetMap layer
View live sample
Download as a zip file
Explore in the sandbox
Description
This sample shows how to add an OpenStreetMap layer to the map using the default options.Code
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>OpenStreetMap</title>
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">
<script src="http://js.arcgis.com/3.6/"></script>
<script>
dojo.require("esri.map");
dojo.require("esri.layers.osm");
var map, osmLayer;
function init() {
map = new esri.Map("map",{
center: [-89.924, 30.036],
zoom: 12,
logo: false
});
osmLayer = new esri.layers.OpenStreetMapLayer();
map.addLayer(osmLayer);
}
dojo.ready(init);
</script>
</head>
<body class="claro" style="font-size: small; font-family: Arial Unicode MS,Arial,sans-serif;">
<div id="map" style="position:relative;width:700px; height:500px; border:1px solid #000;">
</div>
</body>
</html>