Locate Button Will Not Find Location

[NathanSommers]

I'm in the process of creating a web editing application by modifying some of the javascript examples.  I have added LocateButton into the app however when I click on the button it just spins.  It's not my browser because the examples work just fine.  Here is my code:

    <script>

      require([
        "dojo/ready", 
        "dojo/parser",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane", 
        "esri/map",
        "esri/dijit/LocateButton",
        "esri/config",
        "esri/tasks/GeometryService",
        "esri/urlUtils",
        "esri/arcgis/utils",
        "dojo/dom",
        "dojo/_base/array",
        "esri/dijit/editing/Editor",
        "dojo/domReady!"
        ], function(
          ready, 
          parser, 
          BorderContainer,
          ContentPane,
          Map,
          LocateButton,
          config,
          GeometryService,
          urlUtils,
          arcgisUtils,
          dom,
          array,
          Editor
        ) {

          ready(function(){
            parser.parse();
            config.defaults.io.proxyUrl = "/proxy";
            config.defaults.geometryService = new GeometryService("http://maps.ci.perrysburg.oh.us/arcgis/rest/services/Utilities/Geometry/GeometryServer");

            //check to see if a webmap was specified using URL params. If not use the 
            //hardcoded webmap id 
            var urlObject = urlUtils.urlToObject(document.location.href);
            var webmap = "90d7e213fb014d31ac623d233511fcf9";
            if(urlObject.query && urlObject.query.webmap){
              webmap = urlObject.query.webmap;
            }


            //create the map 
            arcgisUtils.createMap(webmap, "map", {
              mapOptions: {
                sliderStyle: "large"
              },
              ignorePopups: true
                             

            }).then(function(response){

              var map = response.map;
                dom.byId("title").innerHTML = response.itemInfo.item.title;
                dom.byId("snippet").innerHTML = response.itemInfo.item.snippet;
                
              geoLocate = new LocateButton({
               map: map,
               geolocationOptions: {
                      maximumAge: 0,
                      timeout: 15000,
                      enableHighAccuracy: true
                  }
              }, "LocateButton");               

                //create the editor widget 
                var layerInfo = [];

                var layers = response.itemInfo.itemData.operationalLayers;
                array.forEach(layers, function (layer){
                  layerInfo.push({
                    "featureLayer": layer.layerObject
                  });
                });

                var settings = {
                  map: map,
                  layerInfos: layerInfo
                };


                var editorWidget = new Editor({
                  settings: settings
                },"editorDiv");
                editorWidget.startup();



            });


        });
 
      });
    </script>

Any help would be much appreciated!

Thank you,
Ian

[NumaGremling]

Are you running it from your server or straight from disk? Always make sure you run it from a server, since some of the functionality will only work otherwise. I've had issues with certain widgets before until I put them into my root directory.

Also, I just looked at mine, and I have an additional line. In your code it would look like this:

              geoLocate = new LocateButton({
               map: map,
               geolocationOptions: {
                      maximumAge: 0,
                      timeout: 15000,
                      enableHighAccuracy: true
                  }
              }, "LocateButton"); 
             geoLocate.startup(); 

EDIT:
Nevermind! You forgot to declare a variable. This should fix it:

var geoLocate = new LocateButton({

[NathanSommers]

Thanks for the quick reply.

I tried making both changes you suggested however neither worked.  I am also running it from my root directory.  When I download the sample from https://developers.arcgis.com/en/javascript/jssamples/widget_locate.html and run it from my root directory everything works fine.  I just run into problems when I'm trying to implement the locateButton in another site.

Thanks for your help,
Ian

[NumaGremling]

I was using the same sample, and I ended up with this, which works:

  var userLocation = new LocateButton({
  map: mainMap
  }, "userLocDIV");
  userLocation.startup();

The only difference I see is that you included geolocationOptions. I've tried adding yours to mine and it still worked, but maybe you still want to take them out and see what happens.

[JanelYang]

Ian,

Which browser are you using? There is a known issue with LocateButton on Firefox. Here is an earlier discussion about it: http://forums.arcgis.com/threads/95213-quot-Find-my-location-quot-is-not-working-in-firefox. Let us know if it helps!

[NathanSommers]

Hi Jerome,

I've tried it in Chrome, IE 9, Safari, and Firefox both with and without the fix outlined in the thread and still nothing.

[GISDev1]

What is the http traffic telling you about the request and response for the geolocation?

[NathanSommers · Accepted solution]

Thanks I just figured it out.  It was a projection issue. 

Watching the traffic I saw this:

Map: Geometry (wkid: 102100) cannot be converted to spatial reference of the map (wkid: 102722)

I'm using a basemap that I published on ArcGIS Online which has a State Plane Ohio North projection.  I changed it to an ArcGIS Onilne basemap with a Web Mercator projection and everything worked fine.

Does anybody know how I would be able to use a non Web Mercator projection with the Locate Widget?

Thanks

[GISDev1]

Thanks I just figured it out.  It was a projection issue. 

Watching the traffic I saw this:

Map: Geometry (wkid: 102100) cannot be converted to spatial reference of the map (wkid: 102722)

I'm using a basemap that I published on ArcGIS Online which has a State Plane Ohio North projection.  I changed it to an ArcGIS Onilne basemap with a Web Mercator projection and everything worked fine.

Does anybody know how I would be able to use a non Web Mercator projection with the Locate Widget?

Thanks

Ok, that's a good start.
What geometry service are you pointing to? Yours or esri's or a custom one?
And what geocoder are you pointing to in order to geolocate the addresses?

[FrancoisPelletier1]

Thanks I just figured it out. It was a projection issue.

Watching the traffic I saw this:

Map: Geometry (wkid: 102100) cannot be converted to spatial reference of the map (wkid: 102722)

I'm using a basemap that I published on ArcGIS Online which has a State Plane Ohio North projection. I changed it to an ArcGIS Onilne basemap with a Web Mercator projection and everything worked fine.

Does anybody know how I would be able to use a non Web Mercator projection with the Locate Widget?

Thanks

Did you manage to find a solution or workaround ?

I came across the exact same issue. I'm also using my own basemap wich is a non Web Mercator projection. I feel like the LocateButton widget just does'nt support using another projection... The console message comes from the api's init.js file.

d._canProject(c)?d.isWebMercator()?b=O.geographicToWebMercator(b):4326===d.wkid&&(b=O.webMercatorToGeographic(b,!0)):(console.log("Map: "+v.substitute({geometry:c.wkid||c.wkt,map:d.wkid||d.wkt},this.invalidGeometry)),b=null))

I would very much like to avoid the pain of building my own Locate widget.

Please help !
Thanks