Latest Contributions by SteveCole

‎10-22-2014

Looks like you're still using an older API version. I had to dig around for one of the older legacy style samples but here's a modified version which you can look at for what you're trying to accomplish: <!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"> <title></title> <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/dojo/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.3/js/esri/css/esri.css"> <style> html, body { height: 97%; width: 98%; margin: 1%; } #mainWindow, #header, #map, #rightPane, #leftPane, #footer {border: 1px solid #606060;} </style> <script type="text/javascript">var dojoConfig = { parseOnLoad: true };</script> <script src="http://js.arcgis.com/3.3/"></script> <script> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("dijit.layout.AccordionContainer"); dojo.require("esri.map"); dojo.require("dijit.form.ComboBox"); var map; function init() { map = new esri.Map("map", { basemap: "topo", center: [-118.404, 34.054], zoom: 11 }); } dojo.ready(init); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit.layout.BorderContainer" data-dojo-props="design:'headline', gutters:false" style="background:#EEEEEE;width:100%;height:100%;"> <div id="header" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'top'" style="height:100px"> This is the header section </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'left'" id="leftPane" style="width:100px;height:100%"> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="title:'pane 1'"> Content for pane 1 </div> </div> <div id="map" class="shadow" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'center'" style="width:500px;height:700px"> </div> <div data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'right'" id="rightPane" style="width:100px;height:100%;"> This is the right section </div> <div id="footer" data-dojo-type="dijit.layout.ContentPane" data-dojo-props="region:'bottom'" style="height:150px;width:100%"> Make a selection from any of these combo boxes:<br/> <table> <tr> <td> <select id="Select1" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select2" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select3" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select4" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select5" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select6" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> </tr> <tr> <td> <select id="Select7" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select8" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select9" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select10" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> <td> <select id="Select11" dojotype="dijit.form.ComboBox" autocomplete="true" hasdownarrow="true" style="width: 175px; background-color:Black; font:black;color: white;"> </td> </tr> </table> </div> </div> </body> </html>

‎10-22-2014

I think we'd need to see more of your HTML to comment more. You have the contentPane embedded in a table, but where is the table element located in the grand scheme of things? If the table is in a contentPane which is specified as top/left/center/right, then your combo box won't show up what you think is the bottom of the page's layout. You have to keep in mind the nesting aspect of DIVs when layout out HTML elements. This can definitely get pretty complicated to set up what you want. This link in the API guide has a couple graphic illustrations of the basic layout "regions" of Dojo.

‎10-22-2014

I would be cautious of the sledgehammer approach of a css rule on a links. I know I like to sometimes custom format infoWindow content and include hyperlinks. Using your CSS rule, that would remove those links (this might also remove hyperlinks from any data fields with hyperlinks too). It's aways best to see if ESRI has established a CSS class and then just target that class. In this case, there is one to target: .esriPopup .action.zoomTo { display: none; }

‎10-13-2014

Maybe there's an issue with your fields being blank vs NULL; hard to say from my end on the outside. Let's try evaluating your field values another way, Let's look at the length of the field's value.: if (evt.graphic.attributes) { var theString; if(evt.graphic.attributes.NAME.length > 0) { theString = "<b>Name1</b>: " + evt.graphic.attributes.NAME; } else if (evt.graphic.attributes.GROUP_.length > 0) { theString = "<b>Name2</b>: " + evt.graphic.attributes.GROUP_; } else if (evt.graphic.attributes.ROUTE_2.length > 0) { theString = "<b>Name3</b>: " + evt.graphic.attributes.ROUTE_2; } else { theString = "<b>Name4</b>: " + evt.graphic.attributes.ROUTE_1; } ShowMapTip(evt, theString); }

‎10-10-2014

How about something like.... if (evt.graphic.attributes) { var theString; if(!evt.graphic.attributes.NAME) { theString = "<b>Name</b>: " + evt.graphic.attributes.NAME; } else if (!evt.graphic.attributes.GROUP_) { theString = "<b>Name</b>: " + evt.graphic.attributes.GROUP_; } else if (!evt.graphic.attributes.ROUTE_2) { theString = "<b>Name</b>: " + evt.graphic.attributes.ROUTE_2; } else { theString = "<b>Name</b>: " + evt.graphic.attributes.ROUTE_1; } ShowMapTip(evt, theString); }

‎10-09-2014

I would try using a boolean variable in order to avoid running your code during that initial map extent change that occurs. So, something like: //get the variables of areaID (hunt area, IOG area, or Access Yes! area), layerID (which layer to apply the ID query to), and label (what will appear in the legend). Get the zoom and map center coordinate variables. var layerID, urlZoom, urlX, urlY, homeURL, zoomLevel, centerpoint, cX, cY, newURL, extentI, extentC; var initLoad = true; window.onload = function(){ layerID = getVariableByName('lyr'); urlZoom = getVariableByName('zoom'); urlX = getVariableByName('X'); urlY = getVariableByName('Y'); if (typeof areaID != 'undefined'){ doQuery(layerID); } if (typeof urlZoom != 'undefined'){ var point = new Point(urlX, urlY, new SpatialReference({ wkid: 4326})); map.setLevel(urlZoom); map.centerAt(point); } //Get the url. homeURL = window.location.href; zoomLevel = map.getZoom(); centerpoint = webMercatorUtils.webMercatorToGeographic(map.extent.getCenter()); cX = parseFloat(centerpoint.x.toFixed(3)); cY = parseFloat(centerpoint.y.toFixed(3)); newURL ="?zoom=" + zoomLevel + "&X=" + cX + "&Y=" + cY; //If the url contains an lyr parameter, remove part of url from ? to end. if (window.location.href.indexOf("lyr") > 0){ $("#viewURL").append(homeURL); window.history.pushState(null,null,window.location.href.slice(0,(window.location.href).indexOf('?'))); //If url has no lyr parameter. } else { $("#viewURL").empty(); homeURL = window.location.href; $("#viewURL").append(homeURL + newURL); } //Create variable for load extent. extentI = map.extent; var I = ""; I = "ExtentI: XMin: " + extentI.xmin + "YMin: " + extentI.ymin + "XMax: " + extentI.xmax + "YMax: " + extentI.ymax; } //On extent change, change the url zoom and coordinate parameters. map.on("extent-change", function(){ if(initLoad) { //this is the initial map extent change at page load initLoad = false; } else { extentC = map.extent; var C = ""; C = "ExtentC: XMin: " + extentC.xmin + "YMin: " + extentC.ymin + "XMax: " + extentC.xmax + "YMax: " + extentC.ymax; if (extentI == extentC){ console.log("Extent hasn't changed"); } if (extentI != extentC){ $("#viewURL").empty(); homeURL = window.location.href; zoomLevel = map.getZoom(); centerpoint = webMercatorUtils.webMercatorToGeographic(map.extent.getCenter()); cX = parseFloat(centerpoint.x.toFixed(3)); cY = parseFloat(centerpoint.y.toFixed(3)); newURL ="?zoom=" + zoomLevel + "&X=" + cX + "&Y=" + cY; $("#viewURL").append(homeURL + newURL); } } });

