I have a code where drop down is use to show different state and countries, in which i use Map image layer for layer of version 4.9. The problem is i want to add different widgets on my project such as search widget and other widgets but i have not succeed.
My code,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no" />
<title>Drop Down Test</title>
<link rel="stylesheet" href="http://js.arcgis.com/4.9/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/4.9/esri/css/main.css">
<script src="https://js.arcgis.com/4.9/"></script>
<style>
html,
body,
#mainWindow {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
#header {
height: 3%;
overflow: auto;
}
</style>
<script>
var map;
require([
"esri/Map",
"esri/views/MapView",
"dojo/on",
"esri/tasks/support/Query",
"esri/layers/FeatureLayer",
"dojo/store/Memory",
"dojo/_base/array",
"dojo/_base/lang",
"esri/request",
"dojo/parser",
"dijit/registry",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/form/Button",
"dijit/form/ComboBox",
"dojo/domReady!"
], function(
Map, MapView, on, Query, FeatureLayer, Memory, array, lang, esriRequest, parser, registry
) {
parser.parse();
map = new Map({
basemap: "topo"
});
var view = new MapView({
container: "map",
map: map,
center: [-98.1883, 37.0868],
zoom: 5
});
esriRequest('http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3/query?where=1%3D1&outF...',
{
responseType:'json',
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("stateSelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.STATE_NAME;
var value = feat.attributes.STATE_NAME;
var dataItem = {
id:index,
name:name,
value:value
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("stateSelect").set('store',store2);
}));
var States = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/3",
outFields: ["*"]
});
var Counties = new FeatureLayer({
url: "http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2",
outFields: ["*"]
});
//map.addMany([States,Counties]);
app = {
zoomRow: function(id, which){
var sym = {
type: "simple-fill", // autocasts as new SimpleFillSymbol()
color: [255, 0, 0, 0.5],
outline: { // autocasts as new SimpleLineSymbol()
color: [128, 128, 128, 1],
width: "0.5px"
}
}, gra;
view.graphics.removeAll();
var query = States.createQuery();
var thePoly, theExtent;
if(which == "State"){
query.outFields=[];
query.outSpatialReference = view.spatialReference;
query.where = "STATE_NAME='" + (id).toString() + "'";
console.info(query.where);
query.returnGeometry = true;
States.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
esriRequest("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/2/query?where=STATE_NAME...'" + id.toString() + "'&outFields=NAME&returnGeometry=false&orderByFields=NAME&returnDistinctValues=true&f=json",
{
responseType: "json",
timeout:15000
}).then(lang.hitch(this,function(response){
var store2 = new Memory({data:[]});
registry.byId("countySelect").set('store',store2);
var data = array.map(response.data.features,lang.hitch(this,function(feat, index){
var name = feat.attributes.NAME;
var dataItem = {
id:index,
name:name
};
return dataItem;
}));
store2 = new Memory({data:data});
registry.byId("countySelect").set('store',store2);
document.getElementById('countySelect').value = "Select County";
}));
}else if(which == "County"){
query = Counties.createQuery();
var county = (id).toString();
county = county.replace(" County", "");
query.where = "NAME='" + county + "'";
query.returnGeometry = true;
query.outFields=[];
query.outSpatialReference = view.spatialReference;
Counties.queryFeatures(query).then(function(response){
gra = response.features[0];
gra.symbol = sym;
view.graphics.add(gra);
thePoly = gra.geometry;
theExtent = thePoly.extent.expand(2); //Zoom out slightly from the polygon's extent
view.goTo(theExtent);
});
}
}
};
});
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false" style="padding:0px;margin:0px;">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="overflow:hidden;border:none;border-bottom: 3px solid #CC9900;font-family: Windows;font-size:14pt; color: #FFFFFF;background: #000000; "> Select a State/County and zoom to it on the map:
<input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');" data-dojo-props="maxHeight: 200" />
<input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" onchange="app.zoomRow(document.getElementById('countySelect').value, 'County');" />
<input type="hidden" name="stateabbr" id="stateabbr" />
</div>
<div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'" style="width:100%;height:95%;border:none;padding:0px;margin:0px;"></div>
</div>
</body>
</html>
Solved! Go to Solution.
Irtiza,
You need to try an understand the code. You will see that the zoomRow function is what zooms to the state and county . So you need to remove code that call this function.
onchange="app.zoomRow(document.getElementById('stateSelect').value, 'State');"
sir, i changed the drop down fields from state and county to region and city. First we have to select the region then the cities drop down allows us to select city, the service that i provide to the city, there are many cities but in drop down only the name of selected region is appearing. It is like when we select a region x then in city column only x is shown instead of name of different cities!! how can i fix this??
Irtiza,
Sounds like you have something wrong in your code changes. It is had to tell without seeing your changes.
Thanks Robert,
i sort out the issue. I was placing the wrong field name.
Can you tell me is there is any way to remove the highlighted area automatically !! how can i remove the highlighted area automatically which appear on screen after choose any option from drop down.
Here is the picture
Irtiza,
I answered that question a week ago.
yess but i didn't get how to do this!!
Irtiza,
Hmm not sure how much simpler I could make it.. Remove the onchange property.
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">
<div id="header" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> Select a State/County and zoom to it on the map:
<input id="stateSelect" data-dojo-type="dijit/form/ComboBox" value="Select State" data-dojo-props="maxHeight: 200" />
<input id="countySelect" data-dojo-type="dijit/form/ComboBox" value="Select County" data-dojo-props="maxHeight: 200" />
<input type="hidden" name="stateabbr" id="stateabbr" />
<div id="searchDiv" class='searchDiv'></div>
</div>
<div id="viewDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'left'"></div>
</div>
</body>
sir i did the same as above but still it is still not working!!
I am not sure I can help you. You can not expect someone to write your code for you. I have provided guidance and code that I know works so the issue is on your end.
ok sir thanks for your guidance.