Dijit BasemapToggle Kills Map?

LauraMiles1 — Wed, 01 Apr 2015 22:28:56 GMT

Hi,

I'm VERY new to the ArcGIS javascript API. I'm trying to get two ESRI samples to work together:

Toggle layer visibility | ArcGIS API for JavaScript

Basemap Toggle | ArcGIS API for JavaScript

I've got Toggle layer visibility working fine, but when I try to add in Basemap Toggle things go sideways and I don't know enough about the API to know why. Soon as I add in the reference esri/dijit/BasemapToggle, the map itself disappears. Here's my code:

<code>

<!DOCTYPE html>

<html>

<head>

<!--The viewport meta tag is used to improve the presentation and behavior of the samples

on iOS devices-->

<title>Maps on Request</title>

<style>

html, body, #map {

padding: 0;

margin: 0;

height: 100%;

}

#TOC {

position: absolute;

font-family: verdana, helvetica, arial;

margin: 5px;

padding: 25px;

padding-left: 75px;

z-index: 50;

}

#BasemapToggle {

position: absolute;

top: 20px;

right: 20px;

z-index: 50;

}

</style>

var map;

require([

"esri/dijit/BasemapToggle",

"esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ImageParameters",

"dojo/dom",

"dojo/on",

"dojo/query",

"dojo/domReady!"

function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {

var layer, visibleLayerIds = [];

map = new Map("map", {

basemap: "topo"

});

//Use the ImageParameters to set the visibleLayerIds layers in the map service during ArcGISDynamicMapServiceLayer construction.

var imageParameters = new ImageParameters();

//This layer is visible on startup

imageParameters.layerIds = [0];

imageParameters.layerOption = ImageParameters.LAYER_OPTION_SHOW;

//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE

layerCadastral = new ArcGISDynamicMapServiceLayer("http://cop-gis4:6080/arcgis/rest/services/MOR/MOR_Cadastral_WGS1984/MapServer",

{"imageParameters": imageParameters});

map.addLayer(layerCadastral);

on(dom.byId("layer0CheckBox"), "change", updateLayerVisibility);

on(dom.byId("layer1CheckBox"), "change", updateLayerVisibility);

on(dom.byId("layer2CheckBox"), "change", updateLayerVisibility);

function updateLayerVisibility () {

var inputs = query(".list_item");

var inputCount = inputs.length;

//Dummy layer - is there a workaround? Setting this to an actual layer means it can't be turned off

visibleLayerIds = [1001];

for (var i = 0; i < inputCount; i++) {

if (inputs.checked) {

visibleLayerIds.push(inputs.value);

}

if (visibleLayerIds.length === 0) {

visibleLayerIds.push(-1);

}

layerCadastral.setVisibleLayers(visibleLayerIds);

}

var toggle = new BasemapToggle({

map: map,

basemap: "satellite"

}, "BasemapToggle");

toggle.startup();

});

</script>

</head>

<body>

<input type='checkbox' class='list_item' id='layer0CheckBox' checked value=0 />VFPA Boundary<br>

<input type='checkbox' class='list_item' id='layer1CheckBox' value=3 />Municipal Boundaries<br>

</div>

<div id="BasemapToggle">BasemapToggle</div>

</body>

</html>

</code>

Re: Dijit BasemapToggle Kills Map?

SteveCole — Sun, 12 Dec 2021 08:21:27 GMT

More than likely, the issue lies with the specified order of widgets in your code:

require([
     "esri/dijit/BasemapToggle",
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {.....

Change it to this and see what happens:

require([
        "esri/map",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
     "esri/dijit/BasemapToggle",
        "dojo/dom",
        "dojo/on",
        "dojo/query",
        "dojo/domReady!"
      ],
        function (Map, ArcGISDynamicMapServiceLayer, ImageParameters, BasemapToggle, dom, on, query) {

In the function() declaration, basemapToggle must be in the same position specified as part of the reuire([..]) statement.

Re: Dijit BasemapToggle Kills Map?

LauraMiles1 — Wed, 01 Apr 2015 22:52:22 GMT

That was it - thank you Steve!

topic Re: Dijit BasemapToggle Kills Map? in ArcGIS JavaScript Maps SDK Questions

Dijit BasemapToggle Kills Map?

Re: Dijit BasemapToggle Kills Map?

Re: Dijit BasemapToggle Kills Map?