Basemaps, basemap gallery, base map switch, map all with my own basemaps

AdrianMarsden · ‎11-17-2014

OK, I am having issues getting my head round all these items whilst using my own basemaps.

In my code, I create the map object. I do not set the basemap property.

I want to add two basemaps, a topo and photographic

I can see how to add to them to a gallery, but by that time the map object is defined, so how do I set the basemap?

I keep going round in circles - this is as far as I have got. - mainly from example code

    map = new Map("mapDiv", {
        logo: false
    });
    var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        map: map
    }, "basemapGallery");
    basemapGallery.startup();
    var layer = new BasemapLayer({
        url: "http:/xxx/arcgis/rest/services/bmap1/MapServer"
    });
    var basemap = new Basemap({
        id:"StreetMap",
        layers: [layer],
        title: "Street Map",
        thumbnailUrl: "pin.gif"
    });
     basemapGallery.add(basemap);
     var layer2 = new BasemapLayer({
         url: "http://xxx2/arcgis/rest/services/LIVEinternal/aerials/MapServer"
     });
     var aerial = new Basemap({
         layers: [layer2],
         title: "Aerials",
         thumbnailUrl: "pin.gif"
     });
     basemapGallery.add(aerial);


    console.debug(basemapGallery)
     var toggle = new BasemapToggle({
         map: map,
         basemap: "StreetMap"
     }, "BasemapToggle");
     toggle.startup();

But hit issues - what do I use in the Basemap property of the toggle - the help says "The secondary basemap to toggle to." but the ID, the title? I've tried both and they both fail with various errors

Also, how do you get the initial basemap of the map object.

Is it just me, or does the official help really suck when it comes to daring to use your own data?

RobertScheitlin__GISP · ‎11-17-2014

Adrian,

Here is a sample using custom basemaps:

<!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></title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.11/dijit/themes/claro/claro.css">    
  <link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
  <style> 
    html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    #map{
      padding:0;
    }
  </style> 
  
  <script src="http://js.arcgis.com/3.11/"></script>
  <script> 
    var map;
    require([
      "esri/map", "esri/dijit/BasemapGallery", "esri/arcgis/utils",
      "dojo/parser",
      "esri/dijit/BasemapLayer", "esri/dijit/Basemap",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/TitlePane",
      "dojo/domReady!"
    ], function(
      Map, BasemapGallery, arcgisUtils,
      parser, BasemapLayer, Basemap
    ) {
      parser.parse();

      map = new Map("map");

      var basemaps = [];
      var waterTemplateLayer = new BasemapLayer({
        url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/WaterTemplate/LocalGovernmentInfrastructu..."
      });
      var waterBasemap = new Basemap({
        layers: [waterTemplateLayer],
        title: "Water Template",
        thumbnailUrl: "images/waterThumb.png"
      });
      basemaps.push(waterBasemap);
      
      var publicSafetyLayer = new BasemapLayer({
        url: "http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..."
      });
      var publicSafetyBasemap = new Basemap({
        layers: [publicSafetyLayer],
        title: "Public Safety",
        thumbnailUrl: "images/safetyThumb.png"
      });
      basemaps.push(publicSafetyBasemap);

      var basemapGallery = new BasemapGallery({
        showArcGISBasemaps: false,
        basemaps: basemaps,
        map: map
      }, "basemapGallery");
      basemapGallery.startup();
      
      basemapGallery.on("error", function(msg) {
        console.log("basemap gallery error:  ", msg);
      });
    });
  </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'" 
         style="padding:0;">

      <div style="position:absolute; right:20px; top:10px; z-Index:999;">
        <div data-dojo-type="dijit/TitlePane" 
             data-dojo-props="title:'Switch Basemap', closable:false, open:false">
          <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

    </div>
  </div>
</body> 

</html>

AdrianMarsden · ‎11-17-2014

Thanks, but that is using the gallery widget - I'm after a solution that uses the Toggle widget - I've seen a few examples and working on them now.

AdrianMarsden · ‎11-17-2014

This is the example I am working with

Is it possible to use BasemapToggle with custom basemaps?

But not sure how to get the map to initially work with one of my basemaps as well

RobertScheitlin__GISP · ‎11-17-2014

Adrian,

Ahh, I didn't read the full question.

AdrianMarsden · ‎11-17-2014

No problem - I'm using your code as a way of getting my basemap as the initial one. It may work.................