topic Re: Button question in ArcGIS JavaScript Maps SDK Questions

Button question

TimWitt — Wed, 05 Mar 2014 12:03:33 GMT

Hey everybody,

I am sure there is a very easy solution but for some reason I am stuck! I created a button in my map called "1234 Gus Hipp Blvd", now when I click the button an alert is supposed to pop up stating "1234 Gus Hipp Blvd", but for some reason nothing happens when I click it. This is more an exercise for creating a custom button and then handle a function when the button has been clicked.

Here is the code:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }     #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }     #LocateButton {       position: absolute;       top: 137px;       left: 20px;       z-index: 50;     }     #Button1 {       position: absolute;       top: 180px;       left: 20px;       z-index: 50;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "esri/dijit/LocateButton",         "dijit/registry",         "dijit/form/Button",                 "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom, BasemapToggle, HomeButton, LocateButton, registry, Button     ) {              var map;       var center = [-80.719892, 28.303518];       var zoom = 13,       map = new Map("mapDiv", {             center: center,             zoom: zoom,             basemap: "topo"       });                   on(map, "load", addGraphic);               var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([0,255,0,0.25]), 1),               new Color([255,0,0])               )       function addGraphic(){                         var singlePoint1 = new Point([-80.719892, 28.303518])             var singlePoint2 = new Point([-80.694706, 28.352613])             var attr1 = {"Xcoord":singlePoint1.x,"Ycoord":singlePoint1.y};             var attr2 = {"Xcoord":singlePoint2.x,"Ycoord":singlePoint2.y};             var infoTemplate1 = new InfoTemplate("Accident #1",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");             var infoTemplate2 = new InfoTemplate("Accident #2",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");              var store1 = new Graphic(singlePoint1,storepoint,attr1,infoTemplate1);             var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);             map.graphics.add(store1);             map.graphics.add(store2);             featureArray = [];             featureArray.push(store1);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint1);  // Add a basemap Toggle       }       var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup(); // Add home button       var home = new HomeButton({         map: map       }, "HomeButton");       home.startup(); // Location Button       var geoLocate = new LocateButton({         map:map       }, "LocateButton");       geoLocate.startup();            on(registry.byId("Button1"), "click", alertIt );       function alertIt(){        alert("1234 Gus Hipp Blvd");       }      });   </script>  </head> <body class="soria">   <div id="mapDiv">     <div id="BasemapToggle"></div>     <div id="HomeButton"></div>     <div id="LocateButton"></div>     <button id="Button1" data-dojo-type="dijit.form.Button" type="button" data-dojo-attach-point="button">1234 Gus Hipp Blvd</button>   </div> </body> </html>

Thanks!

Tim

Re: Button question

KenBuja — Sat, 11 Dec 2021 17:00:28 GMT