‎09-24-2014

Just want to confirm what I'm not seeing. I'd like to obtain the midpoint of a given polyline in a Feature Layer. Is this possible with the standard API without resorting to a GP task? Thanks- Steve

‎09-18-2014

How about something like creating a new temporary circle graphic like this: var point = new Point([-117.15,32.71]); var circleGeometry = new Circle(point,{ "radius": 1 }); And then, at the appropriate time, try to update that circle variable with your graphic that may/may not be a circle: var isCircle = false; try { circleGeometry = evt.graphic; isCircle = true; } catch(err) { isCircle = false; } My theory is that, if it is a circle, you will be able to update the previously declared graphic variable. If it isn't, it will throw an error.

‎09-18-2014

To follow up, I tested points, lines, and polygons. "graphic.geometry.radius" returns undefined for those types but it will return a value for circles.

‎09-18-2014

Circles have properties in the API such as center, radius, etc. Maybe you can test the graphic for the presence of a valid value? If it has one, then it's a circle. Kind of like feature sniffing to test for a particular browser. Otherwise, a crude but probably not foolproof alternative would be test for type=polygon and geometry.width = geometry.height (pseudo code, obviously).

‎09-17-2014

Assuming you've declared variables representing your map related objects as global, could you just drop another require() structure in the second "external file" and reference any dojo/dijit items needed for that JS file?

‎09-16-2014

Yes- I think you could do this. In the other thread I linked, there was a particular line: map.infoWindow.show(evt.screenPoint, esri.dijit.InfoWindow.ANCHOR_UPPERRIGHT); That specifies where the infoWindow should appear (map location + relative location based on map location). In order to always show the infoWindow in the lower left corner, you would simply need to calculate what the map coordinate is for the lower left corner of the map and pass that as the first parameter in the code above. I haven't tried this, though.

‎09-15-2014

I think this is just default behavior from the API, which is unfortunate. This has been happening to folks for years (myself included). I thought that the API team had plans on trying to address this but they haven't so far. Here's an old thread which offers a solution that worked for some folks. It didn't for me.

‎09-15-2014

Are you using the popup widget? If so, in the constructor, add "highlight: false" which should prevent that symbol from appearing. require([ "esri/dijit/Popup", "dojo/dom-construct", ... ], function(Popup, domConstruct... ) { var popup = new Popup({ highlight: false, offsetX: 10, offsetY: 10, zoomFactor: 2 }, domConstruct.create("div")); ... });

‎09-10-2014

This is how any date field value is returned. The string of numbers is a date in Epoch format. This page has a little summary about what that date format actually is as well as a converter. In order for you to display it as a date in a format familiar to you, you'll need to do a couple things to it- convert the numbers to a date & then format the date into a format you prefer ("MM/DD/YYYY"); Some pseudocode might be: var theDateVal = attr ; //getting your Epoch format date value theDate = new Date(theDateVal); theFormattedDate = Date.toSrtring('M/d/yyyy'); //returns a date formatted like '9/10/2014' So, for your actual code, you need to evaluate if the current attribute in the loop is a date field. If so, intercept the value and format it before you push it into the resultItems array. One last thing about dates & JavaScript. They're horribly inconsistent between browsers. As with almost everything done in Internet Explorer, you will get an entirely different value than what you would from any other browser like Chrome or Firefox. Most likely, it will return a null or NaN value for a formatted date. I would highly recommend using a date library in your project like date.js to help combat the idiosyncrasies of cross-browser date formatting. Probably a little more than you wanted to here but the short answer is that you need to re-format the date value before passing it to the resultItems array. Steve

My Ideas

Latest Contributions by SteveCole

Re: How to place combo box within footer

Re: How to place combo box within footer

Re: Hide the zoom link in infoTemplate

Re: Display text unless null, if null display text of next attribute colum

Re: Display text unless null, if null display text of next attribute colum

Re: Why does map.on 'extent-change' fire when the the map first loads?

Midpoint of line?

Re: How to check if graphic is a circle?

Re: How to check if graphic is a circle?

Re: How to check if graphic is a circle?

Re: creating javascript external file for map function

Re: control popup location

Re: control popup location

Re: Blue highlight box when hovering

Re: How do I format the date field from a querytask results featureset.

Re: Viewpoint / lookout symbol?

Re: Copying from SHP to Existing GDB FC

Re: Remove Pop-Up Expand/Collapse Button

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

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