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?
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
<title>TEST</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css"/>
<link href="https://community.esri.com//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link rel="stylesheet" type="text/css" href="http://esri.github.io/bootstrap-map-js/src/css/bootstrapmap.css">
<style>
html, body, #mapDiv{
padding: 0;
margin: 0;
height: 100%;
}
#LocateButton {
position: absolute;
top: 98px;
left: 20px;
z-index: 50;
}
</style>
<script src="http://js.arcgis.com/3.11/"></script>
<script>
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>
<div id="mapDiv"></div>
</body>
<!-- jQuery (for Bootstrap's JavaScript plugins). NOTE: You can also use pure Dojo. See examples. -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all plugins or individual files as needed -->
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</html>
Solved! Go to Solution.
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.
You just need to remember the order of how you name the modules matters with how you load them.
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 )
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.
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.
You just need to remember the order of how you name the modules matters with how you load them.
Thanks Steven and Rene. This helps a lot!!