The button wasn't ready when it came time to wire up the click event. If you add a parser, then it will be ready. However, it's throwing off the styling of the button.

        require([
            "esri/map",
            "esri/symbols/SimpleMarkerSymbol",
            "esri/symbols/SimpleLineSymbol",
            "dojo/_base/Color",
            "esri/geometry/Point",
            "esri/InfoTemplate",
            "esri/graphic",
            "dojo/on",
            "dojo/dom",
            "esri/dijit/BasemapToggle",
            "esri/dijit/HomeButton",
            "esri/dijit/LocateButton",
            "dijit/registry",
            "dijit/form/Button",
            "dojo/parser",
            "dojo/domReady!"
        ],
        function (
            Map,
            SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,
            on, dom, BasemapToggle, HomeButton, LocateButton, registry, Button, parser
        ) {
            parser.parse();

            var map;
            var center = [-80.719892, 28.303518];
            var zoom = 13,
            map = new Map("mapDiv", {
                center: center,
                zoom: zoom,
                basemap: "topo"
            });

Re: Button question

TimWitt — Wed, 05 Mar 2014 15:52:46 GMT

Thanks Ken,

do you know why it would throw off the styling?

Tim

Re: Button question

KenBuja — Wed, 05 Mar 2014 17:27:24 GMT

Unfortunately, I don't have an answer for that.

Re: Button question

JakeSkinner — Wed, 05 Mar 2014 18:01:29 GMT

Not sure why the styling is not working, but one way to work around this is to use an input tag of type button. You can then call this using the "dojo/dom" module. Ex:

<!DOCTYPE html> <html> <head>   <title>Create a Map</title>   <meta http-equiv="Content-Type" content="text/html; charset=utf-8">   <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/dojo/dijit/themes/soria/soria.css">   <link rel="stylesheet" href="http://js.arcgis.com/3.8/js/esri/css/esri.css">   <style>     html, body, #mapDiv{       padding: 0;       margin: 0;       height: 100%;     }     #BasemapToggle {       position: absolute;       top: 20px;       right: 20px;       z-index: 50;     }     #HomeButton {       position: absolute;       top: 95px;       left: 20px;       z-index: 50;     }     #LocateButton {       position: absolute;       top: 137px;       left: 20px;       z-index: 50;     }     #Button1 {       position: absolute;       top: 180px;       left: 20px;       z-index: 50;     }   </style>      <script src="http://js.arcgis.com/3.8/"></script>   <script>     var map;     require([         "esri/map",         "esri/symbols/SimpleMarkerSymbol",          "esri/symbols/SimpleLineSymbol",          "dojo/_base/Color",          "esri/geometry/Point",         "esri/InfoTemplate",         "esri/graphic",         "dojo/on",         "dojo/dom",         "esri/dijit/BasemapToggle",         "esri/dijit/HomeButton",         "esri/dijit/LocateButton",         "dojo/dom",         "dijit/form/Button",                 "dojo/domReady!"     ],      function(         Map,         SimpleMarkerSymbol, SimpleLineSymbol, Color, Point, InfoTemplate, Graphic,         on, dom, BasemapToggle, HomeButton, LocateButton, dom, Button     ) {              var map;       var center = [-80.719892, 28.303518];       var zoom = 13,       map = new Map("mapDiv", {             center: center,             zoom: zoom,             basemap: "topo"       });                   on(map, "load", addGraphic);               var storepoint = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_SQUARE, 10,               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,               new Color([0,255,0,0.25]), 1),               new Color([255,0,0])               )       function addGraphic(){                         var singlePoint1 = new Point([-80.719892, 28.303518])             var singlePoint2 = new Point([-80.694706, 28.352613])             var attr1 = {"Xcoord":singlePoint1.x,"Ycoord":singlePoint1.y};             var attr2 = {"Xcoord":singlePoint2.x,"Ycoord":singlePoint2.y};             var infoTemplate1 = new InfoTemplate("Accident #1",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");             var infoTemplate2 = new InfoTemplate("Accident #2",             "<br>1234 Gus Hipp Blvd </br><br> </br><a href='https://www.google.com/maps/dir//Gus+Hipp+Blvd,+Rockledge,+FL+32955/@28.3043848,-80.7134764,17z/data=!4m13!1m4!3m3!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2sGus+Hipp+Blvd!3b1!4m7!1m0!1m5!1m1!1s0x88de03d3d113bf6b:0xbeaf353225652c40!2m2!1d-80.714099!2d28.3041225?hl=en'>Get Directions</a> <br/>");              var store1 = new Graphic(singlePoint1,storepoint,attr1,infoTemplate1);             var store2 = new Graphic(singlePoint2,storepoint,attr2,infoTemplate2);             map.graphics.add(store1);             map.graphics.add(store2);             featureArray = [];             featureArray.push(store1);              map.infoWindow.setFeatures(featureArray);             map.infoWindow.show(singlePoint1);  // Add a basemap Toggle       }       var toggle = new BasemapToggle({         map: map,         basemap: "satellite"       }, "BasemapToggle");       toggle.startup(); // Add home button       var home = new HomeButton({         map: map       }, "HomeButton");       home.startup(); // Location Button       var geoLocate = new LocateButton({         map:map       }, "LocateButton");       geoLocate.startup();            on(dom.byId("Button1"), "click", alertIt );       function alertIt(){        alert("1234 Gus Hipp Blvd");       }      });   </script>  </head> <body class="soria">   <div id="mapDiv">     <div id="BasemapToggle"></div>     <div id="HomeButton"></div>     <div id="LocateButton"></div>         <input id="Button1" type="button" value="1234 Gus Hipp Blvd" />   </div> </body> </html>

Re: Button question

TimWitt — Wed, 05 Mar 2014 18:12:18 GMT

Thanks Jake, that fixed it.