POST
|
I still don't understand how to zoom to the extent of a feature(graphic). The help/samples are not quite basic enough. I can see my graphic but I cannot zoom to it. I also want to use expand. function showResults(featureSet){
map.graphics.clear();
var symbol = new esri.symbol.SimpleFillSymbol(esri.symbol.SimpleFillSymbol.STYLE_SOLID).setColor(new dojo.Color([255, 0, 0, 0.5]));
//Loop through features in the featureSet and add them to the map.
for (var i=0, il=featureSet.features.length; i<il; i++) {
//Get the current feature from the featureSet.
//Feature is a graphic
var graphic = featureSet.features;
graphic.setSymbol(symbol);
graphic.geometry.getExtent().expand(0.5); //my attempt
//Add graphic to the map graphics layer.
map.graphics.add(graphic);
}
}
... View more
12-13-2011
06:26 AM
|
0
|
2
|
4563
|
POST
|
Instead of two queries, why not add an onclick event to the item in the List that zooms to the geometry? (if you showed your populatelist /showresults functions, it would help) <!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">var dojoConfig = { parseOnLoad:true };</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.5"></script>
<script type="text/javascript">
dojo.require("esri.tasks.query");
dojo.require("dijit.form.Select");
dojo.require("dijit.form.FilteringSelect");
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dojo.parser");
var query, queryTask, map, hapcLayer;
function init() {
//create map and add layer
map = new esri.Map("mapDiv");
var layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer");
map.addLayer(layer);
hapcLayer = new esri.layers.ArcGISDynamicMapServiceLayer("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/NMFS/HAPC/MapServer", {
"id": "HAPC"
});
map.addLayer(hapcLayer);
hapcLayer.hide();
}
//initialize query task
queryTask = new esri.tasks.QueryTask("http://egisws02.nos.noaa.gov/ArcGIS/rest/services/NMFS/HAPC/MapServer/0");
//initialize HAPC query
query = new esri.tasks.Query();
query.returnGeometry = true;
query.outFields = ["HAPC_Sitename","FisheryManagementCouncil"];
function executeQueryTask(fmc) {
//alert(fmc);
//set query based on what user selected in from list;
query.where = "FisheryManagementCouncil = '"+ fmc +"'";
//alert(query.where);
//execute query
queryTask.execute(query,populateList);
}
function populateList(results) {
//Populate the dropdown list box with unique values
var zone;
var values = []; //create array
var testValsEncountered={}; // create JSON object (dictionary) to hold multiple name:value pairs
//Add option to display all zoning types to the dropdown list
//values.push({name:"ALL"}); //All is not a value in the layer which is why it is being hard coded here.
var features = results.features; //features is a property of query task and has the type of 'graphic'. It is an array.
dojo.forEach (features, function(feature) { //optimized way of doing a for loop, specific to dojo, patterned after HTML5. Let's you apply a function to each element of an array. Feauture is each item in the array.
zone = feature.attributes.HAPC_Sitename; //feature in this context is a graphic and attribute is a property
if (!testValsEncountered[zone]) { //tests to see if the testval object containing the value of zone doesn't exist
testValsEncountered[zone] = true; //creates a "key" zone with a value of true
values.push({name:zone});//push the JSON pair into the values array
}
});
//sort function by Douglas Crockford, page 81, Javascript: The Good Parts
var by = function(name){
return function (o,p) {
var a,b;
if (typeof o === 'object' && typeof p === 'object' && o && p) {
a = o[name];
b = p[name];
if (a===b){
return o;
}
if (typeof a === typeof b){
return a < b ? -1 : 1;
}
return typeof a < typeof b ? -1 : 1;
}else {
throw {
name: 'Error',
message: 'Expected an object when sorting by ' + name
};
}
};
};
values.sort(by('name')); //sorts the array of unique values
values.unshift({name:"ALL"}); //ensures that an ALL option is not part of the sort and is listed first
//Create a ItemFileReadStore and use it for the ComboBox's data source
var dataItems = { //create JSON object to hold multiple name:value pairs
identifier: 'name', //optional
label: 'name', //optional
items: values
};
var store = new dojo.data.ItemFileReadStore({data:dataItems});
dijit.byId("mySelect").store = store;
}
function applyLayerDef(selItem){
map.graphics.clear();
//Filter the layer to display only the selected HAPC feature
if (selItem.value !== 'ALL') {
var layerDefs = [];
layerDefs[0] = "HAPC_Sitename = " + "'" + selItem.value + "'";
layerDefs.visibleLayers = [0];
map.getLayer("HAPC").setLayerDefinitions(layerDefs);
hapcLayer.show();
}
else {
map.getLayer("HAPC").setDefaultLayerDefinitions();
hapcLayer.show();
}
}
dojo.addOnLoad(init);
</script>
<body class="tundra">
<br/>
Select A Region :
<select name="fmc2" id="fmc2" onChange="executeQueryTask(dojo.byId('fmc2').value);">
<option value="" selected="selected">Select Region</option>
<option value="Mid-Atlantic Fishery Management Council">MAFMC</option>
<option value="Gulf of Mexico Fishery Management Council">GFMC</option>
</select>
<select id="mySelect"
dojotype="dijit.form.FilteringSelect"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select HAPC"
onChange="applyLayerDef(this)">
</select>
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html> Your comment reminded me that I had something similar working the other day in another file. I've included the full file here. Except I used onChange instead of onClick. My problem is really about how to zoom into a feature or graphic that the user chooses from a list. As a beginner I've been struggling to figure out how to do this. I think I have to use a graphic but I'm not sure because this applyLayerDef function seems to have no problem displaying the individual feature. I also want the map to zoom into a predefined area with the first drop down box but that list is not getting populated from a map service. I've thought about using a JSON file.
... View more
11-23-2011
10:32 AM
|
0
|
0
|
332
|
POST
|
I want to zoom to a feature (graphic) when a user selects it from a dojo filtering select list. This list is populated using a queryTask. Is it okay to execute a second queryTask that takes the same results and does something else with it? function HAPCexecuteQueryTask(fmc) {
HAPCquery.where = "FisheryManagementCouncil = '"+ fmc +"'";
HAPCqueryTask.execute(HAPCquery,populateList);
HAPCqueryTask.execute(HAPCquery,showResults);
} I have been looking at this example and it seems to be pretty close to what I want to do (see last entry for solution. http://forums.arcgis.com/threads/36317-Zoom-to-Graphic?highlight=graphics
... View more
11-23-2011
08:40 AM
|
0
|
2
|
1160
|
POST
|
I've seen some samples where only the basics of defining and adding a map are there. I've seen some samples where there are functions and/or functions that respond to events are in there. I've seen some samples where these functions are outside of the init function. What is the general idea or best practices of what should go inside your init function be? Is there another document or web page that explains this?
... View more
11-16-2011
07:38 AM
|
0
|
1
|
1143
|
POST
|
Thank you very much for the solution and the explanation. Very helpful.
... View more
11-08-2011
11:27 AM
|
0
|
0
|
942
|
POST
|
Okay...right. I'm working with too many samples. It should have been this layer: http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StatesCitiesRivers_USA/MapServer/2 but the combo box still does not populate.
... View more
11-08-2011
10:02 AM
|
0
|
0
|
942
|
POST
|
I'm trying to populate a combo box based on a select list. I'm using a combination of examples from the samples page. My query is valid as I have tested it against the layer in the services directory and using an alert I can see that it is passing the correct syntax. I get no FireFox errors but the combo box is not getting populated. <!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">var dojoConfig = { parseOnLoad:true };</script>
<script type="text/javascript">
dojo.require("esri.tasks.query");
dojo.require("dojo.parser");
dojo.require("dijit.form.ComboBox");
dojo.require("dojo.data.ItemFileReadStore");
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 = false;
query.outFields = ["SUB_REGION", "STATE_NAME"];
}
function executeQueryTask(subr) {
//alert(subr);
//set query based on what user typed in for population;
query.where = "SUB_REGION = '"+ subr +"'";
//alert(query.where);
//execute query
queryTask.execute(query,populateList);
}
function populateList(results) {
//Populate the dropdown list box with unique values
var zone;
var values = [];
var testVals={};
values.push({name:"ALL"});
var features = results.features;
dojo.forEach (features, function(feature) {
zone = feature.attributes.STATE_NAME;
if (!testVals[zone]) {
testVals[zone] = true;
values.push({name:zone});
}
});
//Create a ItemFileReadStore and use it for the ComboBox's data source
var dataItems = {
identifier: 'name',
label: 'name',
items: values
};
var store = new dojo.data.ItemFileReadStore({data:dataItems});
dijit.byId("mySelect").store = store;
}
dojo.addOnLoad(init);
</script>
<body class="tundra">
<br/>
US city population greater than :
<select name="subregion" id="subregion" onChange="executeQueryTask(dojo.byId('subregion').value);">
<option value="Pacific">Pacific Region</option>
<option value="Mtn">Mountain Region</option>
<option value="S Atl">South Atlantic Region</option>
</select>
<select id="mySelect"
dojotype="dijit.form.ComboBox"
style="width:300px;font-size:18px;"
autoComplete="true"
forceValidOption="false"
value="Select Zoning Type">
</select>
<div id="mapDiv" style="width:600px; height:600px; border:1px solid #000;"></div>
</body>
</html>
... View more
11-08-2011
09:24 AM
|
0
|
4
|
3277
|
POST
|
Thanks. I knew it had to be something simple. The fact that no map appeared at first should have been my first clue.
... View more
11-08-2011
06:42 AM
|
0
|
0
|
293
|
POST
|
I built this code from this example page here on how to use a querytask. I changed the fieldname being used in the where clause because the field in the example doesn't exist. I tested my query out using the query window in the services directory and it worked fine. When I run this code I get "query is undefined". I don't know why. <!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);
}
}
</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:31 AM
|
0
|
2
|
2298
|
POST
|
almost All your comments are correct, except the last two lines Since testVals is JSON, and not an array testVals[zone] = true actually creates a key "zone" with value true values.push({name:zone}); (you left out the var values=[]; ) pushes the json pair into an array so you now have 2 variables, one with json values unsorted, and an array with the json pairs added in order. How would I have known that this was JSON other than more experience and someone pointing it out to me? Ok, so, testVals ends up looking like this: {name:residential, name:industrial, etc} or {residential:true, industrial:true, etc} then the array: values = [{"name:residential"},{name:industrial}] and how does it sort (add them in order)?
... View more
11-04-2011
11:30 AM
|
0
|
0
|
260
|
POST
|
I have questions about the code below. It is part of this example: I added comments/questions in for myself. var testVals={}; // create object literal (shortcut to creating a new object). This is to hold name:value pairs because an array can only hold single values?
var features = results.features; //features is a property of query task and has the type of 'graphic'. It is an array.
dojo.forEach (features, function(feature) { //optimized way of doing a for loop, specific to dojo, patterned after HTML5. Let's you apply a function to each element of an array. Feature is each item in the array.
zone = feature.attributes.ZONING_TYPE; //feature in this context is a graphic and attributes is a property
if (!testVals[zone]) { //tests to see if the name:value pair exists
testVals[zone] = true; //if it it doesn't exist then set this object to true?
values.push({name:zone}); //push the name:pair of name:<value of zoning type> into the object literal
} So, if zone has a value of 'residential' then when it gets tested in the if statement, is it testing to see if that value is contained in the testval object? Is it saying, "if zone value does not exist then set that value to true? I'm not exactly sure what exactly is getting set to true and why? Then, it pushes that value into the testval object using name:zone as the pair.
... View more
11-04-2011
10:36 AM
|
0
|
3
|
615
|
POST
|
Thanks for posting the complete code from the other post. I caught that case sensitivity after I published my original post. When I fixed my function name problem I still got an error that myZoom was not defined. I see from your example that while I placed my function in the head section I did not tie it together with dojo.connect. I found that it in the dojo.connect that you can use either dojo.byId('button2') or just button2 in the dojo.connect statement. Is this a matter of preference or is there a reason why you were more specific? The reason why I coded the way I did was because I had looked at this example and I saw that there was an onChange event in the combobox. It calls a function which changes the map based on a layer definition. So I thought it would be okay to do something similar with an onClick event. Why does this example not use a dojo.connect statement to tie it together as you showed in my original example?
... View more
11-03-2011
10:23 AM
|
0
|
0
|
346
|
POST
|
I want the map extent to change by clicking on some text. I'm using the example Add Dynamic Map and I have added the following code function myzoom() {
var axtent = new esri.geometry.Extent(55.6153456, 5.7191691, 105.6673614, 37.0016790, map.SpatialReference);
map.setExtent(axtent);
} I have tried placing it both outside of the init function and inside the init function. In both cases I get an error when I call it <p id="test" onClick="myZoom();">click for zoom</p> If I add an alert function outside of the init function
function nTest(){
alert("test2");
} and call it from here <p id="test2" onClick="nTest();">click for alert</p> it works. Why? - Mike
... View more
11-03-2011
08:09 AM
|
0
|
4
|
611
|
Title | Kudos | Posted |
---|---|---|
9 | 08-12-2024 11:06 AM | |
1 | 02-01-2019 08:27 AM | |
2 | 04-23-2024 08:44 AM | |
1 | 11-07-2023 11:31 AM | |
1 | 11-21-2023 10:17 AM |
Online Status |
Offline
|
Date Last Visited |
yesterday
|