topic Re: Button in ArcGIS JavaScript Maps SDK Questions

Button

jaykapalczynski — Tue, 25 Mar 2014 11:28:06 GMT

Looking to create a simple button that runs some code like IDENTIFY.
I am looking for two scenarios:
1. The button must be pressed each time you want to run the code
2. The code runs until you select another button

Anyone of an example for each...Appreciated.

Re: Button

PaulVepraskas — Sun, 12 Dec 2021 06:39:07 GMT

This should work for either one...

Create a global variable

var buttonclick;

Then create the function the button calls

function buttoncall() {
    buttonclick = dojo.connect(map, "onClick" resultFunction);
}

function resultFunction() {
    dojo.disconnect(buttonclick);
    alert("test");
}

Give it a shot

Re: Button

JakeSkinner — Tue, 25 Mar 2014 12:55:28 GMT

Hi Jay,

Here is an example that sets the infoTemplate each time the button is clicked.

Re: Button

jaykapalczynski — Sun, 12 Dec 2021 06:39:09 GMT

Is there anything that I need in the

 require([

    ], function(

    ) {

Re: Button

jaykapalczynski — Sun, 12 Dec 2021 06:39:12 GMT

Hi Jay,

Here is an example that sets the infoTemplate each time the button is clicked.

I am doing to below....I the map and nothing....the way I want it. I then click the button and then click a feature...it grabs the attrbiute info and displays in a pane on the left.

The issue is that it allows the user to continue clicking in the map....I want to create this where it jumps out after each map click.

Cancel the functionality after a single click...so no longer call the Function
AND OR cancel the Function call if another button is pressed...

Say I have 2 buttons...Click one and it allows me to select and do what my code is doing below....UNTIL I click the other button

<input type="button" id="button" value="Identify" />

    on(dom.byId("button"), "click", function () {
        featureLayer.setInfoTemplate(template);
 initializeSidebar(app.map);
        on(app.map.infoWindow, "show", function () {
            featureLayer.setInfoTemplate(null);
        })
    })

    function initializeSidebar(map){
        var popup = map.infoWindow;

        //when the selection changes update the side panel to display the popup info for the
        //currently selected feature.
        connect.connect(popup, "onSelectionChange", function(){
            displayPopupContent(popup.getSelectedFeature());
        });

        //when the selection is cleared remove the popup content from the side panel.
        connect.connect(popup, "onClearFeatures", function(){
           //dom.byId replaces dojo.byId
           dom.byId("featureCount").innerHTML = "Click to select feature(s)";
           //registry.byId replaces dijit.byId
           registry.byId("leftPane").set("content", "");
           domUtils.hide(dom.byId("pager"));
        });

        //When features are associated with the map's info window update the sidebar with the new content.
        connect.connect(popup, "onSetFeatures", function(){
           displayPopupContent(popup.getSelectedFeature());
           dom.byId("featureCount").innerHTML = popup.features.length + " feature(s) selected";

       //enable navigation if more than one feature is selected
       popup.features.length > 1 ? domUtils.show(dom.byId("pager")) : domUtils.hide(dom.byId("pager"));
         });
       }

    function displayPopupContent(feature){
       if(feature){
           var content = feature.getContent();
           registry.byId("leftPane").set("content", content);
       }
    }

Re: Button

JakeSkinner — Tue, 25 Mar 2014 14:36:43 GMT

See this example here. This should help you get going in the right direction.

Re: Button

jaykapalczynski — Sun, 12 Dec 2021 06:39:15 GMT

Thanks Jake..that worked great...

Still trying to dig into this one though...its nice and streamlined and seems to shut down after each click in the map...would be nice to get this one going as well....

Do you still have to define the button in HTML?

var buttonclick;

function buttoncall() {
    buttonclick = dojo.connect(map, "onClick" resultFunction);
}

function resultFunction() {
    dojo.disconnect(buttonclick);
    alert("test");
}

Re: Button

jaykapalczynski — Sun, 12 Dec 2021 06:39:17 GMT

This should work for either one...

Create a global variable
var buttonclick;
Then create the function the button calls
function buttoncall() {
    buttonclick = dojo.connect(map, "onClick" resultFunction);
}

function resultFunction() {
    dojo.disconnect(buttonclick);
    alert("test");
}
Give it a shot

Do i have to define anything in HTML?
Do I have to define anything in the REQUIRE?

I really like this approach....just cant seem to get it working...is there something i am missing?
Thanks

Re: Button

PaulVepraskas — Sun, 12 Dec 2021 06:39:20 GMT

In the HTML create a button that calls the function buttoncall

<a href="javascript:buttoncall()" id="button1" ><img alt="button1IMG" id="button1IMG" style="bottom:10px; left: 10px; width:36px; position:absolute; z-index:22;  border:none;" src="images/Button.png"/></a>

The map onClick will then stay activate until in your code you set it disconnect

dojo.disconnect(buttonclick);

Re: Button

PaulVepraskas — Sun, 12 Dec 2021 06:39:23 GMT

Sorry I missed a coma....

 buttonclick = dojo.connect(map, "onClick", resultFunction);

Re: Button

jaykapalczynski — Thu, 27 Mar 2014 10:21:54 GMT

Fantastic...works great...thanks....very appreciated.

Re: Button

PaulVepraskas — Sun, 12 Dec 2021 06:39:25 GMT

Here is the FULL working code... click the button on the lower left of the map, then click the map. alert will pop up. click the map again. No alert.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9">
    
    <title>mapMUSKEGO | mapVEPRASKAS</title>
 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.6/js/esri/css/esri.css">

<style type="text/css">

      html,body,#map{
        padding:0;
        margin:0;
        overflow:hidden;
        height:100%;
        background-color:#dbddda;
      }
      
      
 </style>

 <script src="http://js.arcgis.com/3.8/"></script>

    <script>
   dojo.require("esri.map");
  
   var map;
   var initExtent;
   
   var buttonclick;
   
   function init() {
    initExtent = new esri.geometry.Extent(2485078.859947771, 312461.2599477768, 2517629.6100261062, 344895.2419843375, new esri.SpatialReference({ "wkid": 32054 }));

             map = new esri.Map("map", { extent: initExtent, logo: false, slider: false});

             var greyMAP = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", { });
             map.addLayer(greyMAP);
   } 
   
   function buttoncall() {
       buttonclick = dojo.connect(map, "onClick", resultFunction);
   }
   
   function resultFunction() {
       dojo.disconnect(buttonclick);
       alert("test");
   }  
   
   dojo.ready(init);
   
   
  </script>

 </head>

 <body>  
  <div id="map"></div>
  <a href="javascript:buttoncall()" id="button1" ><img alt="button1IMG" id="button1IMG" style="bottom:10px; left: 10px; width:36px; position:absolute; z-index:22;  border:none;" src="images/Button.png"/></a>
</body>
</html>