Locate Button with ArcOnline Web Map

Gary_A_Goeschel_II · ‎06-25-2014

I apologize in advance, my question is rather elementary. I have little to no Javascript experience but you have to start somewhere, am I right? On to my question:

I can't seem to get the Locator Button to work when I replace the standard basemap in the sample code with a arcOnline web map. The web map works, the locator button is visible and toggles between default button and the useTracking button, but the extent of the map doesn't change and the locator symbol is not visible.

My code is here:

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Locate Button and WebID</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>     html, body, #mapDiv {       padding:0;       margin:0;       height:100%;     }     #LocateButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }   </style>   <script src="//js.arcgis.com/3.9/"></script>   <script>      var map  var geoLocate     require([       "esri/map",       "esri/arcgis/utils",    "esri/dijit/LocateButton",       "dojo/domReady!"       ], function (Map, arcgisUtils, LocateButton) {         arcgisUtils.createMap("4778fee6371d4e83a22786029f30c7e1", "mapDiv").then(function (response) {         map = response.map        });    geoLocate = new LocateButton({         map: mapDiv,   scale: 11,   useTracking: true       }, "LocateButton");       geoLocate.startup();             });   </script>    </head>    <body>     <div id="mapDiv" class="map">  <div id="LocateButton"></div>  </div>   </body>   </html>

Thanks in advance for all of your help!

LisCollins · ‎06-26-2014

Ok, I got it to work, but you have to reformat your code a little bit differently. Not sure why though. I used the dojo/ready and dojo/parser methods? to make it work. Maybe it's required when using an AGOL map? I wish they would show more sample code with AGOL map examples.

Links about dojo/ready and dojo/parser here that may help with understanding:
dojo/ready

dojo/parser

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Locate Button and WebID</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>     html, body, #mapDiv {       padding:0;       margin:0;       height:100%;     }     #LocateButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }   </style>   <script src="//js.arcgis.com/3.9/"></script>   <script>    var geoLocate;     require([  "dojo/parser",         "dojo/ready",       "esri/map",       "esri/arcgis/utils",    "esri/dijit/LocateButton",       "dojo/domReady!"       ], function (parser, ready, Map, arcgisUtils, LocateButton)         {        //create a map and instance of geoLocator and other widgets here         ready(function(){          parser.parse();    {         arcgisUtils.createMap("4778fee6371d4e83a22786029f30c7e1", "mapDiv").then(function (response) {         var actualmap = response.map;     geoLocate = new LocateButton({         map: actualmap,   scale: 11,   useTracking: true       }, "LocateButton");       geoLocate.startup();     });        }})});   </script>    </head>    <body>     <div id="mapDiv" class="map">  <div id="LocateButton"></div>  </div>   </body>   </html>

View solution in original post

LisCollins · ‎06-25-2014

Not sure if this will help, but shouldn't there be a comma between var map and var geoLocate?

Gary_A_Goeschel_II · ‎06-26-2014

Thanks for the reply! Unfortunately placing a comma between the two var's resulted everything (map and navigation bar) disappearing. Adding a semi colon doesn't change anything, locate button still doesn't seem to work.

Any other ideas?

LisCollins · ‎06-26-2014

Under "geoLocate = new LocateButton({",

try changing map: mapDiv,

to map:map,

I think you are referencing the wrong variable which is why the LocateButton isn't working. "mapDiv" is the name of the div container which holds the map, not the map itself.

This is why I hate that ESRI uses map as variable names in their examples, when "map" is a reserved word for some objects. It gets confusing.

Your map variable is called "map." Maybe name it something else so it's less confusing. I like using "acutalmap."
(Again, I think. I'm still new at this stuff.)

Gary_A_Goeschel_II · ‎06-26-2014

That was a good idea, unfortunately again it didn't work. When I change map: mapDiv to just map: map, the geolocate button disappears.

I've been trying to figure this out for 2 days with no luck. I'm starting to wonder if it would be easier to use the Geolocate API instead.

Thanks again for the reply!

LisCollins · ‎06-26-2014

Ok, I got it to work, but you have to reformat your code a little bit differently. Not sure why though. I used the dojo/ready and dojo/parser methods? to make it work. Maybe it's required when using an AGOL map? I wish they would show more sample code with AGOL map examples.

Links about dojo/ready and dojo/parser here that may help with understanding:
dojo/ready

dojo/parser

<!DOCTYPE HTML> <html> <head>   <meta charset="utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <title>Locate Button and WebID</title>   <link rel="stylesheet" type="text/css" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">   <style>     html, body, #mapDiv {       padding:0;       margin:0;       height:100%;     }     #LocateButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }   </style>   <script src="//js.arcgis.com/3.9/"></script>   <script>    var geoLocate;     require([  "dojo/parser",         "dojo/ready",       "esri/map",       "esri/arcgis/utils",    "esri/dijit/LocateButton",       "dojo/domReady!"       ], function (parser, ready, Map, arcgisUtils, LocateButton)         {        //create a map and instance of geoLocator and other widgets here         ready(function(){          parser.parse();    {         arcgisUtils.createMap("4778fee6371d4e83a22786029f30c7e1", "mapDiv").then(function (response) {         var actualmap = response.map;     geoLocate = new LocateButton({         map: actualmap,   scale: 11,   useTracking: true       }, "LocateButton");       geoLocate.startup();     });        }})});   </script>    </head>    <body>     <div id="mapDiv" class="map">  <div id="LocateButton"></div>  </div>   </body>   </html>

Gary_A_Goeschel_II · ‎06-26-2014

I can't thank you enough! I thought I had tried adding in the parser and ready methods with no luck. Maybe it was combination of that and modifying the map variable and pointing to it within the geolocate function. Awesome job again!!