Add a topographic map | ArcGIS API for JavaScript

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}});
map = new esri.Map("map",{extent:initExtent});
If you want the map to start with a different initial extent you can easily determine the extent values using your browser's debugging tools. Below are the steps for calculating a new extent using Firefox with Firebug installed.

Run the application.
Zoom to the new extent.
Enable Firebug and click the Console tab
Enter the following:
dojo.toJson(map.extent.toJson());
Copy the results and paste them into the JavaScript code replacing the existing initExtent.

Note: You can perform the same steps using Developer Tools in Internet Explorer or Chrome.

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>Topographic Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/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="http://js.arcgis.com/3.6/"></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>

View live sample Download as a zip file Explore in the sandbox

Description

Code

View live sample
Download as a zip file
Explore in the sandbox