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
Wednesday
2622
Posts created
155
Kudos given
481
Solutions
941
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
|
Can you post a link to the sample that is broken in IE?
... View more
05-16-2011
03:30 PM
|
0
|
0
|
832
|
|
POST
|
You were close - you just needed to assign a width to the right pane that contains the tab. You can do this by setting an id for the tab pane to id="rightPane". The sample associates a css style with this id to set the pane's width to 30%. Here's the modified code:
<!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>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/soria/soria.css">
<style type="text/css">
html, body {
height: 100%; width: 100%; margin: 0;
}
body{
background-color:white; overflow:hidden;
font-family: "Trebuchet MS";
}
.roundedCorners{
-moz-border-radius: 4px;
}
#header {
border: solid 2px #7EABCD;
background-color:white; color:peru; font-size:18pt;
text-align:center; font-weight:bold; height:60px;
}
#subheader {
font-size:small;
color: peru;
}
#rightPane{
background-color:white;
color:peru;
border: solid 2px cornflowerblue;
width:30%;
overflow:hidden;
}
#map {
background-color:white;
border:solid 2px cornflowerblue;
padding:0;
}
#footer {
border: solid 2px #7EABCD;
background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
}
.soria .dojoxGridHeader .dojoxGridCell {
color:peru !important;
}
</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.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("dijit.layout.TabContainer");
dojo.require("esri.map");
dojo.require("esri.toolbars.draw");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.tasks.query");
dojo.require("dojox.grid.DataGrid");
dojo.require("dojo.data.ItemFileReadStore");
var map, toolbar;
var featureLayer;
function init() {
var initialExtent = new esri.geometry.Extent({
"xmin": -13092200,
"ymin": 3691751,
"xmax": -12538796,
"ymax": 3880092,
"spatialReference": {
"wkid": 102100
}
});
map = new esri.Map("map", {
extent: initialExtent
});
dojo.connect(map, 'onLoad', function(map) {
dojo.connect(dijit.byId('map'), 'resize', resizeMap);
});
var basemapUrl = "http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer";
var featureLayerUrl = "http://sampleserver3.arcgisonline.com/ArcGIS/rest/services/Earthquakes/EarthquakesFromLastSevenDays/MapServer/0";
var basemap = new esri.layers.ArcGISTiledMapServiceLayer(basemapUrl);
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl, {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields: ["region,magnitude,depth,objectid"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(8).setColor(new dojo.Color([160, 214, 238])));
map.addLayer(basemap);
map.addLayer(featureLayer);
}
function resizeMap() {
//resize the map when the browser resizes - view the 'Resizing and repositioning the map' section in
//the following help topic for more details http://help.esri.com/EN/webapi/javascript/arcgis/help/jshelp_start.htm#jshelp/inside_faq.htm
var resizeTimer;
clearTimeout(resizeTimer);
resizeTimer = setTimeout(function() {
map.resize();
map.reposition();
}, 500);
}
//show map on load
dojo.addOnLoad(init);
</script>
</head>
<body class="soria">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false"
style="width:100%; height:100%;">
<div id="header" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="top">
HEADER
</div>
<div id="map" dojotype="dijit.layout.ContentPane" class="roundedCorners" region="center">
</div>
<div id="rightPane" dojoType="dijit.layout.TabContainer" region="right" tabStrip="true">
<div dojoType="dijit.layout.ContentPane" title="My first tab" selected="true">
Stuff
</div>
<div dojoType="dijit.layout.ContentPane" title="My second tab">
Lorem ipsum and all around - second...
</div>
<div dojoType="dijit.layout.ContentPane" title="My last tab" closable="true">
Lorem ipsum and all around - last...
</div>
</div>
<!-- end TabContainer -->
<div id="footer" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="bottom">
This is the footer section
</div>
</div>
</body>
</html>
... View more
05-13-2011
03:03 PM
|
0
|
0
|
710
|
|
POST
|
If you are using version 2.2 of the API you can use the new formatting capabilities of the info window to generate a title when the feature is clicked. The 'Formating Info Window content' help topic has details on how to accomplish this - see the 'Deferred Object' section. Here's a code sample that shows how to generate the title, in this case we use an attribute from the graphics for demonstration purposes.
<!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">
<!--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>
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.2/js/dojo/dijit/themes/Claro/Claro.css">
<style type="text/css">
html, body {
height: 100%; width: 100%;
margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden;
font-family: "Kimberley", sans-serif
}
#map {
margin:5px;
border:solid 4px #2A2F30;
padding:0px;
}
.shadow{
-moz-border-radius: 6px;
-webkit-border-radius: 6px;
border-radius: 6px;
box-shadow: 8px 8px 16px #323834;
-webkit-box-shadow: 8px 8px 16px #323834;
-moz-box-shadow: 8px 8px 16px #323834;
-o-box-shadow: 8px 8px 16px #323834;
}
</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.dijit"); // optimize: load dijit layer
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("dojo.number");
dojo.require("esri.layers.FeatureLayer");
var map,trailLayer;
var template;
function init() {
var initExtent = new esri.geometry.Extent({"xmin":-13042392,"ymin":4324579,"xmax":-13021640,"ymax":4335968,"spatialReference":{"wkid":102100}});
map = new esri.Map("map",{extent:initExtent});
map.infoWindow.resize(150, 150);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
//add the trails feature layer to the map
template = new esri.InfoTemplate();
template.setTitle(getTitle);
template.setContent(getTextContent);
trailLayer = new esri.layers.FeatureLayer("http://sampleserver5.arcgisonline.com/ArcGIS/rest/services/LocalGovernment/Recreation/MapServer/1", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate:template,
outFields: ["*"]
});
//create a new renderer for the feature layer
var lineSymbol = new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID,new dojo.Color([0,255,0,.70]), 5);
trailLayer.setRenderer(new esri.renderer.SimpleRenderer(lineSymbol));
map.addLayer(trailLayer);
//add world place names to the map
var referenceLayer = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Reference/World_Boundaries_and_Places/MapServer");
map.addLayer(referenceLayer);
}
function getTitle(graphic){
var deferred = new dojo.Deferred();
setTimeout(function() {
deferred.callback("Title: " + graphic.attributes["notes"]);
}, 500);
return deferred;
}
//Generate the content for the info window when the feature is clicked.
function getTextContent(graphic) {
return 'My Test Content';
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline" gutters="false" style="width:100%; height:100%;">
<div id="map" dojotype="dijit.layout.ContentPane" class="shadow" region="center"></div>
</div>
</body>
</html>
... View more
05-11-2011
08:42 AM
|
0
|
0
|
1039
|
|
POST
|
The sample Steve pointed you to (Multiple Graphics Layers) is a good one for getting started. In that sample the graphics are generated as the results of a query - so you'll need to modify the code to loop through your database results and add a graphic for each point. An alternate approach might be to use a feature layer. I've attached an example that gets geo-tagged photos from Flickr and displays them on a map. To view the attachment, rename the file extension to .html.
... View more
05-11-2011
08:29 AM
|
0
|
0
|
950
|
|
POST
|
For Android, you many need to increase the click tolerance. The default value that we use is 5 pixels. You can increase this using the following after the page loads: esri.layers._GraphicsContainer.prototype._tolerance = 15;
... View more
05-10-2011
05:28 PM
|
0
|
0
|
428
|
|
POST
|
samueljon - you are correct, we do need to update the Aptana code assist to work with the newly released version 3.0. We plan to update the code assist and will add it to the resource center once its ready.
... View more
05-08-2011
12:50 PM
|
0
|
0
|
2973
|
|
POST
|
I think you are running into the bug described in the following discussion forum thread: http://forums.esri.com/Thread.asp?c=158&f=2396&t=301691&mc=5 The thread has a patch you can apply if you are using 1.6. The bug is fixed in version 2.0 and the 2.0 samples are located here: http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm
... View more
04-26-2011
07:25 AM
|
0
|
0
|
751
|
|
POST
|
There's a sample showing feature layer selections here: http://help.arcgis.com/EN/webapi/javascript/arcgis/help/jssamples_start.htm#jssamples/fl_selectfeatures.html
... View more
04-21-2011
12:41 PM
|
0
|
0
|
1889
|
|
POST
|
You can select from a map service based feature layer - you don't need a feature service.Can you post your code that creates the feature layer and sets the selection symbol.
... View more
04-21-2011
12:33 PM
|
0
|
0
|
1889
|
|
POST
|
Since you are working with a feature layer you shouldn't have to re-add the graphics to the map. Try defining a selection symbol for the feature layer using featureLayer.setSelectionSymbol. Then when features are selected using selectFeatures they should automatically display on the map using the selection symbol you defined.
... View more
04-21-2011
12:20 PM
|
0
|
0
|
1889
|
|
POST
|
This forum post contains details on how to fix this at 2.2.
... View more
04-19-2011
03:15 PM
|
0
|
0
|
541
|
|
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
|
850
|
|
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
|
1360
|
|
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
|
2040
|
|
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
|
935
|
My kudoed posts
| Title | Kudos | Posted |
|---|---|---|
| 1 | 03-31-2026 08:27 AM | |
| 1 | 03-26-2026 09:07 AM | |
| 1 | 03-26-2026 10:11 AM | |
| 1 | 03-24-2026 02:23 PM | |
| 1 | 03-17-2026 02:50 PM |
Activity Feed
- Posted Re: Attachment Viewer alt text on ArcGIS Instant Apps Questions. Wednesday
- Posted Re: How was this Zone Lookup Map made? on ArcGIS Instant Apps Questions. 2 weeks ago
- Posted Re: Instant App suddenly unavailable to view or configure on ArcGIS Instant Apps Questions. 2 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 3 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 3 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 3 weeks ago
- Posted Re: Zone Lookup Push Pins missing from map outside of zones on ArcGIS Instant Apps Questions. 3 weeks ago
- Posted Re: Accessibility problem: Screen reader not reading part of the app on ArcGIS Instant Apps Questions. a month ago
- Posted Re: Customizing font size and boldness for locator placeholder text in Zone Lookup App on ArcGIS Instant Apps Questions. 04-02-2026 02:10 PM
- Posted Re: Zone Lookup not working. on ArcGIS Instant Apps Questions. 04-02-2026 01:45 PM
- Got a Kudo for Re: Opacity widget in Basic (Media Map) Instant App. 03-31-2026 02:20 PM
- Posted Re: Opacity widget in Basic (Media Map) Instant App on ArcGIS Instant Apps Questions. 03-31-2026 08:27 AM
- Got a Kudo for Re: Opacity widget in Basic (Media Map) Instant App. 03-27-2026 02:23 PM
- Got a Kudo for Re: Opacity widget in Basic (Media Map) Instant App. 03-27-2026 01:16 AM
- Posted Re: Can't select a layer source in search configuration on ArcGIS Instant Apps Questions. 03-26-2026 10:34 AM
- Posted Re: Opacity widget in Basic (Media Map) Instant App on ArcGIS Instant Apps Questions. 03-26-2026 10:11 AM
- Posted Re: Opacity widget in Basic (Media Map) Instant App on ArcGIS Instant Apps Questions. 03-26-2026 09:07 AM
- Got a Kudo for Re: Can't select a layer source in search configuration. 03-25-2026 03:31 PM
- Got a Kudo for Re: Accessibility Issues: Buttons must have discernible text - Round 2. 03-25-2026 12:01 PM
- Posted Re: Add mouse hover behaviors on features on ArcGIS Online Ideas. 03-25-2026 09:46 AM
Contact Me
| Online Status |
Offline
|
| Date Last Visited |
Wednesday
|