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>
