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

404
4
Jump to solution
11-04-2014 08:23 AM
deleted-user-dbQhBq-o3nyM
Occasional Contributor

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>

0 Kudos
1 Solution

Accepted Solutions
ReneRubalcava
Frequent Contributor

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.

View solution in original post

0 Kudos
4 Replies
StevenGraf1
Regular Contributor

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  )

0 Kudos
deleted-user-dbQhBq-o3nyM
Occasional Contributor

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.

0 Kudos
ReneRubalcava
Frequent Contributor

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.

View solution in original post

0 Kudos
deleted-user-dbQhBq-o3nyM
Occasional Contributor

Thanks Steven and Rene. This helps a lot!!

0 Kudos