Replace basemasp by own maps in the Switch Basemap window

[JoseSanchez]

Hi all

In this sample I would like to replace the  maps in the Switch Basemap window by my own  maps. The goal is to allow the user to choose between several themes for his/her map: standard view, utilities view, business view, field view, engineering view, etc   

How can I customize this window?

http://developers.arcgis.com/en/javascript/samples/widget_basemap/

Regards

[JasonZou]

I would not try to customize the BasemapGallery to meet your need. Actually, BasemapGallery is a very simple widget, a TitlePane with a ContentPane that hosts a list of base maps. You can borrow the same idea to develop a custom map view dijit.

• Create a TitlePane instance.


• Create a ContentPane instance that sits inside the TitlePane.


• Add your maps to the content pane.


• Define onClick event handler for each map view item that the map will switch to.

[LuciHawkins]

It can be cumbersome to do, but it is possible.  I have basemap caches in "Web Mercator" projection (wkid 102100) that I use alongside a few of ESRI's basemaps.  We then have a switching function that turns some layers ON/OFF depending upon what basemap is selected in the switcher.

I use the "Basemapgallery" and add my basemaps to it.  Part of the basemapgallery code:

function createBasemapGallery() {
esri.dijit.BasemapGallery.prototype._markSelected = function(basemap) {
  if (basemap) {
  // unselect all basemap gallery items
   dojo.forEach(dojo.query(".esriBasemapGallerySelectedNode", this.domNode), function(node) {
    dojo.removeClass(node, "esriBasemapGallerySelectedNode");
   });
   // select current basemap gallery item
   var basemapNode = dojo.byId("galleryNode_" + basemap.id);
   if (basemapNode) {
    dojo.addClass(basemapNode, "esriBasemapGallerySelectedNode");
   }
  }
}
             var aerial2010Layer = new esri.dijit.BasemapLayer({
  url : "http://gis.fwb.org/arcgis/rest/services/Maps/AerialFeb2010WebM/MapServer"
});
var aerialBasemap = new esri.dijit.Basemap({
  layers : [aerial2010Layer],
  id : "aerial2010",
  title : "Aerial Photo 2010",
  thumbnailUrl : "images/basemap_imagery.jpg"
});
basemaps.push(aerialBasemap);
var wstreetsLayer = new esri.dijit.BasemapLayer({
  url : "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"
});
var wstreetsBasemap = new esri.dijit.Basemap({
  layers : [wstreetsLayer],
  id : "wstreets",
  title : "Streets",
  thumbnailUrl : "images/basemap_streets.jpg"
});
basemaps.push(wstreetsBasemap);
              basemapGallery = new esri.dijit.BasemapGallery({
  showArcGISBasemaps : false,
  basemaps : basemaps,
  map : map
}, "basemapGalleryDiv");

selectionHandler = dojo.connect(basemapGallery, "onSelectionChange", changeBasemap);

basemapGallery.startup();
}

The selection handler in the code above then calls our "changeBasemap" function:

function changeBasemap() {
basemapsel = basemapGallery.getSelected();
basemapselid = basemapsel.id;
if (basemapselid == "aerial2010") {
  parcelsLayer.hide();
  hydroLayer.hide();
  parcelsarLayer.show();
  bfpLayer.hide();
  roadsLayer.show();
  roadnameLayer.show();
  map.Refresh();
}
if (basemapselid == "wstreets") {
  parcelsLayer.hide();
  hydroLayer.hide();
  parcelsarLayer.show();
  bfpLayer.hide();
  roadsLayer.show();
  roadnameLayer.show();
  map.Refresh();
}
}

The way we have our website organized, I had to declare the map layer names as global variables so they could be called from the function above.

Hope this helps 🙂

Luci

[JasonZou]

Luci, it makes perfect sense to add more basemaps to the BasemapGallery. But in jsn's case, he wants to switch to different maps which, if I understand correctly, contains any number of map layers that can be tiled or dynamic map layers. Just like each map view is a map document. If so, then customize the basemap gallery would be conceptually awkward.

[JoseSanchez]

Yes, want I want to do is to create an object that works like the switch map but using my own maps services instead of a base map. Can it be called a theme switcher

