Get location on click w/X marker

by Alex Azuero

HTML

<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.9/"></script>
     <p>
      This sample demonstrates the use of <a href="http://jquery.com/" target="_blank">jQuery</a> library with ArcGIS API (compact). This sample uses the       <a href="http://jqueryui.com/demos/slider/" target="_blank">Slider</a> UI widget.
    </p>

    <div id="info" class="ui-widget-header ui-corner-all" style="width: 688px; z-index: 2; position: absolute; text-align: center; padding: 5px; color: black;"></div>

    <div id="wrapper" style="position: relative; width: 700px; height: 500px;">
    <!-- Map canvas -->
    <div id="map" style="position: absolute; width: 700px; height: 500px; z-index: 1;"></div>


    <!-- Div that will render jQuery Slider -->
    <div id="jqSlider" style="position: absolute; right: 20px; top: 40px; height: 180px; z-index: 2; font-size: 9px;"></div>
    </div>

    <p>Click on the map for location info.</p>

JavaScript

var map;

      require([
        "esri/config",
        "esri/graphic",
        "esri/lang",
        "esri/map",
        "esri/geometry/webMercatorUtils",
        "esri/symbols/SimpleFillSymbol",
        "esri/symbols/SimpleLineSymbol",
        "esri/symbols/SimpleMarkerSymbol",
        "dojo/dom",
        "dojo/on",
        "esri/Color",
        "dojo/domReady!"
      ],
        function (
          esriConfig, Graphic, lang, Map, webMercatorUtils, SimpleFillSymbol,
          SimpleLineSymbol, SimpleMarkerSymbol, dom, on, Color
      ) {

          var zoomSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
            new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
              new Color([20, 156, 255]), 1), new Color([141, 185, 219, 0.3]));

          esriConfig.defaults.map.zoomSymbol = zoomSymbol.toJson();

          map = new Map("map", {
            basemap: "streets",
            center: [2.352, 48.87],
            zoom: 12,
            slider: false
          });

          map.on("load", function () {
            console.log("Map load event");
            // Hook up jQuery
            $(document).ready(jQueryReady);
          });

          map.on("layer-add", function () {
            console.log("Map layer-add event");
          });

          map.on("extent-change", showExtent);

          map.infoWindow.resize(150, 100);

          function showExtent (event) {
            var extent = webMercatorUtils.webMercatorToGeographic(event.extent),
              s = "XMin: " + extent.xmin.toFixed(2) + " " +
                  "YMin: " + extent.ymin.toFixed(2) + " " +
                  "XMax: " + extent.xmax.toFixed(2) + " " +
                  "YMax: " + extent.ymax.toFixed(2);

            dom.byId("info").innerHTML = s;
          }

          // jQuery stuff
          function jQueryReady () {

            var markerSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_X,
              12, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
...