I have an app that allows a user to search for an address which then shows it selected in the map.
Now what I'd like to do is take the highlighted point and intersect it with a polygon layer so the popup displays attributes from the polygon that the point resides in.
Looking for suggestions on how to accomplish this. This is my 3rd app, but my first two have been fairly standard with relatively easy customization from templates.
Any help is appreciated!
Solved! Go to Solution.
Roxanne,
Here is a sample I created based on your question that should help get you going:
<!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>Select with feature layer</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #messages{ background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> var map, userMP; require([ "esri/map", "esri/layers/FeatureLayer", "dojo/_base/lang", "esri/dijit/Search", "dojo/on", "esri/tasks/query", "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/Color", "dojo/dom", "dojo/domReady!" ], function( Map, FeatureLayer, lang, Search, on, Query, GraphicsLayer, Graphic, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Color, dom ) { map = new Map("mapDiv", { basemap: "streets", center: [-95.249, 38.954], zoom: 10, slider: false }); var search = new Search({ enableButtonMode: false, //this enables the search widget to display as a single button enableLabel: false, enableInfoWindow: true, showInfoWindowOnSelect: false, map: map }, "search"); var sources = []; sources.push({ featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"), searchFields: ["Name"], displayField: "Name", exactMatch: false, name: "Senator", outFields: ["*"], placeholder: "Senator name", maxResults: 6, maxSuggestions: 6, zoomScale: 300000, //Create an InfoTemplate infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"), enableSuggestions: true, minCharacters: 0 }); //Set the sources above to the search widget search.set("sources", sources); search.startup(); search.set('value', 'Moran, Jerry'); var fillSymb = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([255, 0, 0]), 4 ), new Color([255, 0, 0, 0]) ); on(search, "select-result", lang.hitch(this, function(rslt){ var query = new Query(); query.geometry = rslt.result.feature.geometry; featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){ var rstr = ""; rstr += "Households: " + results[0].attributes.HOUSEHOLDS + "<br>"; rstr += "Household Units: " + results[0].attributes.HSE_UNITS + "<br>"; rstr += "2000 Population: " + results[0].attributes.POP2000; dom.byId("messages").innerHTML = rstr; }); })); var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{ infoTemplate: new InfoTemplate("Block: ${BLKGRP}", "${*}"), outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"] }); featureLayer.setSelectionSymbol(fillSymb); //make unselected features invisible var nullSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([255, 255, 0, 0]), 0 ), new Color([255, 255, 0, 0]) ); featureLayer.setRenderer(new SimpleRenderer(nullSymbol)); map.addLayer(featureLayer); }); </script> </head> <body> <div id="search"></div> <span id="messages">Search by your Sentors name to find the Census block they are located in.</span> <div id="mapDiv"></div> </body> </html>
Roxanne,
You would get the geometry from the highlighted point and use that to build your QueryTask which you will point to your other layers URL. There are many samples for using QueryTask in the samples
QueryTask | API Reference | ArcGIS API for JavaScript
You then execute the QueryTask using the Query class
Query | API Reference | ArcGIS API for JavaScript
having set the Query class geometry property to the selected points geometry.
Then you need to decide how you will display the attributes of the polygon that the point resides in (i.e. some html text in a div, a popup, etc).
Does getting the geometry of the selected feature have something to do with the get(name) method on the Search widget?
Roxanne,
Here is a sample I created based on your question that should help get you going:
<!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>Select with feature layer</title> <link rel="stylesheet" href="http://js.arcgis.com/3.16/dijit/themes/claro/claro.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.16/esri/css/esri.css"> <style> html, body, #mapDiv { padding: 0; margin: 0; height: 100%; } #messages{ background-color: #fff; box-shadow: 0 0 5px #888; font-size: 1.1em; max-width: 15em; padding: 0.5em; position: absolute; right: 20px; top: 20px; z-index: 40; } #search { display: block; position: absolute; z-index: 2; top: 20px; left: 74px; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> var map, userMP; require([ "esri/map", "esri/layers/FeatureLayer", "dojo/_base/lang", "esri/dijit/Search", "dojo/on", "esri/tasks/query", "esri/layers/GraphicsLayer", "esri/graphic", "esri/InfoTemplate", "esri/symbols/SimpleLineSymbol", "esri/symbols/SimpleFillSymbol", "esri/renderers/SimpleRenderer", "esri/Color", "dojo/dom", "dojo/domReady!" ], function( Map, FeatureLayer, lang, Search, on, Query, GraphicsLayer, Graphic, InfoTemplate, SimpleLineSymbol, SimpleFillSymbol, SimpleRenderer, Color, dom ) { map = new Map("mapDiv", { basemap: "streets", center: [-95.249, 38.954], zoom: 10, slider: false }); var search = new Search({ enableButtonMode: false, //this enables the search widget to display as a single button enableLabel: false, enableInfoWindow: true, showInfoWindowOnSelect: false, map: map }, "search"); var sources = []; sources.push({ featureLayer: new FeatureLayer("https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_Senators/FeatureServer/0"), searchFields: ["Name"], displayField: "Name", exactMatch: false, name: "Senator", outFields: ["*"], placeholder: "Senator name", maxResults: 6, maxSuggestions: 6, zoomScale: 300000, //Create an InfoTemplate infoTemplate: new InfoTemplate("Senator information", "Name: ${Name}</br>State: ${State}</br>Party Affiliation: ${Party}</br>Phone No: ${Phone_Number}<br><a href=${Web_Page} target=_blank ;'>Website</a>"), enableSuggestions: true, minCharacters: 0 }); //Set the sources above to the search widget search.set("sources", sources); search.startup(); search.set('value', 'Moran, Jerry'); var fillSymb = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_SHORTDASHDOTDOT, new Color([255, 0, 0]), 4 ), new Color([255, 0, 0, 0]) ); on(search, "select-result", lang.hitch(this, function(rslt){ var query = new Query(); query.geometry = rslt.result.feature.geometry; featureLayer.selectFeatures(query, FeatureLayer.SELECTION_NEW, function(results){ var rstr = ""; rstr += "Households: " + results[0].attributes.HOUSEHOLDS + "<br>"; rstr += "Household Units: " + results[0].attributes.HSE_UNITS + "<br>"; rstr += "2000 Population: " + results[0].attributes.POP2000; dom.byId("messages").innerHTML = rstr; }); })); var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer/1",{ infoTemplate: new InfoTemplate("Block: ${BLKGRP}", "${*}"), outFields: ["POP2000","HOUSEHOLDS","HSE_UNITS", "TRACT", "BLKGRP"] }); featureLayer.setSelectionSymbol(fillSymb); //make unselected features invisible var nullSymbol = new SimpleFillSymbol( SimpleFillSymbol.STYLE_NULL, new SimpleLineSymbol( SimpleLineSymbol.STYLE_NULL, new Color([255, 255, 0, 0]), 0 ), new Color([255, 255, 0, 0]) ); featureLayer.setRenderer(new SimpleRenderer(nullSymbol)); map.addLayer(featureLayer); }); </script> </head> <body> <div id="search"></div> <span id="messages">Search by your Sentors name to find the Census block they are located in.</span> <div id="mapDiv"></div> </body> </html>