Hide Table of Contents
Latest Samples
Image Layers
Add a topographic map

Description

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.
  1. Run the application.
  2. Zoom to the new extent.
  3. Enable Firebug and click the Console tab
  4. Enter the following:
    dojo.toJson(map.extent.toJson());
  5. 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">
    <!--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.9/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/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.9/"></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>