I have a simple map built using the latest version of JavaScript API.
The map is initially opened by passing parameters, thus allowing the map to open in the desired area. The end user will then pan and zoom to the precise area in question and click on the map. Upon releasing the mouse, I would like to capture various attribute data associated to where that click interests a certain layer. I have managed to capture the Lat and Long coordinates, and can display the desired values within the default popup window. However I need to properly access the attribute of the layer in question and capture these values in a variable. The variables will then be used to create a JSON object that another application consumes.
What is the best way to go about this? Do I get the information from my popup window for my feature layer, is there an object already associated with the popup, or do I somehow use a different approach?
Any help would be greatly appreciated.
Thanks,
Solved! Go to Solution.
Okay, here is the solution I came up with. Thought I should post it seeing how many people have looked at this thread. It may not be the cleanest out there, but it works. I tried to clean it up in word before copying and pasting it so the tabs may be a bit out of whack...
/// Listen for Click Events map.on("load", function() { map.on("click", showCoordinates); }); function showCoordinates(evt) { /// Project Map Coords (web mercator) in geographic (lat, long) var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint); var pt_x = mp.x.toFixed(5); var pt_y = mp.y.toFixed(5); var longLat = pt_x + ", " + pt_y; var fdName = null; var rFire = null; var pcCF = null; var pcDE = null; if(evt.graphic) { pcDE = evt.graphic.attributes.PC_DE; fdName = evt.graphic.attributes.FD_NAME; rFire = evt.graphic.attributes.RESPONDING_FS; pcCF = evt.graphic.attributes.PC_CF; } else{ alert("Oops, your point did not register. Please try again."); return; } console.log("Print PC DE: ", pcDE); console.log("Print PC CF: ", pcCF); map.graphics.clear(); var ptClick = esri.geometry.geographicToWebMercator(new esri.geometry.Point(pt_x, pt_y)); var ptClickSMS = new PictureMarkerSymbol( 'http://static.arcgis.com/images/Symbols/Basic/WhiteFlag.png', 35, 35 ); var font = new Font( "12pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Calibri" ); var textSymbol = new TextSymbol( longLat, font, new Color("#000000") ); textSymbol.setOffset(80,12); var ptGraphic = new esri.Graphic(ptClick, ptClickSMS); map.graphics.add(ptGraphic); map.graphics.add(new Graphic(ptClick)); // map.graphics.add(new Graphic(ptClick, textSymbol)); /// JSON Object /// var pcObj = {"nLong":pt_x, "nLat":pt_y, "nPC_DE": pcDE, "nPC_CF": pcCF, "nFD": fdName, "nFS": rFire}; // Call to Send PC JSON Object sendData(pcObj); /// Display JSON Object on Screen via Info Text in Lower LeftHand Corner var pcValues = "Long/Lat = " + pcObj.nLong + ", " + pcObj.nLat + " | PC (PERS): " + pcObj.nPC_DE + ", PC (COMM): " + pcObj.nPC_CF + " | FD: " + pcObj.nFD + ", FS: " + pcObj.nFS; dom.byId("info").innerHTML = pcValues; }
You can think of using IdentifyTask to get the feature and read it's attribute to formulate the required json. For example if we take sample ArcGIS API for JavaScript Sandbox
It can be modified to get the attribute information as json.
function executeIdentifyTask (event) { identifyParams.geometry = event.mapPoint; identifyParams.mapExtent = map.extent; var deferred = identifyTask .execute(identifyParams) .addCallback(function (response) { //get the attributes json - will require mdofication to handle multiple feature at a point var attributeJson = response[0].feature.attributes; }); }
HTH
George,
You can use
var attrObj = map.infoWindow.getSelectedFeature().attributes;
Any chance I could get a little more meat with this bone...
I am currently using InfoWindowLite, do I need to change everything to the Infowindow?
Any chance you have an example of this working?
Thanks,
George,
Nope no sample to share. The code snippet is based on the fact that the JS maps infoWindow object uses a Popup dijit by default and it has a getSelectedFeature function.
Okay, so I should replace my InfoWindowLite with the InfoWindow and go from there.
I'll give it a go, thanks.
Okay, here is the solution I came up with. Thought I should post it seeing how many people have looked at this thread. It may not be the cleanest out there, but it works. I tried to clean it up in word before copying and pasting it so the tabs may be a bit out of whack...
/// Listen for Click Events map.on("load", function() { map.on("click", showCoordinates); }); function showCoordinates(evt) { /// Project Map Coords (web mercator) in geographic (lat, long) var mp = webMercatorUtils.webMercatorToGeographic(evt.mapPoint); var pt_x = mp.x.toFixed(5); var pt_y = mp.y.toFixed(5); var longLat = pt_x + ", " + pt_y; var fdName = null; var rFire = null; var pcCF = null; var pcDE = null; if(evt.graphic) { pcDE = evt.graphic.attributes.PC_DE; fdName = evt.graphic.attributes.FD_NAME; rFire = evt.graphic.attributes.RESPONDING_FS; pcCF = evt.graphic.attributes.PC_CF; } else{ alert("Oops, your point did not register. Please try again."); return; } console.log("Print PC DE: ", pcDE); console.log("Print PC CF: ", pcCF); map.graphics.clear(); var ptClick = esri.geometry.geographicToWebMercator(new esri.geometry.Point(pt_x, pt_y)); var ptClickSMS = new PictureMarkerSymbol( 'http://static.arcgis.com/images/Symbols/Basic/WhiteFlag.png', 35, 35 ); var font = new Font( "12pt", Font.STYLE_NORMAL, Font.VARIANT_NORMAL, Font.WEIGHT_BOLD, "Calibri" ); var textSymbol = new TextSymbol( longLat, font, new Color("#000000") ); textSymbol.setOffset(80,12); var ptGraphic = new esri.Graphic(ptClick, ptClickSMS); map.graphics.add(ptGraphic); map.graphics.add(new Graphic(ptClick)); // map.graphics.add(new Graphic(ptClick, textSymbol)); /// JSON Object /// var pcObj = {"nLong":pt_x, "nLat":pt_y, "nPC_DE": pcDE, "nPC_CF": pcCF, "nFD": fdName, "nFS": rFire}; // Call to Send PC JSON Object sendData(pcObj); /// Display JSON Object on Screen via Info Text in Lower LeftHand Corner var pcValues = "Long/Lat = " + pcObj.nLong + ", " + pcObj.nLat + " | PC (PERS): " + pcObj.nPC_DE + ", PC (COMM): " + pcObj.nPC_CF + " | FD: " + pcObj.nFD + ", FS: " + pcObj.nFS; dom.byId("info").innerHTML = pcValues; }