nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

TomVo1

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>

Encontre mais publicações marcadas com

Accepted answers

RiyasDeen

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

zoom to selected feature.html.zip

All comments

RiyasDeen

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

zoom to selected feature.html.zip

TomVo1

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

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

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

TomVo1

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

Hi Tom,

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

Edit fiddle - JSFiddle

TomVo1

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

RiyasDeen

Hi Tom,

Glad it worked, Happy to help!!!

Regards

Riyas

SatyanarayanaNarmala

Hi,

Thanks for the code this is exactly what i needed.

Small modification i needed in this. instead of loading initially into the second combo box, how can i add values to the second combo box based on the first combo box input.

For example the city combo box (second one) should have input as the cities existing in the county selected in the first combo box.

<!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",

"esri/tasks/IdentifyTask", "esri/tasks/IdentifyParameters", "dojo/_base/array","dojo/DeferredList",

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

function(Map, query, parser, BorderContainer, ContentPane,

IdentifyTask, IdentifyParameters,arrayUtils,DeferredList,

ComboBox, ItemFileReadStore, Memory, on, Scalebar) {

parser.parse();

map = new Map("map", {

basemap: "topo",

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

center : [-120.676665, 37.306837],

zoom: 6

});

var polygonQuery = null;

var polygonQueryTask = null;

var polygonQuery1 = null;

var polygonQueryTask1 = null;

// RIYAS: Wait till map is loaded before firing query, needed for getting map spatial reference

map.on("load", function () {

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

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

//Define query parameters

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

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

query.returnGeometry = true;

query.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference

query.where = "NAME <> ''"

queryTask.execute(query,populateList);

//Define query parameters

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

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

query1.returnGeometry = true;

query1.outSpatialReference = map.spatialReference; // RIYAS: Set query to return shape in map's spatial reference

query1.where = "NAME <> ''"

queryTask1.execute(query1,populateList1);

// RIYAS: Setup query to behave as identify

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

polygonQuery = new esri.tasks.Query();

polygonQuery.returnGeometry = true;

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

polygonQuery.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

polygonQuery.outSpatialReference = map.spatialReference;

// RIYAS: Setup query to behave as identify

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

polygonQuery1 = new esri.tasks.Query();

polygonQuery1.returnGeometry = true;

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

polygonQuery1.spatialRelationship = esri.tasks.Query.SPATIAL_REL_INTERSECTS;

polygonQuery1.outSpatialReference = map.spatialReference;

});

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

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

var infoTemplates = [infoTemplate, infoTemplate1];

//map.on("click", executeIdentifyTask);

// RIYAS: Execute query to behave as identify

function executeIdentifyTask (where, pnt) {

//polygonQuery.where = event.mapPoint;

//polygonQuery1.where = event.mapPoint;

polygonQuery.where = where;

polygonQuery1.where = where;

var deferred = polygonQueryTask

.execute(polygonQuery);

var deferred1 = polygonQueryTask1

.execute(polygonQuery1);

// InfoWindow expects an array of features from each deferred

// object that you pass. If the response from the task execution

// above is not an array of features, then you need to add a callback

// like the one above to post-process the response and return an

// array of features.

var defList = new DeferredList([deferred, deferred1]).then(function (results){

var features = [];

arrayUtils.forEach(results,function(result, idx){

if (result[0] === true){

features = features.concat(arrayUtils.map(result[1].features, function (feature) {

feature.setInfoTemplate(infoTemplates[idx]);

return feature;

}));

}

});

map.infoWindow.setFeatures(features);

map.infoWindow.show(pnt);

});

}

//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":0.8,"id":"dynamic"}));

function populateList(results) {

//initialize InfoTemplate

//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,shape:feature.geometry,centroid: feature.geometry.type === "point" ? feature.geometry : feature.geometry.getCentroid() }); // RIYAS: set shape to list store

}

});

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.0), 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;

var centroid = dijit.byId("mySelect").item.centroid;

if (county !== 'ALL') {

var layerDefs = [];

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

layerDefs.visibleLayers = [2];

map.setExtent(dijit.byId("mySelect").item.shape.getExtent(infoTemplate).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent

executeIdentifyTask("NAME = '" + county + "'", centroid);

// RIYAS: cannot set layer defintion for dynamic map service.

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

}

else {

// RIYAS: cannot set layer defintion for dynamic map service.

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

}

});

function populateList1(results1) {

//initialize InfoTemplate

//create symbol for selected features

symbol1 = new esri.symbol.SimpleMarkerSymbol();

symbol1.setStyle(esri.symbol.SimpleMarkerSymbol.STYLE_SQUARE);

symbol1.setSize(10);

symbol1.setColor(new dojo.Color([255, 255, 0, 0.5]));

//Populate the dropdown list box with unique values

var city;

var values1 = [];

var testVals1={};

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

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

var features1 = results1.features;

dojo.forEach (features1, function(feature1) {

city = feature1.attributes.NAME;

if (!testVals1[city]) {

testVals1[city] = true;

values1.push({name:city,shape:feature1.geometry,centroid: feature1.geometry.type === "point" ? feature1.geometry : feature1.geometry.getCentroid()}); // RIYAS: set shape to list store

}

});

var dataItems1 = {

identifier: 'name',

label: 'name',

items: values1

};

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

dijit.byId("mySelect1").store = store1;

//remove all graphics on the maps graphics layer

map.graphics.clear();

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

var resultFeatures1 = results1.features;

//Loop through each feature returned

for (var i = 0, il = resultFeatures1.length; i < il; i++) {

//Get the current feature from the featureSet.

//Feature is a graphic

var graphic1 = resultFeatures1;

graphic1.setSymbol(symbol1);

//Set the infoTemplate.

graphic1.setInfoTemplate(infoTemplate1);

//Add graphic to the map graphics layer.

map.graphics.add(graphic1);

// 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 extent1 = esri.graphicsExtent(results1.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(extent1.expand(1.0), true);

}

// this replaces your applyLayerDef() function

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

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

var city = dijit.byId("mySelect1").value;

var centroid = dijit.byId("mySelect1").item.centroid;

if (city !== 'ALL') {

var layerDefs1 = [];

layerDefs1[2] = "NAME = " + "'" + city + "'";

layerDefs1.visibleLayers = [2];

map.setExtent(dijit.byId("mySelect1").item.shape.getExtent(infoTemplate1).expand(1.7)); // RIYAS: Get shape from list store and zoom to its extent

executeIdentifyTask("NAME = '" + city + "'", centroid);

// RIYAS: cannot set layer defintion for dynamic map service.

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

}

else {

// RIYAS: cannot set layer defintion for dynamic map service.

//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 a County"></select>

<select id="mySelect1"

dojotype="dijit.form.ComboBox"

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

autoComplete="true"

forceValidOption="false"

value="Select a City"></select>

</div>

<div id="map"

dojotype="dijit.layout.ContentPane"

region="center"

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

</div>

</body>

</html>

Participe da Conversa

Membros conectados podem postar, seguir atualizações e mais. Novo aqui? Registre uma conta gratuita.

Links Rápidos

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.