Are there any source code samples that explain how to :
    Create a TitlePane instance.
    Create a ContentPane instance that sits inside the TitlePane.
    Add your maps to the content pane.
    Define onClick event handler for each map view item that the map will switch to.


thanks

[AndyBurns]

I got this working in 3.5, still need to move it over to AMD and 3.6 as im having issues with it on that, not spend anytime though to really look into it.

 //Create basemap layers - manual list that can be edited
            function createBasemapGallery() {
                //Manually create a list of basemaps to display
                var basemaps = [];
                var caBackground_GreyscaleLayer = new esri.dijit.BasemapLayer({
                    url: "http://example/ArcGIS/rest/services/CABackground_Greyscale/MapServer"
                });
                var caBackground_GreyscaleBasemap = new esri.dijit.Basemap({
                    layers: [caBackground_GreyscaleLayer],
                    title: "Greyscale"
                });
                basemaps.push(caBackground_GreyscaleBasemap);
                var caBackgroundLayer = new esri.dijit.BasemapLayer({
                    url: "http://example/ArcGIS/rest/services/CABackground/MapServer"
                });
                var caBackgroundBasemap = new esri.dijit.Basemap({
                    layers: [caBackgroundLayer],
                    title: "Colour"
                });
                basemaps.push(caBackgroundBasemap);
                var caAerial = new esri.dijit.Basemap({
                    layers: [new esri.dijit.BasemapLayer({
                        url: "http://example/ArcGIS/rest/services/CAAerial/MapServer"
                    })],
                    id: "CAAerial",
                    title: "Aerial"
                });
                basemaps.push(caAerial);
                basemapGallery = new esri.dijit.BasemapGallery({
                    showArcGISBasemaps: false,
                    basemaps: basemaps,
                    map: map
                });
                //BasemapGallery.startup isn't needed because we aren't using the default basemap, instead
                //we are going to create a custom user interface to display the basemaps, in this case a menu.
                dojo.forEach(basemapGallery.basemaps, function (basemap) {
                    //Add a menu item for each basemap, when the menu items are selected
                    dijit.byId("galleryMenu")
                        .addChild(new dijit.MenuItem({
                        label: basemap.title,
                        onClick: dojo.hitch(this, function () {
                            this.basemapGallery.select(basemap.id);
                        })
                    }));
                }); 
            }

the HTML

   <div id="basemapswitcher" region="center">
                    <button id="dropdownButton" label="Basemaps" dojoType="dijit.form.DropDownButton">
                        <div dojoType="dijit.Menu" id="galleryMenu">
                            <!--The menu items are dynamically created using the basemap gallery layers-->
                        </div>
                    </button>
                </div>

You will need the dojo.require for the dojo bits including the menu etc

[JasonZou]

After some thoughts, actually customizing the BasemapGallery is a working way to implement your theme switcher. Andy provides a sample code. Here is the idea.

1. Build each map layer using BasemapLayer.


2. Build each map theme using Basemap fed with the list of basemap layers built in step 1.


3. Build a BasemapGallery instance fed with the map themes built in step 2.

Here is the sample code assuming you are using AMD style. If non-AMD style, then replace the class name with the fully qualified names, like esri.dijit.BasemapGallery for BasemapGallery. Be sure to set showArcGISBasemaps to false.

var mapLayer1 = new BasemapLayer({url:"mapService1/rest/url"});
var mapLayer2 = new BasemapLayer({url:"mapService2/rest/url"});
var mapLayer3 = new BasemapLayer({url:"mapService3/rest/url"});

var mapTheme1 = new Basemap({
    layers: [mapLayer1, mapLayer2],
    title: "Map Theme 1",
    thumbnailUrl:"images/mapTheme1.png"
});

var mapTheme2 = new Basemap({
    layers: [mapLayer1, mapLayer3],
    title: "Map Theme 2",
    thumbnailUrl:"images/mapTheme2.png"
});

var basemapGallery = new BasemapGallery({
    showArcGISBasemaps: false,
    basemaps: [mapTheme1, mapTheme2],
    map: map
}, domConstruct.create('div'));

Hope it helps.