[GIS] ArcGIS JavaScript Map loads but doesn’t display

arcgis-javascript-apiarcgis-serverbasemap

I just started creating a very simple mobile GIS app using ArcGIS JavaScript API, and I am experiencing a very peculiar issue.

When the app loads, the basemap is white (not visible) until you use the zoom control. After that, the app works except for the BasemapToggle control. I was using another similar post as a template to add a custom basemap to the BasemapToggle control seen here:

How to Use Custom Basemaps with BasemapToggle widget?

There are no errors reporting, so I am not sure what is causing both the fault basemap load and the BasemapToggle issue.

Has anyone else experienced this and have information on resolving the issue?

Best Answer

Change the value you're passing for basemap in the BasemapToggle constructor from:

basemap: 'Local',

to:

basemap: 'local'

(i.e. a lowercase 'L'). Then it'll render right off the bat. I think the value has to match exactly with the thing you put into esriConfig.defaults.map.basemaps.

Related Solutions

[GIS] Map Application Requires Refresh to Initialize

I would consolidate all of those dojo.addOnLoad() calls. I suspect something isn't getting loaded before a function is getting called.

Strip all dojo.addOnLoad calls from all of your external javascript files and bundle them into one call in your main HTML file. Put all the functions you want to fire on load into a new function at the bottom of your javascript like this:

function init() {
  basemapToggle();
  layerToggle();
  whatEver();
}
dojo.addOnLoad(init);

This will ensure that everything has loaded before trying to fire off any functions.

[GIS] Using Custom Basemaps with BasemapToggle widget

The BasemapToggle can only use basemaps from arcgis.com. I'll get the text on the page you referenced updated, it shouldn't say you can use your own custom basemaps. I apologize for the mistake.

It is possible to use custom maps with the basemap toggle, but it takes a little work. First, load the default API config object and put info for your basemaps on esriConfig.defaults.map.basemaps:

require([
  "esri/map", 
  "esri/dijit/BasemapToggle", 
  "esri/config",
  "dojo/domReady!"
], function(
  Map, BasemapToggle, esriConfig
)  {
  console.log(esriConfig.defaults.map.basemaps);
  esriConfig.defaults.map.basemaps.delorme = {
    baseMapLayers: [
      { url: "http://services.arcgisonline.com/ArcGIS/rest/services/Specialty/DeLorme_World_Base_Map/MapServer" }
    ],
    title: "Delorme"
  };

Then specify both basemap and basemaps when you create the toggle:

toggle = new BasemapToggle({
  map: map,
  basemap: "delorme",
  basemaps: {
    delorme: {
      label: "delorme",
      url: "http://www.delorme.com/images/homepage/dbm_icon.jpg"
    }, topo: {
      label: "topo",
      url: "http://js.arcgis.com/3.7/js/esri/dijit/images/basemaps/topo.jpg"
    }
  }
}, "BasemapToggle");
toggle.startup();

Working page on jsbin: http://jsbin.com/iFakeLa/1

Best Answer

Related Solutions

[GIS] Map Application Requires Refresh to Initialize

[GIS] Using Custom Basemaps with BasemapToggle widget

Related Question