|
POST
|
I'm using two tiled services to display in my map. The ocean basemap and the world light gray canvas map. If I zoom past level 9 on the US Virgin Islands, the ocean basemap shows me "map data not yet available". I understand that part. What I don't understand is why the other basemap I've set up to display on the map does not appear until level 14. This happens regardless if I use the displayLevels parameter. Yet, if I look at that service through the services directory in the Javascript viewer I can see all of the levels including the ones between 9 and 14. <!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> Overview Map </title> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/2.6/js/dojo/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; 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.6"> </script> <script type="text/javascript"> dojo.require("dijit.layout.BorderContainer"); dojo.require("dijit.layout.ContentPane"); dojo.require("esri.map"); dojo.require("esri.dijit.OverviewMap"); var map; function init() { var initExtent = new esri.geometry.Extent({ "xmin":-7413378.648884336,"ymin":1898800.4677371255,"xmax":-7031499.25557178,"ymax":2094785.0082602233,"spatialReference":{"wkid":102100} }); map = new esri.Map("map", { extent: initExtent }); //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_guidelines.htm var resizeTimer; dojo.connect(map, 'onLoad', function(theMap) { //resize the map when the browser resizes dojo.connect(dijit.byId('map'), 'resize', map,map.resize); //add the overview map var overviewMapDijit = new esri.dijit.OverviewMap({ map: map }); overviewMapDijit.startup(); }); basemap = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Canvas/World_Light_Gray_Base/MapServer",{displayLevels:[10,11,12,13,14,15,16]}); map.addLayer(basemap); oceanBM = new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/Ocean_Basemap/MapServer"); map.addLayer(oceanBM); } dojo.addOnLoad(init); </script> </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="padding:0"> </div> </div> </body> </html>
... View more
12-16-2011
11:10 AM
|
0
|
3
|
884
|
|
POST
|
Thanks. The code you suggested provides the display I was looking for and helped me understand what I needed to do. After fiddling with it I realized I still had to add map.setExtent(taxLotExtent, true) with the boolean parameter as you suggested in an earlier post to make sure it fit within the window.
... View more
12-15-2011
08:54 AM
|
0
|
0
|
1772
|
|
POST
|
Thanks for both of those answers. Using expand with setExtent and the true option helps. But I have features that range in size from as big as the Gulf of Mexico to some dinky island in the middle of it. For the small area it would be helpful to see it within the context of nearby land or some other reference information from the Ocean basemap. That is why I was asking if there was a way to evaluate the size or shape of the area and then set a zoom level.
... View more
12-15-2011
06:56 AM
|
0
|
0
|
1772
|
|
POST
|
Okay, I should not have used esri.geometry.webMercatorToGeographic(geometry) in the example because that parcel layer is not in webMercator. I was thinking of my own layer which is in webMercator. That being said I would still like some thoughts on my original questions.
... View more
12-14-2011
11:28 AM
|
0
|
0
|
1772
|
|
POST
|
I want to display a feature on my map to provide better context within the surrounding area than usinng setExtent or setExtent().expand(). In this example, Display Find Task in Grid, the map displays each parcel at an extent that I think is too close for the viewer to see it within the context of the surrounding area. This is especially true for really small parcels. For larger parcels you get a slightly better view. Even so, in many cases, part of the boundary is blocked by the window. Would it be possible to evaluate the size/shape/area of each feature and then set a zoom level or extent that would provide a better view of the surrounding area? In other words, not be too close or too far away? I saw esri.geometry.geodesicAreas(polygons, areaUnit) and also saw I would probably need to use esri.geometry.webMercatorToGeographic(geometry) first. I tried adding a couple of lines in this function from the sample. I did not get any errors but I also did not see any numbers return in my console. Am I using this correctly? Overall, am I on the right track? function onRowClickHandler(evt){
var clickedTaxLotId = grid.getItem(evt.rowIndex).PARCELID;
var selectedTaxLot;
dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.PARCELID === clickedTaxLotId){
selectedTaxLot = graphic;
return;
}
});
var x = esri.geometry.webMercatorToGeographic(selectedTaxLot.graphic);
var areas = esri.geometry.geodesicAreas(x, esri.Units.ACRES);
console.log(areas);
var taxLotExtent = selectedTaxLot.geometry.getExtent();
map.setExtent(taxLotExtent);
}
... View more
12-14-2011
11:16 AM
|
0
|
6
|
2529
|
|
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
|
4835
|
|
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
|
616
|
|
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
|
1444
|
|
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
|
1367
|
|
POST
|
Thank you very much for the solution and the explanation. Very helpful.
... View more
11-08-2011
11:27 AM
|
0
|
0
|
1391
|
|
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
|
1391
|
|
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
|
3726
|
|
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
|
549
|
|
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
|
2554
|
| Title | Kudos | Posted |
|---|---|---|
| 1 | 03-05-2025 11:56 AM | |
| 1 | 11-27-2024 11:10 AM | |
| 22 | 08-12-2024 11:06 AM | |
| 1 | 02-01-2019 08:27 AM | |
| 2 | 04-23-2024 08:44 AM |
| Online Status |
Offline
|
| Date Last Visited |
10-06-2025
12:09 PM
|