arcgis-javascript-apiarcgis-server
I have created a layer using "clip" tool in ArcMap.
I have another layer in TOC too. whichis the same area in "clip" Layer with more polygons.
In my web map application (javaScript API) Is there any way to set these layers in a way that when I zoom in I get more details like image2 and by zooming out I get polygons in image1.
Thanks so much Derek!! Here is the relevant code, it is quite a mess as I am still learning this whole Javascript thing. Please forgive me :)I did not attach the whole thing because it is over 2000 lines, but hopefully I got all the right pieces. The main issue I am trying to solve now is zooming to a single feature from a row click in a datagrid that is generated after features are manually selected. Hope this makes sense.I really appreciate your help with this!
<script type="text/javascript">
var djConfig = {
parseOnLoad: true
};
</script>
<script type="text/javascript" src="http://serverapi.arcgisonline.com/jsapi/arcgis/?v=2.7"></script>
<script type="text/javascript">
var idTask, idParams;
var grid, store, toolBar;
var exportMapGP, surveyLink, searchType, findTask, identifyTask, identifyParams, findParams, map, visible = [], HideShowTimer, featureLayer, navToolbar, measurement, features;
searchType = "";
function init() {
dojo.connect(map, 'onLoad', function(theMap) {
//initialize the toolbar
toolBar = new esri.toolbars.Draw(map);
dojo.connect(toolBar, "onDrawEnd",onDrawEnd);
toolBar.deactivate();
//resize the map when the browser resizes
dojo.connect(dijit.byId('map'), 'resize', map,map.resize);
navToolbar.deactivate();
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
function onDrawEnd(extent){
navToolbar.deactivate();
//id = "control";
//select features within the draw extent
var query = new esri.tasks.Query();
query.geometry = extent;
featureLayer.selectFeatures(query,esri.layers.FeatureLayer.SELECTION_NEW,function(features,selectionMethod){
var items = dojo.map(features,function(feature){
return feature.attributes;
});
//add selected features to the grid
if (document.getElementById("contSel").checked){
showPointNameGrid();
} else if(document.getElementById("survSel").checked){
showSurveysNameGrid();
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
if(document.getElementById("contSel").checked){
//showPointNameGrid();
searchType="selControl2";
var data = {identifier:"POINT_NAME", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid4');
grid.setStore(store);
featureLayer.selectFeatures.clear;
} else if (document.getElementById("survSel").checked){
//showSurveysNameGrid();
searchType="selSurveys2";
var data = {identifier:"doc_id", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid5');
grid.setStore(store);
featureLayer.selectFeatures.clear;
}
});
}
function toggleSelect (el)
{
navToolbar.deactivate();
alert(el.checked);
if (el.checked)
{
switch (el.id)
{
case 'survSel':
searchType="selSurveys2";
document.getElementById('contSel').checked = false;
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/MapServer/2";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleFillSymbol().setColor(new dojo.Color([200,255,0,0.5])));
map.addLayer(featureLayer);
featureLayer.selectFeatures.clear;
break;
case 'contSel':
searchType="selControl2";
document.getElementById('survSel').checked = false;
featureLayerUrl = "http://slcarcgisdev1/SLCOGIS/rest/services/public/SurveyorFS/FeatureServer/0";
featureLayer = new esri.layers.FeatureLayer(featureLayerUrl,{
mode:esri.layers.FeatureLayer.MODE_ONDEMAND,
outFields:["*"]
});
featureLayer.setSelectionSymbol(new esri.symbol.SimpleMarkerSymbol().setSize(11).setColor(new dojo.Color([160,214,238])));
map.addLayer(featureLayer);
featureLayer.selectFeatures.clear;
break;
}
} else
{
switch (el.id)
{
case 'survSel':
document.getElementById('contSel').checked = true;
break;
case 'contSel':
document.getElementById('survSel').checked = true;
break;
}
}
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
//add selected features to the grid
if (document.getElementById("contSel").checked){
showPointNameGrid();
} else if(document.getElementById("survSel").checked){
showSurveysNameGrid();
}
var items = dojo.map(features,function(feature){
return feature.attributes;
});
if(document.getElementById("contSel").checked){
//showPointNameGrid();
searchType="selControl2";
var data = {identifier:"POINT_NAME", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid4');
grid.setStore(store);
featureLayer.selectFeatures.clear;
} else if (document.getElementById("survSel").checked){
//showSurveysNameGrid();
searchType="selSurveys2";
var data = {identifier:"doc_id", items:items};
var store = new dojo.data.ItemFileReadStore({data:data});
var grid = dijit.byId('grid5');
grid.setStore(store);
featureLayer.selectFeatures.clear;
}
});
}
//Zoom to the parcel when the user clicks a row
function onRowClickHandler(evt){
if (searchType == "selControl2") {
var clickedTaxLotId = grid4.getItem(evt.rowIndex).POINT_NAME;
var selectedTaxLot;
alert(featureLayer.name);
var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3]));
dojo.forEach(map.graphics.graphics,function(graphic){
if((feature.attributes) && feature.attributes.POINT_NAME === clickedTaxLotId){
selectedTaxLot = graphic;
graphic.setSymbol(highlightSymbol);
//added this part to build infotemplate
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
return;
}
});
if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
map.centerAndZoom(taxLotExtent, 11)
var sp = map.toScreen(selectedTaxLot.geometry);
} else {
var taxLotExtent = selectedTaxLot.geometry.getExtent();
var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
var mappoint = map.toMap(screenpoint);
map.setExtent(taxLotExtent,true);
map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
}
} else if (searchType == "selSurveys2") {
var clickedTaxLotId = grid5.getItem(evt.rowIndex).DOCUMENT_N;
var selectedTaxLot;
alert(featureLayer.name);
var highlightSymbol = new esri.symbol.SimpleMarkerSymbol().setColor(new dojo.Color([25,50,225,0.3]));
dojo.forEach(map.graphics.graphics,function(graphic){
if((graphic.attributes) && graphic.attributes.DOCUMENT_N === clickedTaxLotId){
selectedTaxLot = graphic;
graphic.setSymbol(highlightSymbol);
//added this part to build infotemplate
map.infoWindow.setTitle(graphic.getTitle());
map.infoWindow.setContent(graphic.getContent());
return;
}
});
if ( selectedTaxLot.geometry.declaredClass == 'esri.geometry.Point' ) {
map.centerAndZoom(taxLotExtent, 11)
var sp = map.toScreen(selectedTaxLot.geometry);
} else {
var taxLotExtent = selectedTaxLot.geometry.getExtent();
var screenpoint = map.toScreen(selectedTaxLot.geometry.getExtent().getCenter());
var mappoint = map.toMap(screenpoint);
map.setExtent(taxLotExtent,true);
map.infoWindow.show(taxLotExtent.getCenter(), map.getInfoWindowAnchor(screenpoint));
}
}
}
</script>
Have you created an application, in IIS manager, using the folder that the proxy is located? If the folder is say agsproxy then you would have
http://localhost/agsproxy/proxy.ashx?
In the javascript, you would have
esri.config.defaults.io.proxyUrl = "/agsproxy/proxy.ashx";
You may want to use CORS though now.. removing the need for proxy (better performance)
//add CORS servers
esri.config.defaults.io.corsEnabledServers.push("YOURTESTSERVER");
esri.config.defaults.io.corsEnabledServers.push("sampleserver1a.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("sampleserver6.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("tasks.arcgisonline.com");
esri.config.defaults.io.corsEnabledServers.push("server.arcgisonline.com");
Best Answer
To change the displayed layer at different scales you should set the scale range. This can either be done on the source data before publishing to ArcGIS server with the layer properties > general > scale range option or can be done in code by setting the Max and Min scales of the layer using SetScaleRange