topic Re: How do I ZOOM into a selected value from a combox and create a POPUP to show info in ArcGIS API for JavaScript? in ArcGIS JavaScript Maps SDK Questions

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

TomVo1 — Fri, 22 Aug 2014 06:29:36 GMT

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>

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

RiyasDeen — Fri, 22 Aug 2014 11:27:12 GMT

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

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

TomVo1 — Fri, 22 Aug 2014 17:10:49 GMT

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

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

RiyasDeen — Sat, 23 Aug 2014 10:39:20 GMT

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

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

TomVo1 — Sat, 23 Aug 2014 16:55:09 GMT

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

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

RiyasDeen — Sun, 24 Aug 2014 07:37:04 GMT

Hi Tom,

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

Edit fiddle - JSFiddle

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

TomVo1 — Sun, 24 Aug 2014 21:48:33 GMT

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

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

RiyasDeen — Mon, 25 Aug 2014 05:44:31 GMT

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

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

TomVo1 — Tue, 26 Aug 2014 03:48:49 GMT

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

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

RiyasDeen — Tue, 26 Aug 2014 04:21:35 GMT

Hi Tom,

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

Edit fiddle - JSFiddle

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

TomVo1 — Tue, 26 Aug 2014 04:32:58 GMT

Riyas,

This is EXACTLY what I have imagined! You are such a life-saver! Thank you very much. I wish I could give you extra bonus points.

Tom

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

RiyasDeen — Tue, 26 Aug 2014 06:15:03 GMT

Hi Tom,

Glad it worked, Happy to help!!!

Regards

Riyas

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

TomVo1 — Mon, 01 Sep 2014 08:53:17 GMT

Hi Riyas,

I need your help again. Do you have knowledge in working with asp.net? I'm trying to import my javascript that you helped me with into a webpage I'm working on..but the function doesn't seem to work properly.

Please let me know.

Thank you,

Tom

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

RiyasDeen — Mon, 01 Sep 2014 09:06:38 GMT

Hi Tom,

Yes I do, Let me know what the issue is, I'll see if i can be of any help here.

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

TomVo1 — Mon, 01 Sep 2014 17:19:17 GMT

Hi Riyas,

We are creating a website using 2012 Visual Studio and 2012 SQL Server Management Studio Express. We want have drop-down lists that will generate tables from SQL and activate the map functions (the JavaScript code that you have helped me with) after selecting a jurisdiction.

We got the map to work with the drop-down list at certain points. Also, most of the map functions does not work at the moment because we didn't know how to make them compatible with asp.net (i.e. boundary highlighting and automatic popup info window). Only zoom function is working for now.

Anyways, when selecting a jurisdiction from a drop-down list, the map zooms into the selected boundary; but when I click the "confirm" button to generate tables, it refreshes the page, generates tables, and also refreshes the map extent. The map zooms back out to my original extent (California boundary) after I click the "confirm" button.

We are thinking about using UpdatePanel to force the map to not refresh but we couldn't get it to work. And I don't know if this is the right solution. That is our problem currently.

Thanks for your help.

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

RiyasDeen — Tue, 02 Sep 2014 00:09:02 GMT

Hi Tom,

Can you post some code? It'll be easier to analyse the issue with the code.

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

TomVo1 — Tue, 02 Sep 2014 03:42:24 GMT

Hi Riyas,

Here is my code: Dropbox - Map-Page.txt

Please let me know if this works for you.

Tom

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

RiyasDeen — Wed, 03 Sep 2014 04:13:44 GMT

Hi Tom,

looks like your page is getting posted backed, you may want to explore using callback (Ajax). Google with key phrase postback and callback.

ArcGIS Javascript API is a client side scripting, when you postback your page, the whole page gets reloaded. This will cause your map to reload as well. Using a callback will prevent your page from reloading.

Also, as a thumb rule i generally try to avoid using server controls (one's with <asp: ) in my applications. I prefer working with client control and callbacks.

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

TomVo1 — Thu, 04 Sep 2014 02:22:41 GMT

Hi Riyas,

i tried to implement your method by using update pane but I couldn't get it to work. when I run my map page, it generates errors.

Do I put the code directly into my map.aspx? Or in the site.master?

Thank you for your help,

Tom

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

TomVo1 — Fri, 05 Sep 2014 21:23:38 GMT

Hi Riyas,

I finally got the map to work properly by using updatepanel function. Do you have any suggestion on how to make my all map functions to work in asp.net? The functions that are not working are "highlighting" and "automatic popup info window".

Tom