Select to view content in your preferred language

Basemap gallery

1854
5
08-14-2014 06:31 AM
KeisukeNozaki
Frequent Contributor

I wonder if there is a way to customize basemap gallery to set own tiled map services instead of ArcGIS.com maps.

Thank you for your advice.

0 Kudos
5 Replies
TimWitt2
MVP Alum

Hey Keisuke,

Check out this example:

Basemap Gallery - user-defined items | ArcGIS API for JavaScript

It is in legacy, but it should give you an idea on how to do it.

Tim

KeisukeNozaki
Frequent Contributor

Thanks!

I am not familiar with legacy but understand the concept.

Hope esri will update the code for AMD.

0 Kudos
TimWitt2
MVP Alum

This might help: The abc’s of AMD | ArcGIS Blog

BrandonVan_Horn
Regular Contributor

I have this implemented in AMD. I use a config file with the basemaps that I want included, and I call createBasemapGallery() at the end of my map load event.

function createBasemapGallery() {

    /// <summary>manually create basemaps to add to basemap gallery</summary>

    try {

        var basemaps = [];

        require(["esri/dijit/BasemapGallery", "esri/dijit/BasemapLayer", "esri/dijit/Basemap"], function (

            BasemapGallery, BasemapLayer, Basemap

            ) {

            for (b in mybasemaps) {

            //load from config array of basemaps

                if (mybasemaps.addtomap == true) {

                    var bm = null

                    bm = new esri.dijit.BasemapLayer({ url: mybasemaps.url });

                    var layerBasemap = new esri.dijit.Basemap({

                        layers: [bm],

                        id: mybasemaps.svcid,

                        title: mybasemaps.title,

                        thumbnailUrl: mybasemaps.thumbnailUrl

                    });

                    basemaps.push(layerBasemap)

                };

            };

            //add the basemap gallery, in this case we'll display maps from ArcGIS.com

            var basemapGallery = new BasemapGallery({

                basemaps: basemaps,

                showArcGISBasemaps: false /*config.external*/,

                map: map

            }, "basemapGallery");

            basemapGallery.startup();

            // if (config.external) {

            //      basemapGallery.select('ESRITerrain');

            // }

            basemapGallery.on("error", handleProcessError);

        });

    } catch (err) {

        errorHandler(err, "createBasemapGallery")

    };

};

//config array of mybasemaps

var mybasemaps = {

    "ESRITerrain": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer",

        "svcid": "ESRITerrain", "title": "Terrain (Default)", "thumbnailUrl": "img/thumbs/Terrain_ne_usa.png", "addtomap": config.external

    },

    "Pic2013": { "url": ArcServer + "Pictometry2013/MapServer",

        "svcid": "Pic2013", "title": "Prescott/Prescott Valley 2013", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    },

    "ESRIImagery": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",

        "svcid": "ESRIImagery", "title": "ESRI Imagery", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": config.external

    },

    //    },"NAIP2013": { "url":"http://gis.apfo.usda.gov/arcgis/rest/services/NAIP/Arizona_2013_1m_NC/ImageServer",

    //        "svcid": "NAIP2013", "title": "NAIP 2013", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    // },

    "NAIP2011": { "url": ArcServer + "NAIP2010/MapServer",

        "svcid": "NAIP2010", "title": "NAIP 2010", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    },

    "AE2009": { "url": ArcServer + "AE2009a/MapServer",

        "svcid": "AE2009", "title": "Aerial Express 2009", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    },

    "DG2007": { "url": ArcServer + "DG2007/MapServer",

        "svcid": "DG2007", "title": "Digital Globe 2007", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    },

    "NAIP2007": { "url": ArcServer + "NAIP2007/MapServer",

        "svcid": "NAIP2007", "title": "NAIP 2007", "thumbnailUrl": "img/thumbs/imagery.jpg", "addtomap": true

    },

    "Blank": { "url": "http://gis.yavapai.us/arcgis/rest/services/NoBasemap/MapServer",

        "svcid": "Blank", "title": "No Basemap", "thumbnailUrl": "img/thumbs/Terrain_ne_usa.png", "addtomap": true

    },

    "ESRIStreets": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer",

        "svcid": "ESRIStreets", "title": "Streets", "thumbnailUrl": "img/thumbs/streets.jpg", "addtomap": config.external

    },

    "ESRINatGeo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/NatGeo_World_Map/MapServer",

        "svcid": "ESRINatGeo", "title": "National Geographic", "thumbnailUrl": "img/thumbs/natgeo.jpg", "addtomap": config.external

    },

    "ESRI_Topo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer",

        "svcid": "ESRI_Topo", "title": "Topographic", "thumbnailUrl": "img/thumbs/topographic.jpg", "addtomap": config.external

    },

    "Delorme_Topo": { "url": "http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer",

        "svcid": "Delorme_Topo", "title": "Delorme Topo", "thumbnailUrl": "img/thumbs/topographic.jpg", "addtomap": config.external

    },

    "USATopo": { "url": "http://services.arcgisonline.com/ArcGIS/rest/services/USA_Topo_Maps/MapServer",

        "svcid": "USATopo", "title": "USGS Topo", "thumbnailUrl": "img/thumbs/usa_topo.jpg", "addtomap": config.external

    }

};

Hope that helps

StanMcShinsky
Frequent Contributor

In the ESRI JS API reference there is sample code to show how to do this using arcgis online basemaps and custom ones.

You need to use the BasemapLayer dijit.

basemapgallery-amd | API Reference | ArcGIS API for JavaScript

Here is how you would add  your own basemap to a gallary

require([
 
"esri/dijit/BasemapLayer", "esri/dijit/Basemap", ...
], function(BasemapLayer, Basemap, ... ) {
 
var layer = new BasemapLayer({

    url
:"http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/PublicSafety/PublicSafetyBasemap/MapServe..."

 
});

 
var basemap = new Basemap({

    layers
:[layer],

    title
:"Public Safety",

    thumbnailUrl
:"images/safetyThumb.png"

 
});

  basemapGallery
.add(basemap);

 
 
...
});