- Home
- :
- All Communities
- :
- Developers
- :
- JavaScript Maps SDK
- :
- JavaScript Maps SDK Questions
- :
- Cannot get my graphic layer to work
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Mute
- Printer Friendly Page
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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:
What am I doing wrong here?
Thank you,
Alex
Solved! Go to Solution.
Accepted Solutions
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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);
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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);
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
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);
});
- Mark as New
- Bookmark
- Subscribe
- Mute
- Subscribe to RSS Feed
- Permalink
- Report Inappropriate Content
It works great now. Thank you for your help.
Alex
