1

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 6 '15 at 19:45
  • I think you should edit your question to reference what is different about it from gis.stackexchange.com/questions/54509/… so that we know you have already considered that Q&A. – PolyGeo May 6 '15 at 21:50
1

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.