AnsweredAssumed Answered

Question?

Question asked by milerdoug on Nov 21, 2014
Latest reply on Nov 22, 2014 by milerdoug

      require([

        "esri/map",

        "esri/dijit/Geocoder",

 

 

        "esri/graphic",

        "esri/symbols/SimpleMarkerSymbol",

        "esri/geometry/screenUtils",

         "esri/geometry/Point",

  "esri/SpatialReference",

         "esri/InfoTemplate", 

 

        "dojo/dom",

        "dojo/dom-construct",

        "dojo/query",

        "dojo/_base/Color",

 

       "dojo/domReady!"

      ], function(

        Map, Geocoder, Graphic, SimpleMarkerSymbol, screenUtils,

  Point,SpatialReference, Infotemplate, dom, domConstruct, query, Color

      ) {

        // create a map and instance of the geocoder widget here

        var map = new Map("map", {

          basemap: "streets",

          center: [ -100, 40 ],

          zoom: 10

        });

        var geocoder =  new Geocoder({

          arcgisGeocoder: {

            placeholder: "Find a place"

          },

          autoComplete: true,

          map: map

        }, dom.byId("search"));

 

 

        map.on("load", enableSpotlight);

        map.on("click",manualPickAddress);

        geocoder.on("select", showLocation);

        geocoder.on("clear", removeSpotlight);

 

 

        function showLocation(evt) {

          map.graphics.clear();

          var point = evt.result.feature.geometry;

   //window.alert(point);

          var symbol = new SimpleMarkerSymbol().setStyle(

            SimpleMarkerSymbol.STYLE_SQUARE).setColor(

            new Color([255,0,0,0.5])

          );

          var graphic = new Graphic(point, symbol);

          map.graphics.add(graphic);

 

 

          map.infoWindow.setTitle("Search Result");

          map.infoWindow.setContent(evt.result.name);

          map.infoWindow.show(evt.result.feature.geometry);

 

 

          var spotlight = map.on("extent-change", function(extentChange) {

            var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);

            var width = geom.xmax - geom.xmin;

            var height = geom.ymin - geom.ymax;

 

 

            var max = height;

            if ( width > height ) {

                max = width;

            }

 

 

            var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';

 

 

            query(".spotlight").addClass("spotlight-active").style({

              width: max + "px",

              height: max + "px",

              margin: margin

            });

            spotlight.remove();

          });

        }

 

 

        function enableSpotlight() {

          var html = "<div id='spotlight' class='spotlight'></div>"

          domConstruct.place(html, dom.byId("map_container"), "first");

        }

 

 

        function removeSpotlight() {

          query(".spotlight").removeClass("spotlight-active");

          map.infoWindow.hide();

          map.graphics.clear();

        }

 

  function manualPickAddress(evt){

   //window.alert(evt.x+' ' +evt.y);

   map.graphics.clear();

         

   //var point = evt.mapPoint;

   //var point = new Point( {"x": evt.x, "y": evt.y, "spatialReference": {"wkid": 4326 } });

   var point = new Point([evt.x,evt.y],new SpatialReference({ wkid:4326 }));

 

 

          window.alert(point.x+ ' ' + point.y);

  // window.alert(point);

          var symbol = new SimpleMarkerSymbol().setStyle(

            SimpleMarkerSymbol.STYLE_SQUARE).setColor(

            new Color([255,0,0,0.5])

          );

  var attributes = {"Xcoord":evt.mapPoint.x,"Ycoord":evt.mapPoint.y};

 

 

          var infoTemplate = new InfoTemplate("Latitude: ${Ycoord} <br/>    Longitude: ${Xcoord} ");

          var graphic = new Graphic(point,symbol,attributes,infoTemplate);

 

 

 

 

         // var graphic = new Graphic(point,symbol);

         map.graphics.add(graphic);

 

 

          map.infoWindow.setTitle("Search Result");

          map.infoWindow.setContent(evt.x+'<br />'+evt.y);

   //window.alert(evt.x+ ' '+evt.y);

        

/*

          var spotlight = map.on("extent-change", function(extentChange) {

            var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);

            var width = geom.xmax - geom.xmin;

            var height = geom.ymin - geom.ymax;

 

 

            var max = height;

            if ( width > height ) {

                max = width;

            }

 

 

            var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';

 

 

            query(".spotlight").addClass("spotlight-active").style({

              width: max + "px",

              height: max + "px",

              margin: margin

            });

            spotlight.remove();

          });*/

  }

      });

When I manually pick an address the manualPickAddress() run

Point works ok but no graphic display (symbol) on the screen.

Any suggestion?

Outcomes