Latest Contributions by SteveCole

‎09-28-2012

I'm looking for some guidance on how to proceed with a certain task I'd like to implement which would use a standalone table. My app works with Census data and so once the user clicks on a cenus tract, I'd like to load up some additional information (based on the census tract number) which is stored in a separate, stand alone table. That's what I want to do- now how do I do that? After reviewing the API, I'm not sure how you "add" the table as a layer so that you can query it. The table will have a one to many relationship so I can't just join the table to my census tracts feature layer before serving it up as a service. Thanks! Steve

‎09-24-2012

Derek, Unfortunately, the feature layers being used in my map are services on our developmental server so any full code post wouldn't work for you. The good news is that I have got it working. The short story is that I believe the javascript code was fine and I was just missing a parameter on the HTML side of things. I changed my design from a dojo combo box to a dojo FilteringSelect. After making the change, it still didn't work. After some head scratching, I modified my HTML Input tag to read <input id="cboTipList" dojoType="dijit.form.FilteringSelect" searchAttr="PROJNAME" name="WidgetName" pageSize="12" placeHolder="Select A TIP Project" onChange="zoomRow(dijit.byId('cboTipList').value);"> and it *finally* worked. The key seems to be the "searchAttr" option, which I was originally missing. Whew!

‎09-24-2012

I would second Steve's suggestion about tying the popup to a feature layer. For example, in one of my maps, I define the popup content at the beginning of my initMap() function like this: var removalTemplate = new esri.InfoTemplate(); removalTemplate.setContent('<table cellspacing=\"5\" style=\"font-size:90%\"><tr><td style=\"vertical-align:top\"><b>Road Name:</b></td><td style=\"vertical-align:top\">${Name}</td></tr><tr><td style=\"vertical-align:top\"><b>Snow Removal Priority:</b></td><td style=\"vertical-align:top\">${Priority:formatPriorityLabel}</td></tr></table>'); removalTemplate.setTitle('${Name}'); Next, you specify the template when you create the feature layer: // Define the Snow Removal Route layer theSnowRemovalLayer = new esri.layers.FeatureLayer("URL to feature layer", { mode: esri.layers.FeatureLayer.MODE_ONDEMAND, infoTemplate:removalTemplate, outFields: ["*"], opacity:0.80, visible: false }); Towards the end, but still within the initMap() function, I associate the popup with the specific feature layer: dojo.connect(theSnowRemovalLayer,"onClick",function(evt){ //Listener event for feature selection and the popup info widow var query = new esri.tasks.Query(); query.geometry = pointToExtent(map,evt.mapPoint,15); var deferred = theSnowRemovalLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW); map.infoWindow.resize(map.width * 0.55,map.height * 0.25); map.infoWindow.setFeatures([deferred]); map.infoWindow.show(evt.mapPoint); }); Hopefully that makes sense. Good luck! Steve

‎09-24-2012

Hi Derek, I've tried that line as well with no luck. I should have mentioned that I'm specifying v2.8 of the API since I'm doing the initial development locally and not on a server. This hasn't been a problem with a dojo datagrid so I assumed it wouldn't be a problem with the combo box..

‎09-24-2012

In a web map I'm developing, I want a combo box populated with project names and FID so that once the user selects a project, I can zoom to that project's feature extent. Within my Init() function, I'm using a query task like this: //Push the attributes of the TIP Projects into the combo box var query = new esri.tasks.Query(); query.where = "1=1"; query.outFields = ["*"]; var queryTask = new esri.tasks.QueryTask("my feature layer URL"); queryTask.execute(query,populateCbo); Later down the line, my function "populateCbo" attempts to populate the combo box: function populateCbo(results) { //Populate the dropdown list box with unique values var values = []; var features = results.features; dojo.forEach (features, function(feature) { curProject = feature.attributes.PROJECT; curFid = feature.attributes.FID; values.push({'project':curProject,'fid':curFid}); }); //Sort the values list by project name //values.sort(by('project')); var dataItems = { identifier: 'fid', label: 'project', items: values }; var store = new dojo.data.ItemFileReadStore({data:dataItems}); dijit.byId("cboTipList").store = store; } Everything seems to work just fine until the line which populates the store variable. The dataItems variable has information in it but after stepping through the "store = .." line, the data property for store is still null. Am I not formatting the contents of dataItems properly? I'm not sure why it's not getting populated. Thanks! Steve

