Basic Button Question

[JohnPapageorgiou]

I know this is probably very simple, but I don't even know where to begin to figure this out.  I have a map click event, and I want to change it so that the same is triggered by a button instead.  Any answers or literature I can be pointed to?

thanks,

John

[HaroldBostic]

Depends on what you are trying to do. In general you would move your code from your map click function to another function that we'll call respondToClick then Noth your map click and button click would just call that fiction

That is all well and good if you don't need the info from the map click event even when you button click.  If you do need map event info then you have to further explain what you need and maybe we can help

[JohnPapageorgiou]

I have a map web api that performs a closest facility search, with a GPS location functionality.  Right now I have to click on the gps point and a graphic dot draws along with the line to the closest facility and provides driving directions.  I would like to be able to click on a button that would activate the solve for closest facility, rather than clicking on the map. Right now, it is 

map.on("click", mapClickHandler);

If you would like to see all the code you could go to: Closest Facilities‌ (line 89 of source code).

thanks,

John

[OwenEarley · Accepted solution]

I would also suggest refactoring your code to use a function that you can call from the button click or map click events.

Your map click event handler can pass the map click point to the new function:

        // solve the closest facility for the map click location
        function mapClickHandler(evt) {
            var mapPt = evt.mapPoint;
            solveClosestFacilities(mapPt);
        }

Your button click event handler can pass the geolocation point to the new function:

        // wire up the button click event
        dom.byId("search-geolocation-btn").onclick = geolocationHandler;


        // this function would be wired up to your button click event
        function geolocationHandler() {
            if (pt){
                solveClosestFacilities(pt);
            } else {
                alert("Geolocation point is not available.")
            }
        }

The new function is basically the same as your old mapClickHandler function - note the minor changes:

        // solve the closest facility for the search point (thie point comes from the map click location or the geolocation)
        function solveClosestFacilities(searchPt) {
            clearGraphics();
            //Creating directions text in directionsDiv
            dom.byId("directionsDiv").innerHTML= "";

            //Add incident from user's current location on map click...again maybe change to when a button is clicked        
            var inPoint = new Point(searchPt); // note this line has changed
            var location = new Graphic(inPoint);
            incidentsGraphicsLayer.add(location);

            // the rest is the same as your previous code...

        }

I have created a modified version of your code on JS Bin to show these changes in action.

Hope this helps.

Owen

www.spatialxp.com.au

[JohnPapageorgiou]

Owen,

thanks a million!