Basic Button Question

846
4
Jump to solution
07-26-2014 02:06 PM
JohnPapageorgiou
New Contributor III

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

Tags (1)
0 Kudos
1 Solution

Accepted Solutions
OwenEarley
Occasional Contributor III

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

View solution in original post

0 Kudos
4 Replies
HaroldBostic
Occasional Contributor II

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

0 Kudos
JohnPapageorgiou
New Contributor III

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

0 Kudos
OwenEarley
Occasional Contributor III

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

0 Kudos
JohnPapageorgiou
New Contributor III

Owen,

thanks a million!

0 Kudos