nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Using the LocateButton to trigger an event

JohnPapageorgiou

Hi,

I am putting together a web app that contains the LocateButton functionality and then buffering and selecting features. At this point I have it set up so that when I click on a point on the map, a buffer is created and the features within it are selected, and the LocateButton finds the current location. What I would like to do is activate the location button and have it trigger the buffer and selection functionalities. Essentially have it replace the click on the map functionality. I looked at the following links:

https://developers.arcgis.com/javascript/jsapi/locatebutton-amd.html#event-load
https://developers.arcgis.com/javascript/jsapi/map.html

but could not find any event events that would fulfill what I'm looking for, maybe I'm missing something since I'm new to scripting. Attached is my work in progress. Hope it helps.

thanks,

John

WMC_website.zip

Jenhy_YohannaCaceres_0-1621547262599.png

Vind meer berichten getagd met

Accepted answers

All comments

TimWitt

John,

Since you only want to fire your buffer function when a location has been found, you could use this code to get you going:

      var geoLocate = new LocateButton({
        map:map
      }, "LocateButton");
      geoLocate.startup();
        
        geoLocate.on("locate", dothis);
        
        function dothis(locate){
            //Put your buffer code here
        };

Once the user clicks on the locate button and it finds a location your function will run.
You can access the results (for example the position) through accessing the locate properties as outlined here.

Hope this makes sense!

Tim

JohnGravois

you can also trigger the widget programmatically...

locateButton.locate()

https://developers.arcgis.com/javascript/jsapi/locatebutton-amd.html#locate

JohnPapageorgiou

Thank you both for your replies. Pardon my ignorance, and my delay in responding. I've been looking at the arcgis API reference pages and reading through the dojo documentation. I am new at this and trying to make sense of it all. Tim, I think I understand the first three lines of code you sent, but everything becomes confusing to me when you mention "dothis" and then the Function and everything associated with that. Is the "dothis" something that I should be referring to in the html part of my webmap application? I tried setting up a function that would contain the create buffer functionality, but it didn't work. Any sources you could recommend that will explain this in a more basic level.

Thanks,
John

JohnGravois

i wrote up a sample fiddle to show what tim is talking about and demonstrate where to place a callback function.

http://jsfiddle.net/jagravois/4zz6P/

basically, he is recommending that you create an event listener so that you can have some code fire only after someone has used the widget to identify their location. 'doThis' is just the name of the function which is called after that event fires.

hope that helps!

JohnPapageorgiou

Hi John,

Thanks for getting back to me. Things are sort of starting to make sense. I tried what you recommended in the fiddle, but it didn't work. Is it possible that I'm not using a correct javascript method? Essentially what I want to do is replicate the functionality of https://developers.arcgis.com/javascript/jssamples/query_buffer.html (which is done), but have the locateButton be the trigger instead of the click. I have tried all kinds of combinations of things. Would you be willing to take a look at my code to see what is going on? If yes, it is at: http://www.wheresmyclinic.com/WMC_html.html and the javascript file can be accessed by clicking on the link on line 11 of the html page.

Thanks,
John

TimWitt

John,

add this to your code and let me know if it works:

      geoLocate.on("locate", dothat);
        function dothat(evt){
          circle = new Circle({
            center: evt.graphic.geometry,
            geodesic: true,
            radius: 5,
            radiusUnit: "esriMiles"
          });
          map.graphics.clear();
          map.infoWindow.hide();
          var graphic = new Graphic(circle, circleSymb);
          map.graphics.add(graphic);

          var query = new Query();
          query.geometry = circle.getExtent();

          featureLayer.queryFeatures(query, selectInBuffer);
        };

Tim

JohnGravois

john,

what tim noticed is that currently you are 'listening' for the locate event to be triggered, but using that geometry to create your circle graphic.

in your code right now you are wiring up a second event listener to wait for someone to click on the map after the locate button has already been pressed. you can see that its working if you click on the map after using the locate widget and then zoom out enough levels to display the 10 mile diameter ring.

Doe mee aan het gesprek

Aangemelde leden kunnen berichten plaatsen, updates volgen en meer. Nieuw hier? Registreer een gratis account.

Snelle Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.