topic Re: Cannot get my graphic layer to work in ArcGIS JavaScript Maps SDK Questions

Cannot get my graphic layer to work

AlexGole — Wed, 15 Oct 2014 19:27:50 GMT

Hi all,

I am working on getting my web application to do something similar to the ArcGIS API for JavaScript Sandbox.

The goal is to create a popup infowindow when the user hovers a certain graphic on the map. This uses the GraphicLayer module. The problem here Is that I am already managing other graphic layers that I want to clear separately. In order to do . I use GL.id ="name";

I tried to replicate this for this info window when users hover but it seems like I am not getting any good results.

Here is the code infoTemplate on hover (starts when I setup a querytask):

dojo.connect(map, "onLoad", function () {
                         initialExtent = map.extent;
                         dojo.create("div", {
                             className: "esriSimpleSliderHomeButton",
                             title: 'Zoom to Full Extent',
                             onclick: function () {
                                 if (initialExtent === undefined) {
                                     initialExtent = map.extent;
                                 }
                                 map.setExtent(initialExtent);
                             }
                         }, dojo.query(".esriSimpleSliderIncrementButton")[0], "after");


                         //get rid of the javascript:void(0) statusbar message.
                         domAttr.remove(dojo.query(".action.zoomTo", map.infoWindow.domNode)[0], 'href');
                         domAttr.set(dojo.query(".action.zoomTo", map.infoWindow.domNode)[0], 'style', 'cursor:pointer;');


                         //add the overview map
                         domStyle.set(dojo.query(".draggable")[0], "display", "block");
                         overviewMapDijit = new esri.dijit.OverviewMap({
                             map: map,
                             width: 250,
                             height: 150,
                             attachTo: "top-right"
                         }, dojo.byId('overviewMapDiv'));
                         overviewMapDijit.startup();
                         domStyle.set(dojo.query(".draggable")[0], "display", "none");
                         //Adding the two Graphics Layers here
                         var CoordGL = new GraphicsLayer();
                         CoordGL.id = 'coordinatesGL';
                         var DrawGL = new GraphicsLayer();
                         DrawGL.id = 'drawGL';
                         var TreatGraphicsLayer = new GraphicsLayer();
                         TreatGraphicsLayer.id = 'TreatGL';


                         //combine all the map add layers into this one
                         map.addLayers([CoordGL, DrawGL, dynaLayer1, TreatGL]);
                         //combine the two different map onLoad listeners you had into this one listener
                         selectionToolbar = new Draw(map);
                         selectionToolbar.on("draw-end", function (evt) {
                             selectionToolbar.deactivate();
                             //fixed issue with extra "solid" in the symbol
                             var symbol3 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol("dash", new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
                             var gra = new Graphic(evt.geometry, symbol3);
                             map.getLayer("drawGL").add(gra);
                         });


                         var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Labeling/MapServer/1");


                         //build query filter
                         var query = new Query();
                         query.returnGeometry = true;
                         query.outFields = ["Proj_Name", "Treat_Name", "Treat_Num", "Treat_Cost", "AlexStatus"];
                         query.outSpatialReference = { "wkid": 102100 };
                         query.where = "Selection = 'All'";


                         var infoTemplate = new InfoTemplate();
                         var content = "<b>Status: </b>${AlexStatus}<br/>" +
                                       "<b>Treatment Name: </b>${Treat_Name}<br/>" +
                                       "<b>Treatment Number: </b>${Treat_Num}<br/>" +
                                       "<b>Treatment Cost: </b>${Treat_Cost}";
                         infoTemplate.setTitle("${Proj_Name}");
                         infoTemplate.setContent(content);


                         map.infoWindow.resize(245, 125);


                         //Can listen for complete event to process results
                         //or can use the callback option in the queryTask.execute method.
                         queryTask.on("complete", function (event) {
                             map.graphics.clear();
                             var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                 new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));


                             var symbol5 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                 new Color([255, 255, 255, 0.35]), 1), new Color([125, 125, 125, 0.35]));


                             var features = event.featureSet.features;
                             
                             
                             //QueryTask returns a featureSet.
                             //Loop through features in the featureSet and add them to the map.
                             var featureCount = features.length;
                             for (var i = 0; i < featureCount; i++) {
                                 //Get the current feature from the featureSet.
                                 var graphic = features; //Feature is a graphic
                                 graphic.setSymbol(symbol5);
                                 graphic.setInfoTemplate(infoTemplate);
                                 map.getLayer("TreatGL").add(graphic);
                             }
                             map.graphics.enableMouseEvents();
                             //listen for when the mouse-over event fires on the countiesGraphicsLayer
                             //when fired, create a new graphic with the geometry from event.graphic
                             //and add it to the maps graphics layer
                             TreatGraphicsLayer.on("mouse-over", function (event) {
                                 map.getLayer("TreatGL").clear();//use the maps graphics layer as the highlight layer
                                 var graphic = event.graphic;
                                 map.infoWindow.setContent(graphic.getContent());
                                 map.infoWindow.setTitle(graphic.getTitle());
                                 var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
                                 map.graphics.add(highlightGraphic);
                                 map.infoWindow.show(event.screenPoint,
                                   map.getInfoWindowAnchor(event.screenPoint));
                             });


                             //listen for when map.graphics mouse-out event is fired
                             //and then clear the highlight graphic
                             //and hide the info window
                             map.graphics.on("mouse-out", function () {
                                 map.getLayer("TreatGL").clear();
                                 map.infoWindow.hide();
                             });
                         });


                         queryTask.execute(query);

