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; } } }

Button

jaykapalczynski

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.

Find more posts tagged with

Accepted answers

jskinner

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

All comments

jaykapalczynski

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

PaulVepraskas

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>

PaulVepraskas

Sorry I missed a coma....

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

PaulVepraskas

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);

jaykapalczynski

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

jaykapalczynski

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");
}

jskinner

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

jaykapalczynski

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);
       }
    }

jaykapalczynski

Is there anything that I need in the

 require([

    ], function(

    ) {

jskinner

Hi Jay,

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

PaulVepraskas

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

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