How to add custom basemaps to BasemapGallery

Question

I would like to add my own custom basemaps to the BasemapGallery. Is there any way I can create my own BasemapGallery with only my maps? I am using the ArcGIS API for javascript.

EDIT: for clarity

I have already created a custom basemap that the answer here describes. The issue is that I would like to create a Basemap Gallery but with my own basemap, not ArcGIS's. I hope this makes a little more sense now.

I don't believe this will help me as I am using the ArcGIS API for JavaScript. I need to know how to do it in javascript/html. I have already created my own basemaps but I need to know how to create a basemaps gallery. — Programmer, May 06 '15 at 19:45
I think you should edit your question to reference what is different about it from http://gis.stackexchange.com/questions/54509/using-own-basemap-with-arcgis-api-for-javascript so that we know you have already considered that Q&A. — PolyGeo, May 06 '15 at 21:50

score 1 · Answer 1 · answered May 08 '15 at 13:53

I found the answer that I think may help other people trying to accomplish this as well. The code below shows how to make a Custom Basemap Gallery using your own Basemaps (not ArcGIS maps). In this case, it will create two basemaps for a single gallery.

<script>
dojo.require("esri.map");
dojo.require("dijit.form.Button");
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.dijit.BasemapGallery");
dojo.require("esri.arcgis.utils");

var map;

function init() {
  map = new esri.Map("map");
  createBasemapGallery();
}

function createBasemapGallery() {
  //manually create basemaps to add to basemap gallery
  var basemaps = [];
  var firstBasemapLayer = new esri.dijit.BasemapLayer({
    url:"--url to your basemap--"
  });
  var firstBasemap = new esri.dijit.Basemap({
    layers:[firstBasemapLayer],
    title:"First Basemap",
    thumbnailUrl:"images/firstbasemap.png"
  });
  basemaps.push(firstBasemap);
  var secondBasemapLayer = new esri.dijit.BasemapLayer({
    url:"--url to your basemap--"
  });
  var secondBasemap = new esri.dijit.Basemap({
    layers:[secondBasemapLayer],
    title:"Second Basemap",
    thumbnailUrl:"images/secondBasemap.png"
  });
  basemaps.push(secondBasemap);

  var basemapGallery = new esri.dijit.BasemapGallery({
    showArcGISBasemaps:false,
    basemaps:basemaps,
    map:map
  }, "basemapGallery");
  basemapGallery.startup();

  dojo.connect(basemapGallery, "onError", function (error) {
    console.log(error);
  });
}

dojo.ready(init);

Once this is used in your HTML file, you can then add code to add it to your webpage.

<div data-dojo-type="dijit.layout.BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width:100%;height:100%;"> 
<div id="map"
       data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'center'"></div>
<div data-dojo-type="dijit.layout.ContentPane"
       data-dojo-props="region:'right'" id="rightPane">

    <div data-dojo-type="dijit.layout.BorderContainer"
         data-dojo-props="design:'headline', gutters:false"
         style="width:100%;height:100%;">
      <div id="paneHeader"
           data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'top'">
        <span>Select Basemap</span>
      </div>
      <div data-dojo-type="dijit.layout.ContentPane"
           data-dojo-props="region:'center'">

        <div id="basemapGallery"></div>

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

A tutorial for this can be found here.

How to add custom basemaps to BasemapGallery

1 Answers1