Here is my script:

Cal Fire JQuery Template

What am I doing wrong here?

Thank you,

Alex

Re: Cannot get my graphic layer to work

KenBuja — Wed, 15 Oct 2014 20:32:52 GMT

There are a couple things I notice.

First, you can't add the "TreatGL" layer like this

map.addLayers([CoordGL, DrawGL, dynaLayer1, TreatGL]);

You have to add it like this

map.addLayers([CoordGL, DrawGL, dynaLayer1, TreatGraphicsLayer]);

I add and remove graphics from my graphics layer using their reference,

DrawGL.add(gra);

not getting the map.layerId

map.getLayer("drawGL").add(gra);

Re: Cannot get my graphic layer to work

AlexGole — Wed, 15 Oct 2014 21:17:19 GMT

Thank you Ken, I think I am almost there.

Now, whenever I hover over one polygon. The popup works but it gets stuck on the same polygon. I cant identify other polys.

 //Adding the two Graphics Layers here
                         var CoordGL = new GraphicsLayer();
                         CoordGL.id = 'coordinatesGL';
                         var DrawGL = new GraphicsLayer();
                         DrawGL.id = 'drawGL';
                         var TreatGraphicsLayer = new GraphicsLayer();
                         TreatGraphicsLayer.id = 'TreatGraphicsLayer';


                         //combine all the map add layers into this one
                         map.addLayers([CoordGL, DrawGL, dynaLayer1, TreatGraphicsLayer]);
                         //combine the two different map onLoad listeners you had into this one listener
                         selectionToolbar = new Draw(map);
                         selectionToolbar.on("draw-end", function (evt) {
                             selectionToolbar.deactivate();
                             //fixed issue with extra "solid" in the symbol
                             var symbol3 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol("dash", new Color([255, 0, 0]), 2), new Color([255, 255, 0, 0.25]));
                             var gra = new Graphic(evt.geometry, symbol3);
                             map.getLayer("drawGL").add(gra);
                         });


                         var queryTask = new QueryTask("http://webgisdevint1/arcgis/rest/services/Alex_Try/Labeling/MapServer/1");


                         //build query filter
                         var query = new Query();
                         query.returnGeometry = true;
                         query.outFields = ["Proj_Name", "Treat_Name", "Treat_Num", "Treat_Cost", "AlexStatus"];
                         query.outSpatialReference = { "wkid": 102100 };
                         query.where = "Selection = 'All'";


                         var infoTemplate = new InfoTemplate();
                         var content = "<b>Status: </b>${AlexStatus}<br/>" +
                                       "<b>Treatment Name: </b>${Treat_Name}<br/>" +
                                       "<b>Treatment Number: </b>${Treat_Num}<br/>" +
                                       "<b>Treatment Cost: </b>${Treat_Cost}";
                         infoTemplate.setTitle("${Proj_Name}");
                         infoTemplate.setContent(content);


                         map.infoWindow.resize(245, 125);


                         //Can listen for complete event to process results
                         //or can use the callback option in the queryTask.execute method.
                         queryTask.on("complete", function (event) {
                             map.graphics.clear();
                             var highlightSymbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                 new Color([255, 0, 0]), 3), new Color([125, 125, 125, 0.35]));


                             var symbol5 = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID,
                               new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
                                 new Color([255, 255, 255, 0.35]), 1), new Color([125, 125, 125, 0.35]));


                             var features = event.featureSet.features;
                             
                             
                             //QueryTask returns a featureSet.
                             //Loop through features in the featureSet and add them to the map.
                             var featureCount = features.length;
                             for (var i = 0; i < featureCount; i++) {
                                 //Get the current feature from the featureSet.
                                 var graphic = features; //Feature is a graphic
                                 graphic.setSymbol(symbol5);
                                 graphic.setInfoTemplate(infoTemplate);
                                 TreatGraphicsLayer.add(graphic);
                             }
                             map.graphics.enableMouseEvents();
                             //listen for when the mouse-over event fires on the countiesGraphicsLayer
                             //when fired, create a new graphic with the geometry from event.graphic
                             //and add it to the maps graphics layer
                             TreatGraphicsLayer.on("mouse-over", function (event) {
                                 map.getLayer("TreatGraphicsLayer").clear();//use the maps graphics layer as the highlight layer
                                 var graphic = event.graphic;
                                 map.infoWindow.setContent(graphic.getContent());
                                 map.infoWindow.setTitle(graphic.getTitle());
                                 var highlightGraphic = new Graphic(graphic.geometry, highlightSymbol);
                                 map.graphics.add(highlightGraphic);
                                 map.infoWindow.show(event.screenPoint,
                                   map.getInfoWindowAnchor(event.screenPoint));
                             });


                             //listen for when map.graphics mouse-out event is fired
                             //and then clear the highlight graphic
                             //and hide the info window
                             map.graphics.on("mouse-out", function () {
                                 map.getLayer("TreatGraphicsLayer").clear();
                                 map.infoWindow.hide();
                             });
                         });


                         queryTask.execute(query);
                     


                     });

Re: Cannot get my graphic layer to work

AlexGole — Wed, 15 Oct 2014 21:50:02 GMT

It works great now. Thank you for your help.

Alex