Latest Contributions by JohnCorrea

I am trying to write a MapLoader class where all of my layers and map properties are defined within the class as calss properites. My main html pages loads my module from my package and then I call var mapLoader = new MapLoader(). Before this I had some regular code where I would hover over a municipal boundary and it would highlight it using its "mouse-over" method. It would also attach the event properties to elements within my page. It worked marvelously and I liked it. However, to make my code more readable and less spaghetti, I decided to make a class definition having my layers and map predefined within the MapLoader class. The constructor instantiates the map, layers and layer properties. Then the user can call a method to add those layers to a map. It works well until I get to the point of registering the event to the township layer. In the first example of my code, everything works fine and whichever township the mouse hovers above, the events trigger the selection of that township as well as display that townships properties. When I try to define that event referring to the class variable version using this.townshiop.on("mouse-over", funciton()etc....), it will only react when I first hover into the map showing the township on the edge between my legend pane and my map. It will ignore events when I cross into other boundaries within the map. I am posting the differences of my code below. Is this a glitch the ESRI developers didn't think about or is there a way I can get the new method to work like the old? Old code that works var layers = new Array();             var secSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))             secSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([175, 175, 175]), 1));             var sectionRender = new SimpleRenderer(secSymbol);             var sections = new FeatureLayer("http://........................../Dakotas_PLSS/FeatureServer/2",                 {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["Township", "Section"]});             sections.setRenderer(sectionRender);             layers.push(sections);             var townSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))             townSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([105, 105, 105]), 2));             var renderer = new SimpleRenderer(townSymbol);             var townships = new FeatureLayer("http://......Dakotas_PLSS/FeatureServer/1",                 {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["NAME", "COUNTY"]});             townships.setRenderer(renderer);             var defTownSelectSymbol = new SimpleFillSymbol().setColor(new Color([255, 178, 102, 0.1]))             defTownSelectSymbol.setOutline(new SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new Color([255, 178, 102]), 4));             townships.setSelectionSymbol(defTownSelectSymbol);             townships.on("mouse-over", function (event) {                 var name = event.graphic.attributes.NAME;                 var county = event.graphic.attributes.COUNTY;                 dom.byId('townshipAttribute').innerHTML = "Last hovered: <b style='color: orange'> "                     + name + " </b> of " + county + " County";                 var query = new Query();                 query.where = "NAME = '" + name + "' AND COUNTY = '" + county + "'";                 query.returnGeometry = true;                 query.outFields = ["NAME", "COUNTY"];                 townships.selectFeatures(query,FeatureLayer.SELECTION_NEW);             });             layers.push(townships);             var points = new FeatureLayer("http://services.........../PATracking/FeatureServer/0",                 {outFields: ["MAP_SITE", "REPAIR_TYPE_ID", "DISASTER_NUMBER", "PW_NUMBER"]});             points.on("click", function (event) {                 dom.byId("siteAttribute").innerHTML = " Last Clicked: <br> Disaster - <b>" + event.graphic.attributes.DISASTER_NUMBER + "</b> <br> Project - <b>" +                     event.graphic.attributes.PW_NUMBER + "</b> <br> Map Site - <b>" + event.graphic.attributes.MAP_SITE + "</b>";             });             layers.push(points);             map.on("layers-add-result", function (evt) {                 var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {                     console.log("loading layer " + index);                     return { layer: layer.layer, title: layer.layer.name.replace(/_/g, " ") };                 });                 layerInfo.sort(function(a, b){                     var titleA = a.title;                     var titleB = b.title;                     if(titleA < titleB) return -1;                     if(titleA > titleB) return 1;                     return 0;                 });                 if (layerInfo.length > 0) {                     var legendDijit = new Legend({                         map: map,                         title: "PA Tracking",                         layerInfos: layerInfo                     }, "legendDiv");                     legendDijit.startup();                 }             });             map.addLayers(layers); New code that kind of works define([     'esri/map',     'esri/layers/FeatureLayer',     'esri/layers/LabelLayer',     'esri/tasks/query',     'esri/tasks/QueryTask',     'esri/dijit/Geocoder',     'esri/dijit/Legend',     'esri/symbols/SimpleLineSymbol',     'esri/symbols/SimpleFillSymbol',     'esri/renderers/SimpleRenderer',     'esri/InfoTemplate',     'dojo/data/ItemFileReadStore',     'dojo/parser',     'dojo/dom',     'dojo/on',     'dojo/_base/Color',     'dojo/_base/connect',     'dojo/_base/array',     'dojo/_base/declare',     'dijit/registry',     'esri/dijit/Measurement',     'dojo/domReady!' ], function (Map, FeatureLayer, LabelLayer, Query, QueryTask, Geocoder, Legend, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, InfoTemplate, ItemFileReadStore, parser, dom, on, Color, connect, arrayUtils, declare, registry, Measurement) {     return declare("demo.MapLoader", null, {         map: null,         townships: null,         sections: null,         points: null,         constructor: function (node) {             /* create map with the associated node argument */             this.map = new Map(node, {                 center: [-98.8962012, 48.1182076],                 zoom: 12,                 basemap: "osm"             });             /* create three layers for map and desired symbology */             var secSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))             secSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([175, 175, 175]), 1));             var sectionRender = new SimpleRenderer(secSymbol);             this.sections = new FeatureLayer("http://services...................Dakotas_PLSS/FeatureServer/2",                 {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["Township", "Section"]});             this.sections.setRenderer(sectionRender);             /* un selected symbology */             var townSymbol = new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0]))             townSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([105, 105, 105]), 2));             var townRenderer = new SimpleRenderer(townSymbol);             /* selection symbology */             var defTownSelectSymbol = new SimpleFillSymbol().setColor(new Color([255, 178, 102, 0.1]))             defTownSelectSymbol.setOutline(new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([255, 178, 102]), 4));             this.townships = new FeatureLayer("http://services........................./Dakotas_PLSS/FeatureServer/1",                 {mode: FeatureLayer.MODE_ONDEMAND, outFields: ["NAME", "COUNTY"]});             this.townships.setRenderer(townRenderer);             this.townships.setSelectionSymbol(defTownSelectSymbol);             this.points = new FeatureLayer("http://services................................/PATracking/FeatureServer/0",                 {outFields: ["MAP_SITE", "REPAIR_TYPE_ID", "DISASTER_NUMBER", "PW_NUMBER"]});         },         registerMapEvents: function(){             var legendMap = this.map;             this.map.on("layers-add-result", function (evt) {                 var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {                     console.log("loading layer " + index);                     return { layer: layer.layer, title: layer.layer.name.replace(/_/g, " ") };                 });                        },         addInternalLayers: function(){             this.map.addLayers([ this.sections,  this.townships, this.points]);             this.registerLayerEvents();         },         registerLayerEvents: function(){             this.townships.on("mouse-over", function (event) {                 var name = event.graphic.attributes.NAME;                 var county = event.graphic.attributes.COUNTY;                 dom.byId('townshipAttribute').innerHTML = "Last hovered: <b style='color: orange'> "                     + name + " </b> of " + county + " County";                 var query = new Query();                 query.where = "NAME = '" + name + "' AND COUNTY = '" + county + "'";                 query.returnGeometry = true;                 query.outFields = ["NAME", "COUNTY"];                 this.townships.selectFeatures(query,FeatureLayer.SELECTION_NEW);             });         }     }); }); ... View more

