AnsweredAssumed Answered

Button question

Question asked by timw1984dev on Mar 5, 2014
Latest reply on Mar 5, 2014 by timw1984dev
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

Outcomes