I would like to create a simple ArcGIS Online web-map or ArcGIS JSAPI application that contains one polygon layer with attributes and a locator. I would like to drop a pin or point on my geocode result and display the attributes of the polygon that it falls within. Are there any examples of this available? The best that I could do was the point in polygon selection, but I would like to create a feature layer from my geocoded location and give it the same attributes of the polygon it falls within. I am using this for voting districts. So if I am at 1000 N. Broadway Blvd. and geocode that then, the point that appears on the map should be given the attributes of District 1, for example.
Solved! Go to Solution.
I have access.
On Fri, Mar 11, 2016 at 10:07 AM, Robert Scheitlin, GISP <geonet@esri.com>
Geoffery,
Very strange... Can you edit all the urls in the code to use http instead of https.
Geoffery,
Sorry I am at the end of my ability to help with this then. It definitely seems like a network issue.
Robert,
I have added my feature layer from hosted in ArcGIS Online, what would be the best way to use InfoTemplate and SimplerMarkerSymbol to return the values from the console to my intersected feature in my popup?
Geoffery,
Here is the sample updated to not display the search widgets popup but instead trigger the layers standard popup.
<!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>Create web map from id</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"> <link rel="stylesheet" href="css/layout.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } body { background-color: #FFF; overflow: hidden; font-family: "Helvetica"; } #header { border: solid 1px #A8A8A8; overflow: hidden; background-color: #999; background: -webkit-gradient(linear, left top, left bottom, from(#fff), to(#C0C0C0)); background: -moz-linear-gradient(top, #fff, #C0C0C0); height: 65px; margin: 5px 5px; } .roundedCorners { -o-border-radius: 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; } .shadow { -webkit-box-shadow: 4px 4px 8px #adadad; -moz-box-shadow: 4px 4px 8px #adadad; -o-box-shadow: 4px 4px 8px #adadad; box-shadow: 4px 4px 8px #adadad; } #title { padding-top: 2px; padding-left: 10px; color: #000; font-size: 18pt; text-align: left; text-shadow: 0px 1px 0px #e5e5ee; font-weight: 700; } #subtitle { font-size: small; padding-left: 40px; text-shadow: 0px 1px 0px #e5e5ee; color: #000; } #rightPane { background-color: #E8E8E8; border: solid 2px #B8B8B8; margin: 5px; width: 20%; } #map { background-color: #FFF; border: solid 2px #B8B8B8; margin: 5px; padding: 0; } .esriLegendServiceLabel { display: none; } #search { display: block; position: absolute; z-index: 2; top: 140px; left: 74px; } </style> <script src="http://js.arcgis.com/3.16/"></script> <script> require([ "dojo/parser", "dojo/ready", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/dom", "esri/map", "esri/urlUtils", "esri/arcgis/utils", "esri/dijit/Legend", "esri/dijit/Scalebar", "esri/dijit/Search", "dojo/on", "dojo/_base/lang", "esri/tasks/query", "esri/tasks/QueryTask", "dojo/domReady!" ], function ( parser, ready, BorderContainer, ContentPane, dom, Map, urlUtils, arcgisUtils, Legend, Scalebar, Search, on, lang, Query, QueryTask ) { ready(function () { parser.parse(); //if accessing webmap from a portal outside of ArcGIS Online, uncomment and replace path with portal URL //arcgisUtils.arcgisUrl = "https://pathto/portal/sharing/content/items"; arcgisUtils.createMap("a95d21a0d6bd4d42b96b88acdd910b49", "map").then(function (response) { //update the app dom.byId("title").innerHTML = response.itemInfo.item.title; dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet; var map = response.map; //add the scalebar var scalebar = new Scalebar({ map: map, scalebarUnit: "english" }); var search = new Search({ map: map, enableInfoWindow: false }, "search"); search.startup(); search.on("select-result", lang.hitch(this, function(result){ var geom = result.result.feature.geometry; var queryTask = new QueryTask("http://services.arcgis.com/P3ePLMYs2RVChkJx/arcgis/rest/services/USA_ZIP_Codes/FeatureServer/0"); var query = new Query(); query.returnGeometry = true; query.outFields = ["*"]; query.geometry = geom; queryTask.execute(query, lang.hitch(this, function(results){ //here are the attributes of the zip poly that the search widgets results intersected. console.info(results.features[0].attributes); var scrPt = map.toScreen(geom); map.emit("click", { bubbles: true, cancelable: true, screenPoint: scrPt, mapPoint: geom }); })); })); //add the legend. Note that we use the utility method getLegendLayers to get //the layers to display in the legend from the createMap response. var legendLayers = arcgisUtils.getLegendLayers(response); var legendDijit = new Legend({ map: map, layerInfos: legendLayers }, "legend"); legendDijit.startup(); }); }); }); </script> </head> <body class="claro"> <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%; height:100%;"> <div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'"> <div id="title"></div> <div id="subtitle"></div> </div> <div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div> <div id="search"></div> <div id="rightPane" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'"> <div id="legend"></div> </div> </div> </body> </html>
Ah, thank you Robert. This is what I was looking for. Is it possible to use this workflow, however using the search function on one page and making an ajax call to return the map and attributes associated with the spatial intersection? My knowledge of the JSAPI is somewhat limited and I am learning as I go; any direction would be much appreciated.
Geoffery,
I don't exactly understand the question... can you expound on this?
I would like to use the search and geocode function in the same manner as the example that you have provided; but with that being on one page and the map and returned attributes on another. So whenever an address is entered a rquest is sent and another page opens with the marker as shown above.
Geoffery,
Sure that would be possible but I don't have any code examples to provide for this unfortunately.