topic Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application? in ArcGIS JavaScript Maps SDK Questions

Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application?

deleted-user-dbQhBq-o3nyM — Tue, 04 Nov 2014 16:23:09 GMT

You might be able to tell, I'm a newbie to this javascript API. I have had luck creating web applications of both the LocateButton and one of the ArcGISDynamicMapServiceLayer in separate applications, but when I try to combine the two, it comes up blank.

Can someone explain to me, a newbie, why this won't work please? Can you give me a link to a functioning web application built on Javascript and HTML with multiple widgets in it?

<style>

html, body, #mapDiv{

padding: 0;

margin: 0;

height: 100%;

}

#LocateButton {

position: absolute;

top: 98px;

left: 20px;

z-index: 50;

}

</style>

var map;

require([

"esri/map",

"esri/dijit/LocateButton",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/ImageParameters",

"dojo/domReady!"

], function (

map, LocateButton, ImageParameters, ArcGISDynamicMapServiceLayer, ) {

map = new Map("mapDiv", {

basemap:"hybrid",

zoom: 11,

center:[-110.60, 39.60],

sliderOrientation : "horizontal",

scrollWheelZoom: true

});

var imageParameters = new ImageParameters();

imageParameters.format = "jpeg"; //set the image type to PNG24, note default is PNG8.

//Takes a URL to a non cached map service.

var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("http://maps.carbon.utah.gov/arcgis/rest/services/LatLong/MapServer/", {

"opacity" : 1,

"imageParameters" : imageParameters

});

var geoLocate = new LocateButton({

map: map

}, "LocateButton");

geoLocate.startup();

});

map.addLayer(dynamicMapServiceLayer);

});

</script>

</head>

<body>

</body>

</html>

Re: Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application?

StevenGraf1 — Tue, 04 Nov 2014 16:37:05 GMT

Your require statements have to be in the same order as your parameters. Flip ImageParameters and ArcGISDynamicMapServiceLayer around like so

require([
        "esri/map",
        "esri/dijit/LocateButton",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ], function (
        map, LocateButton, ArcGISDynamicMapServiceLayer, ImageParameters  )

Re: Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application?

ReneRubalcava — Tue, 04 Nov 2014 16:54:30 GMT

You are defining your modules in the wrong order.

      require([
        "esri/map",
        "esri/dijit/LocateButton",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters",
        "dojo/domReady!"
      ], function (
        map, /*Should be Map, how you use in code*/ LocateButton, ImageParameters/*swap*/, ArcGISDynamicMapServiceLayer,/*swap, remove comma*/  ) {

You need to swap the ArcGISDynamicMapServiceLayer withe ImageParameters.

Here is a working JSFiddle with your code cleaned up a bit.

Edit fiddle - JSFiddle

You just need to remember the order of how you name the modules matters with how you load them.

Re: Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application?

deleted-user-dbQhBq-o3nyM — Tue, 04 Nov 2014 16:56:09 GMT

Thanks for the response Steven. I rearranged everything like you've mentioned, but when I run it on the live, it shows up white. The same in the JavaScript Sandbox. I can't get both the locate tool and the layers to show on the same map application...programming is frustrating and rewarding. Right now it is frustrating.

Re: Why can I not combine LocateButton and ArcGISDynamicMapServiceLayer in the same application?

deleted-user-dbQhBq-o3nyM — Tue, 04 Nov 2014 17:08:18 GMT

Thanks Steven and Rene. This helps a lot!!