Add own basemap to Basemap Gallery, but doesn't behave as part of the Gallery.

4122
2
Jump to solution
07-08-2014 11:42 AM
DorothyMortenson
Occasional Contributor II

I have added the USA Topo maps to the BasemapGallery.  Works great in the widget as an option to choose from.

But I want to make the USA Topo maps the default for the web application.  I cannot seem to get it to recognize the new layer.

For now, I have set the basemap to be "gray".

Then I make the BasemapGallery.

Then, when the user zooms in, it should change to my new basemap.  This code works if I change the basemap to "topo" or one of the other ArcGIS basemaps. But it won't get the usatopo basemap.

In this example, I also add the google maps. I'd be interested in knowing how to select one of the google themes as a basemap.

But first things first, - how do I get the usatopo to be the default?  If I make it a tiled layer and add it as a map layer ( as in using map.addLayers([usatopo]) , then it covers the other basemaps, if someone switches to one of those. So it's acting like a layer and not a basemap.

Thank you.

==================================================

map = new Map("map", {

            center: [-120.6, 44],

            zoom: 7,

            basemap: "gray",

            sliderOrientation: "vertical",

            sliderStyle: "small",

            fadeOnZoom: true,

            force3DTransforms: true,

            showAttribution: false,

            navigationMode: "css-transforms"

});

map.on("load", function () {

            otherMapFeatures();

            this.map.on("zoom-end", task);

});

function task() {

            this.map.setBasemap("usatopo");  // this work with "topo"

});

function otherMapFeatures(){

...

var mybasemap = [];

var usatopo = new BasemapLayer({

                url: "http://services.arcgisonline.com/arcgis/rest/services/USA_Topo_Maps/MapServer"

            });

            var myUSATopo = new Basemap({

                layers: [usatopo],

                id: "usatopo",

                title: "USA Topo",

                thumbnailUrl: "images/usatopo.png"

            });

            mybasemap.push(myUSATopo);   

            var basemapGallery = new BasemapGallery({

                showArcGISBasemaps: true,

                basemaps: mybasemap,

                map: map,

                google: {

                    apiOptions: {

                        v: '3.6' // use a specific version is recommended for production system.

                    },

                    mapOptions: {

                        streetViewControl: false

                    }

                },

            }, "basemapGallery");

            basemapGallery.startup();

         basemapGallery.on("error", function (msg) {

                console.log("basemap gallery error:  ", msg);

       });

==================================================

0 Kudos
1 Solution

Accepted Solutions
JohnGravois
Frequent Contributor

i'd recommend listening for the startup event of the BasemapGallery and then calling BasemapGallery.select() with the id your USA topo layer.

https://developers.arcgis.com/javascript/jsapi/basemapgallery-amd.html#select

View solution in original post

0 Kudos
2 Replies
JohnGravois
Frequent Contributor

i'd recommend listening for the startup event of the BasemapGallery and then calling BasemapGallery.select() with the id your USA topo layer.

https://developers.arcgis.com/javascript/jsapi/basemapgallery-amd.html#select

0 Kudos
DorothyMortenson
Occasional Contributor II

OK, finally got it to work.

basemapGallery.select("usatopo") - what I used for the ID when I defined it.

Just a note here: This is not the same for "topo".  "topo" is not the ID of the standard topo theme.  The ID is more like "basemap_5" and I think the numbers change.  I used the following to find out what the actual ID and title are called.

first make the selection in the gallery, then call a function that includes:

var a = basemapGallery.getSelected();

console.log("a " + a.id + " " + a.title);