‎08-30-2012

Awesome. Thanks, Rich! Your suggestion finally makes it work. Marked as answered. Thanks again! Steve

‎08-30-2012

Hi Rich, I tried adding another dojo connect on the mapPanel but it did not solve the issue: dojo.connect(dijit.byId('mapPanel'), 'resize', function(map) { map.resize; });

‎08-30-2012

I've pieced together a webpage template with a small header, a collapsible left panel (using the dojo ExpandoPane) and the rest of the screen is devoted to the map area. If the browser window's width is changed, the map will resize accordingly. If the ExpandoPane is minimized using the button, the map simply moves left and does not resize to fit the enlarged screen space. It's probably something simple but I can't figure out where I've gone wrong. Anyone out there see my mistake? Here's my stripped down page: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7" />  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/> <title>Template</title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dijit/themes/claro/claro.css"/> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ResizeHandle.css"/> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.8/js/dojo/dojox/layout/resources/ExpandoPane.css"/> <style type="text/css"> html, body { width: 100%; height: 100%; margin: 0; background-color:#DEDEDE; overflow:hidden; font-family: Arial, Helvetica, sans-serif; } #borderContainer { width: 100%; height: 100%; padding:3px } #mapPanel { background: #CFCFCF; height: 100%; width: 100% } #map { width:100%; height: 100% } #leftPanel { background: #F8F8F8; margin: 0px; height: 100%; width: 35% } #headerPanel { background: #FFFFFF; padding: 3px; height:6%; padding-bottom: 5px; border-bottom: solid 3px black } #contentPanel { height: 94%; width: 100% } .claro .dijitAccordionTitle { color: #5B5B5B; } .claro .dijitAccordionTitleHover { color: #000000; } .claro .dijitAccordionInnerContainerSelected .dijitAccordionTitle { color: #000000; font-weight: bold } .dojoxExpandoTitleNode { color: #8A8A8A; font-size: 85%; font-weight: normal; font-style: italic } .claro .dijitTooltipContainer { font-weight:bold; } </style> <script type="text/javascript">var djConfig = {parseOnLoad: true};</script> <script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.8"></script> <script type="text/javascript"> dojo.require("esri.map"); dojo.require("dijit.dijit"); // optimize: load dijit layer dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dojox.layout.ExpandoPane"); dojo.require("dojo.parser"); dojo.require("esri.dijit.Popup"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("dijit.Tooltip"); dojo.require("dijit.Dialog"); var map; var dialogBox; function init() { var initialExtent = new esri.geometry.Extent({ "xmin": -13592500,"ymin": 6060280,"xmax": -13506825,"ymax": 6166129,"spatialReference": {"wkid": 3857} }); var popup = new esri.dijit.Popup(null, dojo.create("div")); map = new esri.Map("map", { extent: initialExtent }); dojo.connect(map, 'onLoad', function(theMap) { dojo.connect(window, 'resize', map, map.resize); }); var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer"); map.addLayer(basemap); //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', function(map) { map.resize; }); //resize the map when the ExpandoPane resizes dojo.connect(dijit.byId('leftPanel'), 'onHide', function(map) { map.resize; }); } // resize the map window when the browser window is resized function resizeMap() { map.resize(); map.reposition(); } dojo.ready(function(){ // create a new Tooltip and connect it to the panes within the accordion widget new dijit.Tooltip({ connectId: ["closureSection_button", "dataLayerSection_button","mapLegendSection_button","disclaimerSection_button"], label: "Click to view this section" }); }); dojo.addOnLoad(init); </script> </head> <body class="claro" onresize="resizeMap();"> <div id="headerPanel" dojotype="dijit.layout.BorderContainer" class="dijitContentPane"> <div style="width:100%;height:100%"> <SPAN style="width:100%"><SPAN style = "font-size:185%;font-weight:900;padding-left:5px;text-shadow: 1px 1px #CFCFCF">A Page Title</SPAN> </div> </div> <div id="contentPanel" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'sidebar', gutters:true, liveSplitters:true" id="borderContainer"> <div id="leftPanel" data-dojo-type="dojox.layout.ExpandoPane" title="Click the Arrow to Minimize this Panel" data-dojo-props="title: 'To Minimize this Panel, Click the Arrow', splitter:true, region:'leading'" style="width: 400px;"> <div dojoType="dijit.layout.AccordionContainer"> <div id="closureSection" dojoType="dijit.layout.ContentPane" title="Content Section 01" data-dojo-props="label:'Click to Expand'" selected="true"> </div> <div id="dataLayerSection" dojoType="dijit.layout.ContentPane" title="Content Section 02" data-dojo-props="label:'Click to Expand'"> </div> <div id="mapLegendSection" dojoType="dijit.layout.ContentPane" title="Content Section 03" data-dojo-props="label:'Click to Expand'"> </div> <div id="disclaimerSection" dojoType="dijit.layout.ContentPane" title="Content Section 04"> </div> </div> </div> <div id="mapPanel" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="splitter:true, region:'center'" style="border-style:solid, border-width:1px;border-color:black;padding:0px !important"> <div id="map" ></div> </div> </div> </body> </html>

‎08-24-2012

There was some code I was looking at this week about infoWindows and keeping them within the visible screen. Maybe this thread can help you. Otherwise, you could try something like this where you base the dimensions on a percentage of the map's overall dimensions: map.infoWindow.resize(map.width * 0.75,map.height * 0.6); Steve

‎08-22-2012

Thanks, John. I marked your response with "answered" since that's an ESRI sample (albeit buried in the hidden corners of ESRIdom). I did not try a comma specifically but I did add the "fieldDelimiter" parameter like in that example and it wasn't honoring it. I had close to 30 unique values I wanted to symbolize and that was A LOT of formatted code in my function. I ended up dumping all of that in favor of using the renderer.AddValue() method which cleaned things up quite a bit and works for me. So, during the JSON import, I just apply a simple marker symbol to the data and then once the FeatureLayer is created, I overwrite the original renderer with the unique values renderer. Everyone's happy! 😄 Steve

‎08-21-2012

I am working on the code to add a FeatureLayer based on a JSON feed. I'm currently using a unique value renderer based on one field in the data and I'm using the style shown in the API documentation for esri.renderer.uniqueValueRenderer(json). Let's say the field I'm currently using categorizes damage (Wind, Flood, Fire, etc) but there is an additional field which indicates severity (Low, Medium, High). I want to now incorporate that second field into my renderer. My current renderer code would look something like this: "drawingInfo": { "renderer": { "type": "uniqueValue", "field1": "Category", "defaultSymbol": { "type": "esriPMS", "url": "a/url/default.gif", "contentType": "image/gif", "width": 18, "height": 18 }, "uniqueValueInfos": [{ "value": "Flood", "symbol": { "type": "esriPMS", "url": "a/url/flood.gif", "contentType": "image/gif", "width": 18, "height": 18 } }, To now incorporate the second field, would I just do the following? "drawingInfo": { "renderer": { "type": "uniqueValue", "field1": "Category", "field2": "severity", "defaultSymbol": { "type": "esriPMS", "url": "a/url/default.gif", "contentType": "image/gif", "width": 18, "height": 18 }, "uniqueValueInfos": [{ "value": "Flood:Low", "symbol": { "type": "esriPMS", "url": "a/url/floodLow.gif", "contentType": "image/gif", "width": 18, "height": 18 } },{ "value": "Flood:Medium", "symbol": { "type": "esriPMS", "url": "a/url/floodMedium.gif", "contentType": "image/gif", "width": 18, "height": 18 } } Thanks again! Steve

‎08-20-2012

Well HALLELUJAH! I have solved the mystery of date formatting! Your suggestion, Rene, still didn't work for me so I kept playing with it. If I manually typed things in within the javascript console, it would work. If I used the same thing within my javascript function, it would not. This got me thinking that perhaps the date returned via the query was a string instead of a number. To test it, I tried adding the "parseInt" function: alert(new Date(parseInt(rowdata.dateCl))); Lo and behold- it now works in Chrome and STILL works in Firefox. Thank god! That was maddening. Thanks again, Rene for helping me out!

‎08-17-2012

Thanks Rene for the the link to moment. I'm feeling a bit dense but I can't seem to get it to work with the dates from my data. The dates are being returned through a query so the "format" of the information coming back is a series of numbers such as "1300406400000". I tried using moment like this but it doesn't work: var temp = moment(new date(theClosureDate)); alert(temp.format('M/DD/YYYY'));

‎08-17-2012

You could try hosting the datagrid CSS styling file on your network and then modify the appropriate tag. This is what I'm doing for my datagrid implementation. The CSS file used for styling the datagrids is named "grid.CSS" Use the Firebug add-in for Firefox to make your local copy of the CSS file as well as determine which entity provides the styling for the cell color (with my version it appears to be ".dojoxGrid td"). Modify the color reference in the CSS file and you should be good to go. (I'm still using v2.8 btw)..

‎08-17-2012

On the page I've been developing, I've been populating a datagrid with attributes from a feature layer. A few of the attributes are date fields. I found out the hard way about the the format of date values returned through the API so I looked for a function to properly format my dates and times back into xx/xx/xxxx and xx:xx ampm formats. I settled on the following functions which use dojo: function formatDate(value){ var inputDate = new Date(value); return dojo.date.locale.format(inputDate, { selector: 'date', datePattern: 'MM/dd/yyyy' }); } function formatTime(value){ var inputTime = new Date(value); return dojo.date.locale.format(inputTime, { selector: 'date', datePattern: 'K:mm a' }); } The routines are used in a formatter() function for one of my columns in the datagrid like this: var rowdata = this.grid.getItem(rowIndex); var theClosureDate = rowdata.dateCl; alert(formatDate(theClosureDate)); Here's where it gets weird- I've been doing my development and debugging with Firefox and the dates displayed are correct. I just loaded the page in Chrome and IE-8 and the dates displayed are "NaN". Does anyone have a conversion function they can share which works across all browsers? It would be especially great if it also handled the UTC/local time difference. I realized that these routines don't. Thank you! Steve

My Ideas

Latest Contributions by SteveCole

How do you use stand alone tables?

Re: trouble populating a combo box with feature values

Re: make esri.dijit.Popup only return popup when feature is clicked

Re: trouble populating a combo box with feature values

trouble populating a combo box with feature values

Re: Trouble with map not resizing within a Dojo ExpandoPane

Re: Trouble with map not resizing within a Dojo ExpandoPane

Trouble with map not resizing within a Dojo ExpandoPane

Re: Resizing info windows as percent and scrollbars

Re: syntax for JSON uniqueValueRenderer on two fields

syntax for JSON uniqueValueRenderer on two fields

Re: Cross Browser date wackiness

Re: Cross Browser date wackiness

Re: v3.1 API dataGrid white on white text

Cross Browser date wackiness

Re: Accessibility Issues: Ensure [role="img"] elem...

Re: Need help converting a csv with lat long to a ...

Re: Input Data Validation involving Note

Re: Near Me Widget / Experience Builder

Re: Cannot Get Labels behind Polygon