How do I ZOOM into a selected value from a combox and create a POPUP to show info in ArcGIS API for JavaScript?

TomVo1 · ‎08-21-2014

Hi all,

I really need your help! I am fairly new to the coding world, especially ArcGIS API for JavaScript. Let me get straight to the point. I am trying to create a web-based map application that contains information of Counties and Cities in California. Ultimately, when I select a particular jurisdiction, the map will automatically zoom into that jurisdiction and highlights its boundary. I also want to develop a popup window that illustrates some information of that selected jurisdiction.

I have been "googling" for a solution online and this is what I came up with so far. I got the list to populate but it doesn't zoom into the jurisdiction when I select it. Please look at my code below:

<!DOCTYPE html>

<html>

<head>

<title>Populate dropdown list with unique values</title>

var map;

var resizeTimer;

require([

"esri/map", "esri/tasks/query", "dojo/parser", "dijit/layout/BorderContainer", "dijit/layout/ContentPane",

"dijit/form/ComboBox", "dojo/data/ItemFileReadStore","dojo/store/Memory", "dojo/on", "dojo/domReady!"],

function(Map, query, parser, BorderContainer, ContentPane, ComboBox, ItemFileReadStore, Memory, on) {

parser.parse();

map = new Map("map", {

basemap: "topo",

//center: [-122.45, 37.75], // longitude, latitude

center : [-120.676665, 37.306837],

zoom: 6

});

var queryTask = new esri.tasks.QueryTask("http://services.arcgis.com/IARhjUVNlIMumZL3/ArcGIS/rest/services/OTS_MAP/FeatureServer/1");

//Define query parameters

var query = new esri.tasks.Query();

query.outFields = ["NAME", "POP", "DVMT", "FATAL_OTS"];

query.returnGeometry = true;

query.where = "NAME <> ''"

queryTask.execute(query,populateList);

//var initialExtent = new esri.geometry.Extent(-85.915,38.105,-85.52,38.33,

// new esri.SpatialReference({wkid:4326}) );

// map = new esri.Map("map", {extent:initialExtent});

//Create tiled and dynamic map services and add to the map - for the dynamic service set the transparency

//and provide an id so we can access it later

map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://server.arcgisonline.com/ArcGIS/rest/services/ESRI_StreetMap_World_2D/MapServer"));

map.addLayer(new esri.layers.ArcGISTiledMapServiceLayer("http://services.arcgis.com/IARhjUVNlIMumZL3/ArcGIS/rest/services/CPP4OTS_MAP/MapServer",

{"opacity":.4,"id":"dynamic"}));

function populateList(results) {

//initialize InfoTemplate

infoTemplate = new esri.InfoTemplate("${NAME}", "County : ${NAME}<br/> Population : ${POP}<br/> Daily VMT : ${DVMT} <br/> Fatal OTS : ${FATAL_OTS}");

//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]));

//Populate the dropdown list box with unique values

var county;

var values = [];

var testVals={};

//Add option to display all zoning types to the dropdown list

values.push({name:"ALL"})

var features = results.features;

dojo.forEach (features, function(feature) {

county = feature.attributes.NAME;

if (!testVals[county]) {

testVals[county] = true;

values.push({name:county});

}

});

var dataItems = {

identifier: 'name',

label: 'name',

items: values

};

var store = new dojo.store.Memory({data:dataItems});

dijit.byId("mySelect").store = store;

//remove all graphics on the maps graphics layer

map.graphics.clear();

//Performance enhancer - assign featureSet array to a single variable.

var resultFeatures = results.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);

// This takes the graphics array you get back from your query and

// gets the overall extent for them. Make sure return geometry is set to

// true in your query.

var extent = esri.graphicsExtent(results.features);

// Use that to set the extent, 1.5 is something I use in my app, but play with

// it to find a setting you like, setting the second parameter to true will get you an extend

// that is at the closest level of your cached service.

map.setExtent(extent.expand(1.7), true);

}

// this replaces your applyLayerDef() function

dijit.byId("mySelect").on("change", function () {

//Filter the layer to display only the selected zoning types

var county = dijit.byId("mySelect").value;

if (county !== 'ALL') {

var layerDefs = [];

layerDefs[2] = "NAME = " + "'" + county + "'";

layerDefs.visibleLayers = [2];

map.getLayer("dynamic").setLayerDefinitions(layerDefs);

}

else {

map.getLayer("dynamic").setDefaultLayerDefinitions();

}

});

function resizeMap() {

//Handle browser resize

clearTimeout(resizeTimer);

resizeTimer = setTimeout(function() {

map.resize();

map.reposition();

}, 800);

}

});

</script>

</head>

<div id="main"

dojotype="dijit.layout.BorderContainer"

design="headline"

gutters="true">

<div id="header"

dojotype="dijit.layout.ContentPane"

region="top"

style="height:25px;">

<select id="mySelect"

dojotype="dijit.form.ComboBox"

style="width:300px;font-size:18px;"

autoComplete="true"

