Return to Answer

added an alternative solution for consideration

Source Link

edited Aug 21, 2014 at 7:30

1.5k
1
8
8

UPDATE:

While answering a question over at the cmv github repository, it occurred to me that there is another solution that may get you closer to what you desire. The available basemaps are just an object within the esri.config.defaults.map. You can add your own custom basemaps to that object and they are treated like the standard ESRI basemaps. The advantage of this approach is you can refer to the basemap id in the map constructor and thus that id can be saved in the user settings as you desired. Here's a full example:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map;

      esriConfig.defaults.map.basemaps.terrain = {
        baseMapLayers: [
          {
            url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
          }, 
          {
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
          } 
        ],
        title: "Terrain Basemap"
      };
      require(["esri/map", "esri/config", "dojo/domReady!"], function(Map, esriConfig) {
        map = new Map("map", {
          basemap: "terrain",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 12
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

UPDATE:

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map;

      esriConfig.defaults.map.basemaps.terrain = {
        baseMapLayers: [
          {
            url: "http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer"
          }, 
          {
            url: "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
          } 
        ],
        title: "Terrain Basemap"
      };
      require(["esri/map", "esri/config", "dojo/domReady!"], function(Map, esriConfig) {
        map = new Map("map", {
          basemap: "terrain",
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 12
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>

Source Link

created Aug 20, 2014 at 22:07

tmcgee

1.5k
1
8
8

You can combine the two layers as a single Basemap and pass them to the map constructor. Below is a full working example using the two layers you are interested in.

This came from a discussion we had over on github related to using non-mercator maps as basemaps for the Configurable Map Viewer (cmv) that is based on the ESRI JS API.

This does not fully address your additional requirement to save the basemap with the user settings but perhaps gives you an idea on how to proceed. There might be additional details in that discussion related to the BaseMap widget that would be helpful for you. One of the tricks there was to include no basemap at all (or a blank one) and allow the BaseMap widget to determine the starting basemap. Something like that might work for your requirement to save the basemap.

<!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>Simple Map</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <style>
      html, body, #map {
        height: 100%;
        width: 100%;
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #FFF;
        overflow: hidden;
        font-family: "Trebuchet MS";
      }
    </style>
    <script src="http://js.arcgis.com/3.10/"></script>
    <script>
      var map;

      require(["esri/map", "esri/dijit/Basemap", "esri/dijit/BasemapLayer", "dojo/domReady!"], function(Map, Basemap, BasemapLayer) {
        map = new Map("map", {
          basemap: new Basemap({
                id: 'terrain',
                layers: [
                  new BasemapLayer({
                    url: 'http://services.arcgisonline.com/arcgis/rest/services/World_Terrain_Base/MapServer'
                  }),
                  new BasemapLayer({
                    url: 'http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer'
                  })
                ]
          }),
          center: [-122.45, 37.75], // longitude, latitude
          zoom: 12
        });
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>