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

3443
5
11-17-2014 04:42 AM
AdrianMarsden
Occasional Contributor III

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?

5 Replies
RobertScheitlin__GISP
MVP Emeritus

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>

0 Kudos
AdrianMarsden
Occasional Contributor III

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.

0 Kudos
AdrianMarsden
Occasional Contributor III

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

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Adrian,

   Ahh, I didn't read the full question.

0 Kudos
AdrianMarsden
Occasional Contributor III

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

0 Kudos