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
3 hours ago
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
|
You could modify the basic viewer template to accept an address as a url parameter. There are a few ways to accomplish this but here's one. Open layout.js and replace the createSearchTool function with this one.
function createSearchTool(){
//add the toolbar section that holds the search tool
var wrapperDiv = dojo.create('div',{
id:'searchWrapper'
},dojo.byId('webmap-toolbar-right'));
dojo.addClass('searchWrapper','searchwrapper');
var searchInput = dojo.create('input',{
id:'searchField',
type:'text',
placeholder: i18n.tools.search.title,
onkeydown: function(e) {
if(e.keyCode === 13){
findLocation();
}
}
},wrapperDiv);
dojo.addClass(dojo.byId('searchField'),'searchbox');
dojo.create('input',{
type:'image',
id:'blankImage',
src:'images/blank.gif'
},wrapperDiv);
dojo.connect(dojo.byId('blankImage'),'onclick',function(){
findLocation();
});
dojo.addClass(dojo.byId('blankImage'),'searchbutton');
//add placeholder for browsers that don't support (IE)
if (!supportsPlaceholder()) {
var search = dojo.byId("searchField");
var text_content = i18n.tools.search.title;
search.style.color = "gray";
search.value = text_content;
search.onfocus = function () {
if (this.style.color === "gray") {
this.value = "";
this.style.color = "black";
}
};
search.onblur = function () {
if (this.value === "") {
this.style.color = "gray";
this.value = text_content;
}
};
}
//if there were url params zoom to them
if(urlObject.query && urlObject.query.address){
dojo.byId('searchField').value = urlObject.query.address;
findLocation();
}
}
Then you can add an address to the url and the app should zoom to that location. You may have to modify the code if your locator doesn't accept single address input: http://localhost/Template/test/basicviewer/index.html?address=380 new York st Redlands CA
... View more
11-29-2011
08:59 AM
|
0
|
0
|
578
|
|
POST
|
I modified the sample to use your code (doBuffer) and it worked for me. In my test I just use the map's extent to generate the buffer. Do you see any errors in Firebug or the Chrome Developer Tools console when you run your 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,IE=9" />
<!--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>QueryTask with query geometry from another task</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.tasks.query");
dojo.require("esri.tasks.geometry");
var queryTask;
var map;
var gsvc;
function init() {
var startExtent = new esri.geometry.Extent({"xmin":-10605514,"ymin":4712767,"xmax":-10600737,"ymax":4717545,"spatialReference":{"wkid":102100}});
map = new esri.Map("mapDiv", { extent: startExtent });
//listen for when map is loaded and then add query functionality
dojo.connect(map, "onLoad", initFunctionality);
var streetMap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer");
map.addLayer(streetMap);
}
function initFunctionality(map) {
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/0");
//identify proxy page to use if the toJson payload to the geometry service is greater than 2000 characters.
//If this null or not available the buffer operation will not work. Otherwise it will do a http post to the proxy.
esriConfig.defaults.io.proxyUrl = "http://localhost/proxy/proxy.ashx";
esriConfig.defaults.io.alwaysUseProxy = false;
//Geometry Service Endpoint
gsvc = new esri.tasks.GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");
}
function doBuffer() {
var buffParams = new esri.tasks.BufferParameters();
var extent = map.extent;
buffParams.geometries = [extent];
buffParams.distances = [dojo.byId('bufferDistance').value];
buffParams.unit = esri.tasks.GeometryService.UNIT_FOOT;
buffParams.bufferSpatialReference = new esri.SpatialReference({ wkid: 3421 });
buffParams.outSpatialReference = map.spatialReference;
gsvc.buffer(buffParams);
var link1 = dojo.connect(gsvc, "onBufferComplete", function (geometries) {
var symbol1 = new esri.symbol.SimpleFillSymbol("none", new esri.symbol.SimpleLineSymbol("dashdot", new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]));
var graphic = new esri.Graphic(geometries[0], symbol1);
map.graphics.add(graphic);
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLOCK"];
query.where = "";
query.geometry = graphic.geometry;
query.spatialRelationship = esri.tasks.Query.SPATIAL_REL_CONTAINS;
queryTask.execute(query);
});
var link2 = dojo.connect(queryTask, "onComplete", function (featureSet) {
alert('Hello test');
alert(featureSet.features.length);
dojo.disconnect(link1);
dojo.disconnect(link2);
});
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
Zoom to area and click on map to select census block points within the buffered circle.<br/>
<input type='button' value='buffer' onclick='doBuffer();' />
Buffer distance (in kilometers): <input type="text" id="bufferDistance" value="1" size="5"/>
<div id="mapDiv" style="width: 500px; height:500px;"></div>
<span id="messages"></span>
</body>
</html>
... View more
11-28-2011
09:04 AM
|
0
|
0
|
1418
|
|
POST
|
There's a sample here that shows this same scenario (Buffer then Select using Buffer): http://help.arcgis.com/en/webapi/javascript/arcgis/demos/query/query_buffer.html
... View more
11-28-2011
07:41 AM
|
0
|
0
|
1418
|
|
POST
|
It's only fieldInfos or description. You could use description and format the content (including fields) any way you want. If you define a title for the chart it will add a horizontal line below the title. Is that what you needed? You can also define multiple charts for one popup. If more than one chart is added then you'll see navigation arrows allowing you to move between the charts. //define popup template for census layer 4
var template2 = new esri.dijit.PopupTemplate({
title: "Name {NAME}",
description: "Descriptive info can go here ....",
mediaInfos: [{
"title": "Male/Female",
"type": "piechart",
"caption": "Chart caption for male/female chart",
"value": {
"fields": ["TotMale", "TotFem"]
}
}, {
"title": "Race",
"type": "piechart",
"caption": "Caption for race chart",
"value": {
"fields": ["AllWhite", "AllBlk", "AllAsian", "HispTot"]
}
}]
});
... View more
11-22-2011
12:03 PM
|
0
|
0
|
500
|
|
POST
|
In your example it looks like you are already defining separate templates for each layer you just need to setup the chart. You can do this using a PopupTemplate. The PopupTemplate has a mediaInfos section that allows you to define a chart. Here's a simplified version of your app that uses feature layers instead of an identify task and defines a separate popup chart for each layer. View a live version of the code below here: http://jsfiddle.net/cUmtj/
<!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>DVRPC - U.S. Census Data Profiles</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css">
<style>
html, body {
height: 100%; width: 100%; margin: 0; padding: 0;
}
body{
background-color:white; overflow:hidden; font-family: "Trebuchet MS";
}
#header{
height:40px;
width:100%;
background-color:#0077ac;
}
h1{
color: White;
font-size:120%;
margin:0px 0px 0px 20px;
float:left;
width:360px;
}
.roundedCorners{
-moz-border-radius: 4px;
}
.shadow{
/*slight shadow effect added for browsers that support this functionality*/
-o-border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
box-shadow: 4px 4px 8px #adadad;
-webkit-box-shadow: 4px 4px 8px #adadad;
-moz-box-shadow: 4px 4px 8px #adadad;
-o-box-shadow: 4px 4px 8px #adadad;
}
#subheader {
font-size:small;
padding-left: 40px;
color: peru;
}
#rightPane{
background-color:white;
color:peru;
margin:5px;
border: solid 2px cornflowerblue;
}
#mapArea, #map {
background-color:white;
border:solid 2px cornflowerblue;
margin:5px;
}
#footer {
border: solid 1px #7EABCD;
background-color:white;color:peru;font-size:10pt; text-align:center; height:40px;
}
</style>
<script type="text/javascript">var dojoConfig = {parseOnLoad: true};</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.2/jquery-ui.min.js"></script>
<script type="text/javascript">
dojo.require("dijit.layout.BorderContainer");
dojo.require("dijit.layout.ContentPane");
dojo.require("esri.map");
dojo.require("esri.dijit.Popup");
dojo.require("dojo.number");
dojo.require("dijit.form.Button");
dojo.require("dijit.form.Textarea");
dojo.require("dijit.TitlePane");
dojo.require("esri.layers.FeatureLayer");
var map;
var initExtent;
var census3, census4;
function zoomExtent() {
map.setExtent(initExtent);
}
function init() {
initExtent = new esri.geometry.Extent({
"xmin": -8502778.91,
"ymin": 4784652.06,
"xmax": -8227605.61,
"ymax": 4968100.93,
"spatialReference": {
"wkid": 102100
}
});
//setup the popup window
var popup = new esri.dijit.Popup({
marginTop: 35,
fillSymbol: new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 0, 0]), 2), new dojo.Color([255, 255, 0, 0.25]))
}, dojo.create("div"));
map = new esri.Map("map", {
infoWindow: popup,
extent: initExtent
});
dojo.connect(map, "onClick", function (evt) {
//dispaly popup when users clicks on census3 or census4 layers
var query = new esri.tasks.Query();
query.geometry = evt.mapPoint;
var def = [];
def.push(census4.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
def.push(census3.selectFeatures(query, esri.layers.FeatureLayer.SELECTION_NEW));
map.infoWindow.setFeatures(def);
map.infoWindow.show(evt.mapPoint);
});
dojo.connect(map, "onLoad", mapReady);
var basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer");
map.addLayer(basemap);
var census = new esri.layers.ArcGISDynamicMapServiceLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer", {
opacity: .65
});
map.addLayer(census);
//define popup template for census layer 3
var template = new esri.dijit.PopupTemplate({
title: "Name {NAME00}",
mediaInfos: [{
type: "piechart",
value: {
fields: ["AllWhite", "AllBlk", "AllAsian", "HispTot"]
}
}]
});
census3 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/3", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
infoTemplate: template,
outFields: ["*"]
});
//define popup template for census layer 4
var template2 = new esri.dijit.PopupTemplate({
title: "Name {NAME}",
description: "Descriptive info can go here ....",
mediaInfos: [{
type: "piechart",
value: {
fields: ["TotMale", "TotFem"]
}
}]
});
census4 = new esri.layers.FeatureLayer("http://gis.dvrpc.org/ArcGIS/rest/services/census/MapServer/4", {
mode: esri.layers.FeatureLayer.MODE_SELECTION,
infoTemplate: template2,
outFields: ["*"]
});
//add census layers to map in selection only mode. These layers will not be displayed unless selected.
map.addLayers([census3, census4]);
}
function mapReady(map) {
dojo.connect(dijit.byId('map'), 'resize', map, map.resize);
}
dojo.addOnLoad(init);
</script>
</head>
<body class="claro">
<div id="mainWindow" dojotype="dijit.layout.BorderContainer" data-dojo-props="design:'headline'" design="headline" gutters="true" style="width:100%; height:100%;">
<div id="header" class="shadow" dojotype="dijit.layout.ContentPane" region="top">
<h1>U.S. Census Data Profiles<br><font size=2px;>2005-2009 American Community Survey 5-Year Estimates</font> </h1>
</div>
<div id="map" class="roundedCorners" dojotype="dijit.layout.ContentPane" region="center">
</div>
</body>
</html>
... View more
11-22-2011
10:51 AM
|
0
|
0
|
3847
|
|
POST
|
When using the popup with a set of features the title is ignored because the title area is used to display the navigation information (# of features and arrows). The workaround you used, adding the title to the content, is the recommended approach in this situation.
... View more
11-22-2011
09:30 AM
|
0
|
3
|
3847
|
|
POST
|
Eric, If I understand your question correctly then sure you can use the templates with a web map created via json. Here's an example that takes a web map, from the 'Create Web Map from JSON' developer sample and uses that with the Basic Viewer template. I just create the web map then set the web map as the configOptions.webmap value.
<script type="text/javascript">
dojo.require("dijit.dijit");
dojo.require("dijit.dijit-all");
dojo.requireLocalization("esriTemplate","template");
</script>
<script type="text/javascript" src="javascript/layout.js">
</script>
<script type="text/javascript">
var configOptions;
function init() {
var webmap = {};
webmap.item = {
"title":"Soil Survey Map of USA",
"snippet": "This map shows the Soil Survey Geographic (SSURGO) by the United States Department of Agriculture's Natural Resources Conservation Service.",
"extent": [[-139.4916, 10.7191],[-52.392, 59.5199]]
};
webmap.itemData = {
"operationalLayers": [{
"url": "http://server.arcgisonline.com/ArcGIS/rest/services/Specialty/Soil_Survey_Map/MapServer",
"visibility": true,
"opacity": 0.75,
"title": "Soil Survey Map",
"itemId": "204d94c9b1374de9a21574c9efa31164"
}],
"baseMap": {
"baseMapLayers": [{
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/World_Terrain_Base/MapServer"
},{
"isReference": true,
"opacity": 1,
"visibility": true,
"url": "http://services.arcgisonline.com/ArcGIS/rest/services/Reference/World_Reference_Overlay/MapServer"
}],
"title": "World_Terrain_Base"
},
"version": "1.1"
};
configOptions = {
//The ID for the map from ArcGIS.com
//webmap:"dbd1c6d52f4e447f8c01d14a691a70fe",
webmap:webmap,
//The id for the web mapping applciation item that contains configuration info - in most
//cases this will be null.
appid:"",
//set to true to display the title
displaytitle:true,
//Enter a title, if no title is specified, the webmap's title is used.
title:"",
//Enter a description for the application. This description will appear in the left pane
//if no description is entered the webmap description will be used.
description: "",
//Specify a color theme for the app. Valid options are gray,blue,purple,green and orange
theme:'gray',
//Optional tools - set to false to hide the tool
//set to false to hide the zoom slider on the map
displayslider:true,
displaymeasure:true,
displaybasemaps:true,
displayoverviewmap:true,
displayeditor:true,////When editing you need to specify a proxyurl (see below) if the service is on a different domain
//Specify a proxy url if you will be editing
proxyurl: "http://autumn/proxy/proxy.ashx",
displaylegend:true,
displaysearch:true,
displaylayerlist:true,
displaybookmarks:true,
....... more config stuff here
};
initMap();
}
dojo.addOnLoad(init);
</script>
... View more
11-21-2011
09:11 AM
|
0
|
0
|
1563
|
|
POST
|
I ran a quick test using the code from David's blog and the 2.5 compact build and it worked for me. Can you provide more details about the problems you are seeing? Here's a link to my test case: http://jsfiddle.net/mZEpZ/ And here's the code:
<html>
<head>
<title>
Complex Layout
</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/claro/claro.css"
/>
<link rel="stylesheet" type="text/css" href="http://extjs.cachefly.net/ext-3.2.1/resources/css/ext-all.css"
/>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/esri/dijit/css/Popup.css"
/>
<style type="text/css">
html, body { font:normal 12px verdana; margin:0; padding:0; border:0 none;
overflow:hidden; height:100%; } p { margin:5px; } .settings { background-image:url(JS/ExtJS/examples/shared/icons/fam/folder_wrench.png);
} .nav { background-image:url(JS/ExtJS/examples/shared/icons/fam/folder_go.png);
}
</style>
<script src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5compact"
type="text/javascript">
</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/adapter/ext/ext-base.js">
</script>
<script type="text/javascript" src="http://extjs.cachefly.net/ext-3.2.1/ext-all.js">
</script>
<script type="text/javascript">
dojo.require("esri.map");
dojo.require("esri.layers.FeatureLayer");
dojo.require("esri.dijit.Popup");
var map;
function init() {
var viewport = new Ext.Viewport({
layout: "fit",
title: "Medford GIS",
items: [{
layout: "border",
items: [{
region: "center",
title: "center",
html: "<div id='map' style='height:100%; width:100%;z-index=: 1000;'></div>"
}, {
region: "north",
title: "north",
height: 100,
collapsible: true,
margins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
cmargins: {
top: 0,
right: 0,
bottom: 0,
left: 0
},
html: "Header section"
}, {
region: "south",
title: "south",
height: 80,
collapsible: true,
contentEl: "south" // this gets the content from the div named "south"
}, {
region: "west",
title: "west",
width: 150,
split: true,
collapsible: true,
html: "west region"
}, {
region: "east",
title: "east",
width: 150,
split: true,
collapsible: true,
html: "east region"
}]
}],
json: {
size: {
width: 800,
height: 600
}
}
});
var startExtent = new esri.geometry.Extent(-83.41, 31.98, -78.47, 35.28, new esri.SpatialReference({
wkid: 4326
}));
var popup = new esri.dijit.Popup(null, dojo.create("div"));
map = new esri.Map("map", {
extent: esri.geometry.geographicToWebMercator(startExtent),
infoWindow: popup
});
//Add the topographic layer to the map. View the ArcGIS Online site for services http://arcgisonline/home/search.html?t=content&f=typekeywords:service
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_Topo_Map/MapServer");
map.addLayer(basemap);
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setContent("<b>${NAME}</b><hr></br><b>2000 Population: </b>${POP2000:NumberFormat}<br/>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br/>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br/>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}");
var southCarolinaCounties = new esri.layers.FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer/3", {
mode: esri.layers.FeatureLayer.MODE_SNAPSHOT,
infoTemplate: infoTemplate,
outFields: ["NAME", "POP2000", "POP2007", "POP00_SQMI", "POP07_SQMI"]
});
southCarolinaCounties.setDefinitionExpression("STATE_NAME = 'South Carolina'");
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID, new esri.symbol.SimpleLineSymbol(esri.symbol.SimpleLineSymbol.STYLE_SOLID, new dojo.Color([255, 255, 255, 0.35]), 1), new dojo.Color([125, 125, 125, 0.35]));
southCarolinaCounties.setRenderer(new esri.renderer.SimpleRenderer(symbol));
map.addLayer(southCarolinaCounties);
//NOTE: Requires dojo.number for the formatting
var infoTemplate = new esri.InfoTemplate();
infoTemplate.setContent("<b>${NAME}</b><hr></br><b>2000 Population: </b>${POP2000:NumberFormat}<br/>" + "<b>2000 Population per Sq. Mi.: </b>${POP00_SQMI:NumberFormat}<br/>" + "<b>2007 Population: </b>${POP2007:NumberFormat}<br/>" + "<b>2007 Population per Sq. Mi.: </b>${POP07_SQMI:NumberFormat}");
map.infoWindow.resize(245, 125);
}
dojo.addOnLoad(init);
</script>
</head>
<body>
<!-- use class="x-hide-display" to prevent a brief flicker of the content
-->
<div id="west" class="x-hide-display">
</div>
<div id="center" class="x-hide-display" style="z-index: 100;">
</div>
<div id="props-panel" class="x-hide-display">
</div>
<div id="south" class="x-hide-display">
This content comes from the div
</div>
<div id="north" class="x-hide-display">
<!--- note ... this starts 100 px from the top -- see the cmargins for
that -->
</div>
</body>
</html>
Hi, is anyone using ExtJS 4.x layouts with newer versions of JSAPI? ExtJS has a border layout similar to Dojo's where you use the "center" panel for the map area. I am just getting started with this and looking for a simple exampel that works. There seems to be issues about how ExtJS manipulates the DOM for that "center" panel DIV and what the underlying Dojo is doing with the map object. David Rezn (http://blog.davidrenz.com/?p=281) had a simple example based upon JSAPI 1.3 and an old version of ExtJS. However, with the newer versions on JSAPI and ExtJS, his approach no loner seemd to work. I was wondering if anybody else was had a simple working example. I am starting by creating a veiwport with a border layoput. The "North", "South", "East" and "West" panels are blank for simplicity. I think once I am able to get the basic problem of getting the map object properly displayed in the "center" panel, I'll be OK. Any ideas? Thanks, Don
... View more
11-19-2011
10:39 AM
|
0
|
0
|
982
|
|
POST
|
Jan, When you create the template for the popup you can define a function that will be used to create and format the content. So in this snippet instead of setting the content when you create the info template you specify the name of a function in setContent. In this example the function is called getWindowContent.
var template = new esri.InfoTemplate();
template.setTitle("Advisories");
template.setContent(getWindowContent);
// var template = new esri.InfoTemplate("", "Parcel ID: ${PARCELID}");
feature.setInfoTemplate(template);
}
In the getWindowContent function you are provided the graphic that was just clicked. You can then access the graphic's attributes and build the hyperlink.
function getWindowContent(graphic){
var content = "<a href='" + graphic.attributes.WEB + "'>Click here for more info</a>";
return content;
} Here's a working sample: http://jsfiddle.net/bTZwR/2/
... View more
11-19-2011
10:02 AM
|
0
|
0
|
4417
|
|
POST
|
If the field contains a url you should just have to specify the field name when you define the popup template. For example in the code below a field named WEB contains a hyperlink.
//define a popup template
var popupTemplate = new esri.dijit.PopupTemplate({
title: "{EVENT}",
fieldInfos: [
{fieldName: "EFFECTIVE", visible: true, label:"Effective"},
{fieldName: "WEB", visible:true, label:"Link"}
],
showAttachments:false
});
//create a feature layer based on the feature collection
var featureLayer = new esri.layers.FeatureLayer("http://rmgsc.cr.usgs.gov/ArcGIS/rest/services/nhss_weat/MapServer/0", {
mode: esri.layers.FeatureLayer.MODE_ONDEMAND,
infoTemplate: popupTemplate,
outFields: ['*']
});
When you view the popup you'll see a clickable link that says 'More Info' and takes you to the url defined in the WEB field. Here's a link so you can see this in action: http://jsfiddle.net/khutchins/bTZwR/
... View more
11-16-2011
02:22 PM
|
0
|
2
|
4417
|
|
POST
|
Console.log writes information out to the console window. In your situation you may want to assign the id to a variable that you can then use later in your code.
... View more
11-09-2011
07:32 AM
|
0
|
0
|
761
|
|
POST
|
Do they each have an id? If so you could use dijit.byId to get the check box. Here's an example where we get value for a checkbox:
var bx1 = dijit.byId('checkBoxquakes');
console.log(bx1.id + " " + bx1.checked);
As you pointed out you could also use dojo.query. In this snippet we get all the checkboxes in the app then loop through and write out the id and whether or not the box is checked to the console: var boxes = dojo.query('input[type=checkbox]');
dojo.forEach(boxes,function(box){
console.log(box.id + " " + box.checked);
}); Here's some more info on dojo.query: http://dojotoolkit.org/reference-guide/dojo/query.html var boxes = dojo.query('input[type=checkbox]'); dojo.forEach(boxes,function(box){ console.log(box.id + " " + box.checked); });
... View more
11-08-2011
11:40 AM
|
0
|
0
|
761
|
|
POST
|
You have to move the script tag that sets up dojoConfig before the script tag that adds the ArcGIS API for JavaScript.
<head>
<title>State Info</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript">var dojoConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5">
</script>
If djConfig is defined after the javascript api (and dojo) are loaded then the configuration properties are ignored. In this case that means the call to parse the dojo widgets when the page loads is ignored and the combo boxes in your page are not dojo widgets so your code that uses dijit.byId to get the combo box fails.
... View more
11-08-2011
11:03 AM
|
0
|
0
|
1777
|
|
POST
|
Are you listening to an event that lets you know when the checkbox value changes? The Legend Widget sample in the ArcGIS API for JavaScript resource center shows how to toggle layer visibility via a checkbox: http://help.arcgis.com/en/webapi/javascript/arcgis/demos/widget/widget_legendvisible.html
... View more
11-08-2011
06:44 AM
|
0
|
0
|
1342
|
|
POST
|
Mike, The init function wasn't getting executed because the code is missing the following: dojo.addOnLoad(init); Here's a modified version that should work:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>State Info</title>
<link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.5/js/dojo/dijit/themes/tundra/tundra.css">
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("esri.tasks.query");
var query, queryTask;
function init() {
//create map and add layer
map = new esri.Map("mapDiv");
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer");
map.addLayer(layer);
//initialize query task
queryTask = new esri.tasks.QueryTask("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/0");
//initialize query
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["CITY_NAME", "STATE_NAME", "POP1990"];
//initialize InfoTemplate
infoTemplate = new esri.InfoTemplate("${CITY_NAME}", "Name : ${CITY_NAME}<br/> State : ${STATE_NAME}<br />Population : ${POP1990}");
//create symbol for selected features
symbol = new esri.symbol.SimpleMarkerSymbol();
symbol.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);
symbol.setSize(10);
symbol.setColor(new dojo.Color([255,255,0,0.5]));
}
function executeQueryTask(population) {
//set query based on what user typed in for population;
query.where = "POP1990 > " + population;
//execute query
queryTask.execute(query,showResults);
}
function showResults(featureSet) {
//remove all graphics on the maps graphics layer
map.graphics.clear();
//Performance enhancer - assign featureSet array to a single variable.
var resultFeatures = featureSet.features;
//Loop through each feature returned
for (var i=0, il=resultFeatures.length; i<il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = resultFeatures;
graphic.setSymbol(symbol);
//Set the infoTemplate.
graphic.setInfoTemplate(infoTemplate);
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
}
dojo.addOnLoad(init);
</script>
<body>
<br/>
US city population greater than : <input type="text" id="population" value="500000" />
<input type="button" value="Get Details" onclick="executeQueryTask(dojo.byId('population').value);" />
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
Click on a city once it's highlighted to get an InfoWindow.
</body>
</html>
... View more
11-08-2011
06:39 AM
|
0
|
0
|
771
|
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. 3 weeks ago
- Posted Re: Instant App suddenly unavailable to view or configure on ArcGIS Instant Apps Questions. 3 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Sidebar Template Information Tools Not Responsive on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Zone Lookup Push Pins missing from map outside of zones on ArcGIS Instant Apps Questions. 4 weeks ago
- Posted Re: Accessibility problem: Screen reader not reading part of the app on ArcGIS Instant Apps Questions. 04-16-2026 08:42 AM
- 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 |
3 hours ago
|