AnsweredAssumed Answered

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

Question asked by deleted-user-dbQhBq-o3nyM on Nov 4, 2014
Latest reply on Nov 4, 2014 by deleted-user-dbQhBq-o3nyM

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="//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>

Outcomes