forceValidOption="false"

value="Select Zoning Type"></select>

</div>

<div id="map"

dojotype="dijit.layout.ContentPane"

region="center"

style="border:1px solid #000;margin:5px">

</div>

</body>

</html>

RiyasDeen · ‎08-22-2014

Hi Tom,

I have modified you code to zoom to selected county layer. I have included my comments on changes I made as well.

I should say for a new developer your code is formatted very well

View solution in original post

RiyasDeen · ‎08-22-2014

Hi Tom,

I have modified you code to zoom to selected county layer. I have included my comments on changes I made as well.

I should say for a new developer your code is formatted very well

TomVo1 · ‎08-22-2014

Hi Riyas,

Thank you so much for your response and consideration. The code works like a champ and it does almost exactly how I have imagined. Currently, the code automatically performs a function to show the SimpleMarkerSymbol (picture) for all Counties--I wonder if there is such a code to only zoom in to the particular County when I select it from my Combo Box? And, instead of clicking on the SimpleMarketSymbol to view the popup, is there a way that I can click anywhere on that County to view the popup?

Thank you for your help,

Tom

RiyasDeen · ‎08-23-2014

Hi Tom,

Looks like. what you are looking for is an identify.

I was looking at your map service http://services.arcgis.com/IARhjUVNlIMumZL3/ArcGIS/rest/services/CPP4OTS_MAP/MapServer and it was not supporting query operation without which you can't perform an identify.

Below code should work once you have enabled query operation for your map service.

Edit fiddle - JSFiddle

TomVo1 · ‎08-23-2014

Hi Rivas,

Thank you for your help. Wow...I would never have figured out the code you modified for me in such a short time like this.

Anyway, I am so new to ArcGIS Online that I was having problem with publishing my map services. Not sure if I did this right, but I published my feature layer using ArcGIS for Desktop and host it through my ArcGIS Online server. Then, I used ArcGIS Online to publish/convert my feature layer to map server. It is very strange process and I am not sure if this is a correct way of publishing a map service. With that being said, it seems that my map service does not have full capability as it should.

Furthermore, I did some research on ArcGIS Resources Center and found a brief and useful description of map services. Below is the description:

Map services hosted by ArcGIS Online and Portal for ArcGIS

Map services hosted by ArcGIS Online or Portal for ArcGIS can only return tiles from the server's cache; they cannot draw images dynamically, nor do they allow query of the individual features behind the map. You can support queries and informational pop-up windows in your applications by using feature servicesin conjunction with your map services.

Accordingly, some of the resources, operations, and properties mentioned in this section of the documentation do not apply to map services hosted by ArcGIS Online or Portal for ArcGIS.

When a map service is hosted on ArcGIS Online or Portal for ArcGIS, it simply exposes a set of tiled images which are used by the client for rapid map navigation. When a map service is hosted on an ArcGIS Server site, it exposes additional functionality such as dynamic drawing, query, and search.

It seems that hosting map services via ArcGIS Online does not give you the capability to perform query task or other advanced functions. I wonder if there is a way around this?

Thank you very much for your help,

Tom

RiyasDeen · ‎08-24-2014

Hi Tom,

I have updated the fiddle to identify your county features. Hope this is what you were looking for.

Edit fiddle - JSFiddle

TomVo1 · ‎08-24-2014

Hi Rivas,

I can't really express how much appreciation I have for your tremendous help. The GeoNet Community needs more people like you. By the way, the map looks great!

I just have one quick question--I want to add a City layer that has similar functionality as the County one. With that, I'm trying to populate a list of Cities in another Combo Box (next to the County Combo Box). Ultimately, I want to either select a City or a County (depending on your choice) and it will zoom into the selected jurisdiction with a Popup window. Is it possible to add a City layer a long with County layer?

Update: I have modified my code. The City Combo Box now contains a list of all Cities and performs as similar as my County Combo Box. Everything works fine except for the popup window of County layer. When I click on a County, it says "no information available." Attached is my code for your review.

Thank you so much for your help!

Tom

RiyasDeen · ‎08-24-2014

Hi Tom,

I have updated the fiddle to perform identify on both the layers. What you needed for a deferredlist which will fire up after all the deferred events for identify has been completed.

Edit fiddle - JSFiddle

TomVo1 · ‎08-25-2014

Riyas,

First off, I apologize for spelling your name incorrectly this whole time . Thank you again for the modification. My code is almost done. I tried to turn the infoTemplate into automatic mode--it means that when I select a value from my Combo Box, it will zoom in and popup the info window. After looking at the script, I believe I need to modify the "click" part below:

var infoTemplates = [infoTemplate, infoTemplate1];

map.on("click", executeIdentifyTask);

I tried to replace the "click" with "mouse-out" but it didn't perform like how I wanted. Do you have any ideas?

Thank you,

Tom

RiyasDeen · ‎08-25-2014

Hi Tom,

Updated the fiddle again. Hope this is what you wanted.

Edit fiddle - JSFiddle