Hello All, I am trying to follow along some ArcGIS JavaScript API samples for my app. I have replaced their layers with mine along with some of the attribute info for the AttributeInspector widget. Everything works except the most essential part of my app, the AttributeInspector window. I cannot figure out why my fields don't display on the right pane of my page.  The text in the details pane will actually change its title which indicates that it listens to the click event. However no attributes show. The legend, shows, but not the attribute inspector. I've debugged and every object is stable, including the attributeinspector which contains the featurelayer object it should correspond with. Why doesn't this work? ESRI, doesn't really explain much of this widget. Their documentation lacks detail. There are no best practices for different implementations of building a map (via esri.Map or esri.arcgis.utils.createMap) and using specific widgets for a particular implementation.  Anyway, here is a photo before and after result with code. [ATTACH=CONFIG]27051[/ATTACH] [ATTACH=CONFIG]27052[/ATTACH] Here is the relevant javascript code: ------------------------------------------------------------------------------------------------------------- /** * Created with IntelliJ IDEA. * User: jcorrea * Date: 8/1/13 * Time: 1:18 PM * To change this template use File | Settings | File Templates. */ /* require statements */ dojo.require("esri.map"); dojo.require("esri.tasks.query"); dojo.require("esri.tasks.QueryTask"); dojo.require("esri.dijit.Legend"); dojo.require("esri.dijit.AttributeInspector-all"); dojo.require("esri.arcgis.utils"); dojo.require("esri.layers.FeatureLayer"); dojo.require("esri.layers.Field"); dojo.require("dijit.form.FilteringSelect"); dojo.require("dijit.dijit"); dojo.require("dijit.dijit-all"); dojo.require("dojo.parser"); dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); /* proxy workaround */ esri.config.defaults.io.proxyUrl = location.protocol.toString() +     "//" + location.host.toString() +     location.pathname.toString().replace('index.html', '') + "proxy.ashx"; /* variables */ var townshipLayer; var map; var currentState = "ND"; var activeCounty; var ndOperationalLayer; var attInspector; /** * All functions for map * interaction and data loading **/ function init() {     map = new esri.Map("map", {         basemap:"topo",         center :[-98.882818, 48.116371],         zoom   :13     });     ndOperationalLayer = new esri.layers.FeatureLayer("http://xyz-services.esri.com/arcgis/rest/services/AFOLDER/PATracking/FeatureServer/1", {         mode     :esri.layers.FeatureLayer.MODE_ONDEMAND,         outFields:["*"]     });        dojo.connect(map, 'onLayersAddResult', function (results) {         //add the legend         var legend = new esri.dijit.Legend({             map       :map,             layerInfos:[                 {layer:ndOperationalLayer, title:""}             ]         }, "legendDiv");         legend.startup();         attInspector = new esri.dijit.AttributeInspector({layerInfos:[{'featureLayer':ndOperationalLayer}]}, "attributeEdit" );         attInspector.on("attribute-change", function(evt) {             var feature = evt.feature;             feature.attributes[evt.fieldName] = evt.newFieldValue;             feature.getLayer().applyEdits(null, [feature], null);         });         attInspector.startup();     });     var selectQuery = new esri.tasks.Query();     dojo.connect(map, "onClick", function (evt) {         dojo.byId('details').innerHTML = 'Map Site';         selectQuery.geometry = evt.mapPoint;         ndOperationalLayer.selectFeatures(selectQuery, esri.layers.FeatureLayer.SELECTION_NEW, null);         //attInspector.startup();     });     map.addeLayers([ndOperationalLayer]); } /* init() */ ----------------------------------------------------------------------------------------------------------------- Here is the html ----------------------------------------------------------------------------------------------------------------- <%--   Created by IntelliJ IDEA.   User: jcorrea   Date: 8/12/13   Time: 3:12 PM   To change this template use File | Settings | File Templates. --%> <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head>     <title>Region VIII PA Tracker</title>     <link rel="stylesheet" type="text/css" media="all" href="styles/main.css"/>     <meta http-equiv="Content-Type" content="text/html; charset=utf-8">     <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"/>     <script type="text/javascript">djConfig = { parseOnLoad: true };</script>     <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/esri/css/esri.css" data-dojo-config="parseOnLoad: true"/>     <link rel="stylesheet" href="http://js.arcgis.com/3.5/js/dojo/dijit/themes/claro/claro.css"             data-dojo-config="parseOnLoad: true">     <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.5"             data-dojo-config="parseOnLoad: true"></script>     <script type="text/javascript" src="/scripts/arcscripts1.js"></script> </head> <style>     html, body {         height: 97%;         width: 98%;         margin: 1%;         font-family: Verdana;     }     #rightPane {         width: 250px;     }     .esriAttributeInspector .dijitTextBox {         width: 10em;     }     .esriAttributeInspector .atiLayerName {         display: none;     }     .esriAttributeInspector .atiLabel {         font-weight: bold;         color: #705B35;     }     .esriAttributeInspector .atiField {         background: #FFF6D9;     }     .esriAttributeInspector .atiButtons {         color: #705B35;     } </style> <body class="claro"> <div id="master" class="claro">     <header>         <h1>FEMA - Region 8 PA Tracker</h1>     </header>     <nav>         <ul>             <li><a href="#">Main</a></li>             <li><a href="#">Devil's Lake Viewer</a></li>             <li><a href="#">Tutorials</a></li>         </ul>     </nav>     <form class="claro">         <b>State:</b>         <select id="state" data-dojo-type="dijit.form.ComboBox" name="state" onchange="callStateCounties(this.value)">             <option selected></option>             <option>North Dakota</option>             <option>South Dakota</option>         </select>         <b>County:</b>         <select id="cbCounty" data-dojo-type="dijit.form.ComboBox"                 onchange="queryTownship(this.value)"                 fetchProperties="{sort:[{attribute:'name', descending:false}]}">         </select>         <b>Township:</b>         <select id="township" data-dojo-type="dijit.form.ComboBox" name="township"                 fetchProperties="{sort:[{attribute:'name', descending:false}]}"                 onchange="zoomToTownship(this.value)">         </select>     </form>     <div id="wrap"          data-dojo-type="dijit.layout.BorderContainer"          data-dojo-props="design:'headline', gutters:true">         <div id="rightPane"              data-dojo-type="dijit.layout.ContentPane"              data-dojo-props="region:'right'">             <div data-dojo-type="dijit.layout.AccordionContainer">                 <div data-dojo-type="dijit.layout.ContentPane"                      data-dojo-props="title:'Details', selected:true">                     <span id="details">Click a point to edit attributes.</span>                     <div id="attributeEdit"></div>                 </div>                 <div data-dojo-type="dijit.layout.ContentPane" id="legendPane"                      data-dojo-props="title:'Legend'">                     <div id="legendDiv"></div>                 </div>             </div>         </div>         <div id="map"              data-dojo-type="dijit.layout.ContentPane"              data-dojo-props="region:'center'"              style="overflow:hidden;">         </div>     </div> </div> </body> </html> ---------------------------------------------------------------------------------------------------------------------- ... View more

Well not necessarily Bum Effing Egypt but 200 km south of Ghana. This means that my points coordinates are at 0. But why? Here is my code. dojo.require("dijit.dijit");     dojo.require("dijit.layout.BorderContainer");     dojo.require("dijit.layout.ContentPane");     dojo.require("esri.map");     dojo.require("esri.arcgis.utils");     dojo.require("esri.dijit.Legend");     dojo.require("esri.dijit.Scalebar");     esri.config.defaults.geometryService = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');               var map;     var x = eval('@Model.Longitude'), y = eval('@Model.Latitude');     function init() {         var mapid = "61b91bd7159d4712ac50988e5fd7d4c7"         var mapDeferred = esri.arcgis.utils.createMap(mapid, "map", {             mapOptions: {                 slider: true,                 nav: false             }         });         mapDeferred.addCallback(function (response) {             map = response.map;             //resize the map when the browser resizes             dojo.connect(dijit.byId('map'), 'resize', map, map.resize);             //add the legend             if (map.loaded) {                 addPointToMap( x, y );             }             else {                 dojo.connect(map, "onLoad", function () {                     addPointToMap(x, y);                 });             }         });         mapDeferred.addErrback(function (error) {             console.log("Map creation failed: ", dojo.toJson(error));         });     }     function addPointToMap(lon, lat) {              var point = new esri.geometry.Point(parseFloat(lon), parseFloat(lat), new esri.SpatialReference({ wkid: 4326 }));                         var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 255, 0]));         var graphic = new esri.Graphic(point, symbol);         map.graphics.add(graphic);     }     dojo.ready(init);     </script> <div id="map"  style="width: 650px; height: 600px; border: 1px solid #000;"> </div> ... View more

Hi anyone and everyone! I've created a simple map on arcgis.com and am able to render the map in my web pages using a map key. However, I'd like to be able to add a point from my server side code. Here is my code so far. How do add a new graphic point? ESRI has terribly limited documentation and usually its examples cut out a lot of dependencies. dojo.require("esri.map");     dojo.require("esri.arcgis.utils");     dojo.require("esri.layers.agstiled");     esri.config.defaults.geometryService = new esri.tasks.GeometryService('http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer');           var mapDeferred;     function init() {         var mapid = "61b91bd7159d4712ac50988e5fd7d4c7"         mapDeferred = esri.arcgis.utils.createMap(mapid, "map", {             mapOptions: {                 slider: true,                 nav: false             }         });     }     dojo.ready(init);     function addPointToMap(lon, lat) {         var point = new esri.geometry.Point(lon, lat, mapDeferred.spatialReference);         var symbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([0, 255, 0]));         var graphic = new esri.Graphic(point, symbol);         mapDeferred.graphics.add(graphic);     }         dojo.ready(addPointToMap); below are my error messages [ATTACH=CONFIG]16428[/ATTACH] ... View more