Hide Table of Contents
View Add a topographic map sample in sandbox
Add a topographic map


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}});
= 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:
  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.


<!DOCTYPE html>
    <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.31/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.31/esri/css/esri.css">
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }

    <script>var dojoConfig = {parseOnLoad: true};</script>
    <script src="https://js.arcgis.com/3.31/"></script>
      var map;

      function init() {
        map = new esri.Map("map", {
          basemap: "topo",
          center: [-122.41, 37.75],
          zoom: 14
  <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" 


Show Modal