Hi,
i am trying to implement drop down list. the first list shows state list, second list shows district and third one shows villages.
when the user selects a state from first list box then the map should zoom to that particular state polygon. and same for other two list boxs.
i have tried but the zoom to selected does not working for me.
can anyone guide me in this.
Regards,
satya
Hi Satya,
It would be helpful to know in which program you are trying to do that (javascript, flex....). You might also get more answers if you post it in that specific space and add tags.
Tim
If you are using the JavaScript API you can zoom to a selected Polygon..
After make a query and got the results of the selected state geometry you can use this code for zooming ..
map.setExtent(StateResults.features[selected].geometry.getExtent(),true); // Change Extent to Polygon Extent and be fit ..
JAVA script api
Hi Satyanarayana,
Here is an example that you can work with. You can select a state, the map will zoom to this feature, and then the second combo box will update with the state's counties. Once a county is selected, the map will zoom to this feature.
<!DOCTYPE html> <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>Zoom to Combo Box Selection</title> <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } </style> <script src="http://js.arcgis.com/3.13/"></script> <script> var map; require([ "esri/map", "esri/layers/FeatureLayer", "esri/graphicsUtils", "esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/webMercatorUtils", "esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query", "dojo/dom", "dijit/registry", "dojo/_base/array", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox", "dojo/domReady!" ], function( Map, FeatureLayer, graphicsUtils, SimpleLineSymbol, Graphic, webMercatorUtils, SimpleFillSymbol, Color, on, Query, dom, registry, arrayUtils, parser) { parser.parse(); map = new esri.Map("map", { basemap : "topo", center : [-69, 45.5], zoom : 7 }); var stateLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/2",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var countyLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer/3",{ mode: FeatureLayer.MODE_ONDEMAND, outFields: ["*"] }); var polygonHighlightSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SOLID, new Color([255, 0, 0]), 1), new Color([125, 125, 125, 0.35]) ); //Query State var query = new Query(); query.where = "1=1"; stateLayer.queryFeatures(query, function(featureSet) { var stateList = []; dojo.map(featureSet.features, function(feature) { stateList.push(feature.attributes.state_name); }); arrayUtils.forEach(stateList, function(feature){ registry.byId("stateName").get('store').add({ name: feature}); }) }); registry.byId("countyName").set('disabled', true); registry.byId("stateName").on("change", function(){ map.graphics.clear(); registry.byId("countyName").set('disabled', false); var query = new Query(); query.where = "state_name='" + registry.byId("stateName").get('value') + "'"; console.info(query.where); query.returnGeometry = true; stateLayer.queryFeatures(query, function (featureSet) { var Geom = featureSet.features[0].geometry; var gra = new Graphic(Geom); var extent = webMercatorUtils.geographicToWebMercator(gra.geometry); gra.setSymbol(polygonHighlightSymbol); map.graphics.add(gra); map.setExtent(extent.getExtent()); }); //Query County var query = new Query(); query.where = "state_name='" + registry.byId("stateName").get('value') + "'"; countyLayer.queryFeatures(query, function(featureSet) { var countyList = []; dojo.map(featureSet.features, function(feature) { countyList.push(feature.attributes.name); }); arrayUtils.forEach(countyList, function(feature){ registry.byId("countyName").get('store').add({ name: feature}); }) }); }); registry.byId("countyName").on("change", function(){ map.graphics.clear(); var query = new Query(); query.where = "state_name='" + registry.byId("stateName").get('value') + "' AND name='" + registry.byId("countyName").get('value') + "'"; console.info(query.where); query.returnGeometry = true; countyLayer.queryFeatures(query, function(featureSet){ var Geom = featureSet.features[0].geometry; var gra = new Graphic(Geom); var extent = webMercatorUtils.geographicToWebMercator(gra.geometry); gra.setSymbol(polygonHighlightSymbol); map.graphics.add(gra); map.setExtent(extent.getExtent()); }) }) }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;"> State name: <!--<input type="text" id="ownerName" size="60" value="Northern Girl" />--> <select id="stateName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;" value="Select a State"></select> County name: <select id="countyName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;" value="Select a County"></select> </div> <div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div> </div> </body> </html>
Hi Jake,Jake Skinner
the code u sent is working fine with the base map such as imagery or topo. But when i add feature layers, and select the state its not displaying anything.
Hi Sayuanarayana,
Can you share your code?
Hi Jake,
here is my code. let me know where i am wrong.
<!DOCTYPE html>
<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>Zoom to Combo Box Selection</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
<style>
html, body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="http://js.arcgis.com/3.13/"></script>
<script>
var map;
require([
"esri/map", "esri/layers/FeatureLayer", "esri/graphicsUtils",
"esri/symbols/SimpleLineSymbol", "esri/graphic", "esri/geometry/webMercatorUtils",
"esri/symbols/SimpleFillSymbol", "esri/Color", "dojo/on", "esri/tasks/query",
"dojo/dom", "dijit/registry", "dojo/_base/array",
"dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, FeatureLayer, graphicsUtils,
SimpleLineSymbol, Graphic, webMercatorUtils,
SimpleFillSymbol, Color, on, Query,
dom, registry, arrayUtils,
parser) {
parser.parse();
map = new esri.Map("map", {
basemap : "satellite",
center : [79, 19],
zoom : 7
});
var stateLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/patta1/MapServer/1",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
var countyLayer = new FeatureLayer("http://gisserver.cgg.gov.in/arcgis/rest/services/sample/patta1/MapServer/2",{
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["*"]
});
map.addLayer(stateLayer);
map.addLayer(countyLayer);
var polygonHighlightSymbol = new SimpleFillSymbol(
SimpleFillSymbol.STYLE_SOLID,
new SimpleLineSymbol(
SimpleLineSymbol.STYLE_SOLID,
new Color([255, 0, 0]), 1),
new Color([125, 125, 125, 0.35])
);
//Query State
var query = new Query();
query.where = "1=1";
stateLayer.queryFeatures(query, function(featureSet) {
var stateList = [];
dojo.map(featureSet.features, function(feature) {
stateList.push(feature.attributes.dname);
});
arrayUtils.forEach(stateList, function(feature){
registry.byId("stateName").get('store').add({ name: feature});
})
});
registry.byId("countyName").set('disabled', true);
registry.byId("stateName").on("change", function(){
map.graphics.clear();
registry.byId("countyName").set('disabled', false);
var query = new Query();
query.where = "dname='" + registry.byId("stateName").get('value') + "'";
console.info(query.where);
query.returnGeometry = true;
stateLayer.queryFeatures(query, function (featureSet) {
var Geom = featureSet.features[0].geometry;
var gra = new Graphic(Geom);
var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);
gra.setSymbol(polygonHighlightSymbol);
map.graphics.add(gra);
map.setExtent(extent.getExtent());
});
//Query County
var query = new Query();
query.where = "dname='" + registry.byId("stateName").get('value') + "'";
countyLayer.queryFeatures(query, function(featureSet) {
var countyList = [];
dojo.map(featureSet.features, function(feature) {
countyList.push(feature.attributes.mname);
});
arrayUtils.forEach(countyList, function(feature){
registry.byId("countyName").get('store').add({ name: feature});
})
});
});
registry.byId("countyName").on("change", function(){
map.graphics.clear();
var query = new Query();
query.where = "dname='" + registry.byId("stateName").get('value') + "' AND mname='" + registry.byId("countyName").get('value') + "'";
console.info(query.where);
query.returnGeometry = true;
countyLayer.queryFeatures(query, function(featureSet){
var Geom = featureSet.features[0].geometry;
var gra = new Graphic(Geom);
var extent = webMercatorUtils.geographicToWebMercator(gra.geometry);
gra.setSymbol(polygonHighlightSymbol);
map.graphics.add(gra);
map.setExtent(extent.getExtent());
})
})
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="height:40px;">
State name:
<!--<input type="text" id="ownerName" size="60" value="Northern Girl" />-->
<select id="stateName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"
value="Select a State"></select>
County name:
<select id="countyName" data-dojo-type="dijit.form.ComboBox" style="width:200px;font-size:16px;"
value="Select a County"></select>
</div>
<div id="map" data-dojo-props="region:'center'" data-dojo-type="dijit/layout/ContentPane" style="border:1px solid #000;"></div>
</div>
</body>
</html>
The services I used in the example are in a geographic coordinate system, so I need to use the geographicToWebMercator method to convert the geometry to Web Mercator. Your data is already projected to Web Mercator, so you do not need to use this method. If you update your code with the following, it should work:
registry.byId("stateName").on("change", function(){ map.graphics.clear(); registry.byId("countyName").set('disabled', false); var query = new Query(); query.where = "dname='" + registry.byId("stateName").get('value') + "'"; console.info(query.where); query.returnGeometry = true; stateLayer.queryFeatures(query, function (featureSet) { var Geom = featureSet.features[0].geometry; var gra = new Graphic(Geom); gra.setSymbol(polygonHighlightSymbol); map.graphics.add(gra); map.setExtent(gra._extent); }); //Query County var query = new Query(); query.where = "dname='" + registry.byId("stateName").get('value') + "'"; countyLayer.queryFeatures(query, function(featureSet) { var countyList = []; dojo.map(featureSet.features, function(feature) { countyList.push(feature.attributes.mname); }); arrayUtils.forEach(countyList, function(feature){ registry.byId("countyName").get('store').add({ name: feature}); }) }); }); registry.byId("countyName").on("change", function(){ map.graphics.clear(); var query = new Query(); query.where = "dname='" + registry.byId("stateName").get('value') + "' AND mname='" + registry.byId("countyName").get('value') + "'"; console.info(query.where); query.returnGeometry = true; countyLayer.queryFeatures(query, function(featureSet){ var Geom = featureSet.features[0].geometry; var gra = new Graphic(Geom); gra.setSymbol(polygonHighlightSymbol); map.graphics.add(gra); map.setExtent(gra._extent); }) })
Hi Jake,
Thanks, Got it
Instead of disabling the other polygon's of layer, we can just highlight the selected content and displaying others right?