Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
Cancel
- Home
- :
- About KellyHutchins
KellyHutchins
Esri Notable Contributor
since
06-19-2014
yesterday
2667
Posts created
160
Kudos given
485
Solutions
959
Kudos received
Turn on suggestions
Auto-suggest helps you quickly narrow down your search results by suggesting possible matches as you type.
My Ideas
(0 Idea Submissions)Latest Contributions by KellyHutchins
|
POST
|
When you specify a function to define the content for your info window, like you've done with getWindowContent, you do not have access to the placeholders. Instead you get the attributes from the graphic. In this snippet we define that the info window's content will be generated using a function named 'getWindowContent'. template.setContent(getWindowContent); Once you set this up, each time you click on a feature in the feature layer the getWindowContent function runs and provides you access to the clicked feature. function getWindowContent(graphic) { Then in the code you can access the feature's attributes as follows: graphic.attributes.NAME So in your code you'll want to replace the placeholder {NAME} with graphic.attributes.NAME.
... View more
04-15-2011
11:39 AM
|
0
|
0
|
983
|
|
POST
|
Here's a simplified version of the sample that displays tabbed content in an info window - it might help you troubleshoot your application. In order for this code to work you'll need to be using the latest release of the ArcGIS API for JavaScript (Version 2.2).
<!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"/>
<!--The viewport meta tag is used to improve the presentation and behavior of the samples
on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Info Window with Chart</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map{padding:0;}
</style>
<script type="text/javascript">var djConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("dojo.number");
dojo.require("dijit.layout.TabContainer");
var map;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13625244,"ymin":4541980,"xmax":-13622494,"ymax":4543688,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
//Add the world imagery to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(basemap);
var template = new esri.InfoTemplate();
template.setTitle("Tabbed Info Window");
template.setContent(getWindowContent);
var featureLayer= new esri.layers.FeatureLayer("http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/SanFrancisco/311Incidents/MapServer/0",{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields:["*"]
});
map.addLayer(featureLayer);
map.infoWindow.resize(225,225);
}
function getWindowContent(graphic) {
//make a tab container
var tc = new dijit.layout.TabContainer({
style: "height: 100%; width: 100%;"
}, dojo.create("div"));
//tab 1
var cp1 = new dijit.layout.ContentPane({
title: "Details",
content: "Content for Tab 1"
});
tc.addChild(cp1);
//tab 2
var cp2 = new dijit.layout.ContentPane({
title: "Details 2",
content: "Content for Tab2"
});
tc.addChild(cp2);
return tc.domNode;
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
</div>
</body>
</html>
... View more
04-12-2011
03:21 PM
|
0
|
0
|
1622
|
|
POST
|
According to this Bing Maps blog post , the new style will be the only style available starting May 1, 2011. Here's the relevant text from the blog: "This opt-in period will end on April 30, 2011 and beginning on May 1, 2011, the new map style will become the default and only road style delivered across all Bing mapping services."
... View more
04-08-2011
08:10 AM
|
0
|
0
|
2362
|
|
POST
|
Marc, Can you provide more details - and perhaps a code snippet- regarding this issue. For example, can you reproduce it with the sample on the JavaScript resource center?
... View more
04-08-2011
08:05 AM
|
0
|
0
|
1126
|
|
POST
|
Yes you can change the angle for a picture marker symbol. The PictureMarkerSymbol class inherits from MarkerSymbol which has a setAngle method. Here's a code snippet that shows how this works: var infoSymbol = new esri.symbol.PictureMarkerSymbol("../images/info.png",30,30);
infoSymbol.setAngle(45);
... View more
04-08-2011
08:04 AM
|
1
|
0
|
1416
|
|
POST
|
It looks like here your code should read tc.domNode instead of dc: return dc.domNode; I have a map set up that shows a route, and when you click on certain spots on the route, an infoWindow will pop up. The infoTemplate that the infoWindow is using is created when the map is routed, it's not getting the information dynamically via a feature layer. It's currenlty working fine with the default setup, but I'd like to include more information using tabs. I tried following the example set in this example: http://help.arcgis.com/en/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/widget_infowindowchart.html That example doesn't work, but I'm thinking it might be something to do with the feature layer. Following this example, I'm getting an error saying: Message: Object doesn't support this property or method and it's pointing to the arcgis api rather than a line in my js. Here's a snapshot of what my infoWindow-related code looks like. Any ideas on what's causing my problems?
function addStops() {
....
for ( var i = 0; i < g_routeStops.length; i++) {
var feature = g_routeStops;
var infoTemplate = new esri.InfoTemplate;
infoTemplate.setTitle("Milepost Info");
infoTemplate.setContent(createInfoWindowContent);
symbol = new esri.symbol.SimpleMarkerSymbol().setStyle(
esri.symbol.SimpleMarkerSymbol.STYLE_CIRCLE).setSize(9).setColor(
new dojo.Color( [ 255, 255, 255]));
feature.setSymbol(symbol).setInfoTemplate(infoTemplate);
map.graphics.add(feature);
.....
}
function createInfoWindowContent(graphic){
var tc = new dijit.layout.tabContainer({
style: "height: 100%; width: 100%"
}, dojo.create("div"));
var cp1 = new dijit.layout.ContentPane({
title: "Info",
content: "info tab"
});
tc.addChild(cp1);
var cp2 = new dijit.layout.ContentPane({
title: "Details",
content: "details tab"
});
tc.addChild(cp2);
return dc.domNode;
}
... View more
04-01-2011
12:40 PM
|
0
|
0
|
1622
|
|
POST
|
Thanks everyone for pointing out this deficiency in the documentation. It definitely could be clearer and we'll get it updated soon.
... View more
03-25-2011
03:23 PM
|
0
|
0
|
1415
|
|
POST
|
If the only thing you are using is the template picker to create features then you may want to take a look at the Editing without Editor sample. This sample shows how to use the template picker to add features and does not display the attribute inspector: I am not using the editor toolbar, but I am using the template picker. I'm using it to create new features and to edit feature attributes. However, most of the attributes are all housed in related business tables so I'm using a lot of custom code. .
... View more
03-25-2011
01:07 PM
|
0
|
0
|
1135
|
|
POST
|
Although scrollWheelZoom should be enabled by default so perhaps there is something else going on in your case. If you run one of the samples can you use your mouse scrolling to zoom?
... View more
03-25-2011
01:05 PM
|
0
|
0
|
2238
|
|
POST
|
That was my original code. That doesn't work either. You have to wait until the map is loaded for this to work, are you doing something like this?
dojo.connect(map, "onLoad", function() {
map.enableScrollWheelZoom();
});
... View more
03-25-2011
01:03 PM
|
0
|
0
|
2238
|
|
POST
|
enableScrollWheelZoom isn't set via the Map's constructor. Try this after the map is created. map.enableScrollWheelZoom(); You can find more details about map navigation here: http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/intro_navigation.htm FWIW, I wonder if this is a related issue - I can't get my map to enable zooming with the scroll wheel either. It appears that my map settings are having no effect whatsoever.
map = new esri.Map("map", {
enableScrollWheelZoom: true,
showInfoWindowOnClick:false
});
Any ideas as to why these settings are not being honored?
... View more
03-25-2011
12:59 PM
|
0
|
0
|
2238
|
|
POST
|
I re-read your initial post and this is because you are using the editor. The editor uses the info window to display attribute information. Can you tell me a bit about how you are using the editor, for example are you using it just to create new features - or are you using the toolbar etc? Thanks Kelly! I appreciate the tip. Unfortunately it didn't work. I added that to my init() function but the infoWindow still pops up.
... View more
03-25-2011
12:54 PM
|
0
|
0
|
2238
|
|
POST
|
We are working on adding a sample that shows how to use these, in the meantime the following code snippets might help: GeodesicLengths: map.graphics.add(new esri.Graphic(geometry, graphicSymbol));
//Since the map projection is web mercator, convert to lat/lon
var geographicGeometry = geometry;
//calculate geodesic length on client
var lengths = esri.geometry.geodesicLengths([geographicGeometry], esri.Units.KILOMETERS); Geodesic Areas: map.graphics.add(new esri.Graphic(geometry, graphicSymbol));
var geographicGeometries = [];
//if self intersecting, simplify using geometry service
if (esri.geometry.polygonSelfIntersecting(geometry)) {
//if self intersecting, simplify using geometry service
geometryService.simplify([geometry], function(simplifiedGeometries) {
dojo.forEach(simplifiedGeometries, function(simplifiedGeometry, idx) {
geographicGeometries.push(esri.geometry.webMercatorToGeographic(simplifiedGeometry));
});
var areas = esri.geometry.geodesicAreas(geographicGeometries, esri.Units.ACRES);
dojo.byId("result").innerHTML = "The area of the polygon is: " + areas[0] + " Acres";
});
}
else {
geographicGeometries.push(esri.geometry.webMercatorToGeographic(geometry));
var areas = esri.geometry.geodesicAreas(geographicGeometries, esri.Units.ACRES);
dojo.byId("result").innerHTML = "The area of the polygon is: " + areas[0] + " Acres";
}
}
... View more
03-25-2011
12:47 PM
|
0
|
0
|
1077
|
|
POST
|
When you create the map set the showInfoWindowOnClick option to false to disable the info window. Here's a code snippet that shows this:
map = new esri.Map("map", {
extent: esri.geometry.geographicToWebMercator(new esri.geometry.Extent(-125.90, 44.60, -114.65, 50.22, new esri.SpatialReference({wkid:4326}))),
showInfoWindowOnClick:false
});
... View more
03-25-2011
12:37 PM
|
0
|
0
|
2238
|
|
POST
|
Sara, If you are trying to display info windows for one layer in your map an easier solution might be to create a feature layer. When you create a new feature layer and add it to the map you can define an info template for that layer. Then when someone clicks on a feature in that layer the info window appears. Here's an example showing how this works:
<!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" />
<!--The viewport meta tag is used to improve the presentation and behavior
of the samples on iOS devices-->
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"
/>
<title>
Street Trees
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/claro/claro.css">
<style>
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
.esriScalebar{padding: 20px 20px; }
#map{ padding:0; }
</style>
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.2">
</script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Scalebar");
dojo.require("esri.layers.FeatureLayer");
var map;
function init() {
var initExtent = new esri.geometry.Extent({
"xmin": -13627755,
"ymin": 4548254,
"xmax": -13626718,
"ymax": 4548849,
"spatialReference": {
"wkid": 102100
}
});
map = new esri.Map("map", {
extent: initExtent
});
//Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Topo_Map/MapServer");
map.addLayer(basemap);
var template = new esri.InfoTemplate();
template.setTitle("<b>${qAddress}</b>");
template.setContent("${*}");
//add the street trees to the map
var featureLayer = new esri.layers.FeatureLayer("http://servicesbeta.esri.com/ArcGIS/rest/services/SanFrancisco/SFStreetTreesRendered/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields: ["*"]
});
map.addLayer(featureLayer);
var resizeTimer;
dojo.connect(map, 'onLoad', function(theMap) {
var scalebar = new esri.dijit.Scalebar({
map: map,
attachTo: "top-right"
});
dojo.connect(dijit.byId('map'), 'resize', function() { //resize the map if the div is resized
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
});
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width: 100%; height: 100%; margin: 0;">
<div id="map" dojotype="dijit.layout.ContentPane" region="center" style="overflow:hidden;">
</div>
</div>
</body>
</html>
... View more
03-25-2011
08:24 AM
|
0
|
0
|
1270
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 4 weeks ago | |
| 1 | 4 weeks ago | |
| 2 | 07-21-2026 09:30 AM | |
| 2 | 07-21-2026 08:35 AM | |
| 1 | 07-09-2026 08:56 AM |
Activity Feed
- Posted Re: Zone Lookup returns inconsistent results. on ArcGIS Instant Apps Questions. 2 weeks ago
- Posted Re: Instant app Sidebar template: Option to change the orders of the widgets on the left panel - Status changed to: Under Consideration on ArcGIS Instant Apps Ideas. 2 weeks ago
- Posted Re: Overall App Reset Button - Status changed to: Under Consideration on ArcGIS Instant Apps Ideas. 2 weeks ago
- Posted Re: Instant app Sidebar template: Option to change the orders of the widgets on the left panel on ArcGIS Instant Apps Ideas. 2 weeks ago
- Posted Re: Zone Lookup Push Pins missing from map outside of zones on ArcGIS Instant Apps Questions. 2 weeks ago
- Posted Re: Allow Custom Sorting and Additional Fields in Nearby Instant App Results - Status changed to: Under Consideration on ArcGIS Instant Apps Ideas. 3 weeks ago
- Kudoed Allow Custom Sorting and Additional Fields in Nearby Instant App Results for MayaBenway. 3 weeks ago
- Got a Kudo for Re: Basic Instant App - Url Parameter 'Find' ignores searchable layers. 4 weeks ago
- Got a Kudo for Re: Zone Lookup Instant App - Collapse Results. 4 weeks ago
- Got a Kudo for Re: Zone Lookup Instant App - Collapse Results. 4 weeks ago
- Posted Re: Zone Lookup Instant App - Collapse Results on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: How do I disable "Don't show this again" on Introduction window on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Zone Lookup Instant App - Collapse Results on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Accessibility Issues: ARIA progressbar nodes must have an accessible name on ArcGIS Instant Apps Questions. 4 weeks ago
- Got a Kudo for Re: Zone Lookup Instant App - Collapse Results. 4 weeks ago
- Posted Re: How to expose the components modifiable by CSS in an Instant App, so I know what to change? on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Increased functionality in the Layer List of Online Instant Apps - Status changed to: Needs Clarification on ArcGIS Instant Apps Ideas. 07-22-2026 03:17 PM
- Got a Kudo for Re: Zone Lookup Instant App - Collapse Results. 07-22-2026 07:32 AM
- Got a Kudo for Re: Basic Instant App - Url Parameter 'Find' ignores searchable layers. 07-21-2026 07:36 PM
- Posted Re: Pop-Ups not working as configured in Instant Apps - Slider on ArcGIS Instant Apps Questions. 07-21-2026 12:06 PM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
yesterday
|