topic Re: Spatial Intersection of geocoded points in JSAPI in ArcGIS JavaScript Maps SDK Questions

Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 00:55:24 GMT

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.

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:56:19 GMT

Geoffery,

Here is a sample to get you started:

<!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="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.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;
    }

    .shadw {
      -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="https://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 ap = response.map;

          //add the scalebar
          var scalebar = new Scalebar({
            map: map,
            scalebarUnit: "english"
          });

          var search = new Search({
            map: map
          }, "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);
            }));
          }));

          //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>

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 15:57:58 GMT

Hi Robert,

Thanks for your response, I have configured this application on a local machine using the Chrome Add-On 200 OK to launch it and avoid cross origin domain errors. However, I have received the errors below in the console. What is the solution for this?

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 16:21:37 GMT

Geoffery,

It looks like you are having issues resolving the esri JS API urls. I just tested with Chrome Add-On 200 OK and had no issue so I am not sure what to tell you.

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 16:56:46 GMT

I have tried debugging it; removing the scale bar and changing the legend, it seems that it's getting hung up in either of these functions.

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 17:36:29 GMT

Geoffery,

Do you have a true web server on your machine? If so I would recommend adding the html page to your standard web server and test there.

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 17:42:22 GMT

I have done so, and am still receiving the same errors. I am debugging now

by stepping through the legend and scale bar functions.

On Fri, Mar 11, 2016 at 9:37 AM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 17:56:10 GMT

Geoffery,

That is very strange as I have that exact sample code running on my machine without issue. Is your network environment blocking the esri urls? Are you running from the file system or actually using localhost or machine name url?

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 18:00:59 GMT

I am running using localhost, I set up a virtual directory in IIS 6. Now

that I think of it, JSAPI 3.16 probably requires 4.5 .NET, I am on 3.5.

Would this cause the error?

On Fri, Mar 11, 2016 at 9:56 AM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 18:05:59 GMT

Geoffery,

There is no .Net dependency at all using the JS API. Can you just test this urls by pasting it into your browsers address bar:

https://js.arcgis.com/3.16/dijit/themes/claro/claro.css

Do you get access to the above link or do you get an error?

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 18:08:47 GMT

I have access.

On Fri, Mar 11, 2016 at 10:07 AM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 18:19:44 GMT

Geoffery,

Very strange... Can you edit all the urls in the code to use http instead of https.

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Fri, 11 Mar 2016 18:26:47 GMT

I still receive the errors when replacing HTTPS with HTTP

On Fri, Mar 11, 2016 at 10:20 AM, Robert Scheitlin, GISP <geonet@esri.com>

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Fri, 11 Mar 2016 18:34:57 GMT

Geoffery,

Sorry I am at the end of my ability to help with this then. It definitely seems like a network issue.

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Mon, 14 Mar 2016 22:14:13 GMT

I figured out the error with this, there was a typo in line 141.

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Tue, 15 Mar 2016 16:36:26 GMT

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?

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Sun, 12 Dec 2021 02:56:22 GMT

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>

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Tue, 15 Mar 2016 18:49:55 GMT

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.

Re: Spatial Intersection of geocoded points in JSAPI

RobertScheitlin__GISP — Tue, 15 Mar 2016 19:11:45 GMT

Geoffery,

I don't exactly understand the question... can you expound on this?

Re: Spatial Intersection of geocoded points in JSAPI

GeoffreyWest — Tue, 15 Mar 2016 19:25:28 GMT

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.