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

Description

This sample shows how to add a topographic basemap layer to your application. The sample uses a 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.

Code

<!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.46/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.46/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.46/"></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-vector",
          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>
 
          
Show Modal