This sample shows how to add a topographic basemap layer to your application. The sample uses a cached map service from ArcGIS Online. You can browse the ArcGIS.com site for additional online basemap and reference map services or publish your own geographic data as a service using ArcGIS Server.
This sample sets the initial extent of the map to an area in San Francisco using following code:
var initExtent = new esri.geometry.Extent({"xmin":-13635568.034589134,"ymin":4541606.359162286,"xmax":-13625430.573712826,"ymax":4547310.472398059,"spatialReference":{"wkid":102100}});Note: You can perform the same steps using Developer Tools in Internet Explorer or Chrome.
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title>Topographic Map</title> <link rel="stylesheet" href="https://js.arcgis.com/3.29/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map{ padding:0; } </style> <script>var dojoConfig = {parseOnLoad: true};</script> <script src="https://js.arcgis.com/3.29/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); var map; function init() { map = new esri.Map("map", { basemap: "topo", center: [-122.41, 37.75], zoom: 14 }); } dojo.ready(init); </script> </head> <body class="claro"> <div data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="width: 100%; height: 100%; margin: 0;"> <div id="map" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'"> </div> </div> </body> </html>