ArcGIS API for Javascript - Select Routes using Geocoded address and 1/4 Mile Buffer

JohnRitsko · ‎03-17-2015

I'm trying to get my application to accept a users address that hits our own geocoder and then zooms to said address, creates multiple buffer rings so our internal end users can see the distances from this address. Then I want to be able to select all routes within 1/4 Mile (1320 Feet) of this address point. ESRI has an example using the Draw tool and unfortunately that won't work for me. I've done my best to get their Draw tool and my geocode working but of course I need some direction on how to get the geocoded address going. With my geocoder creating a graphic as well as my buffers I'm not sure how to select routes using only the 1/4 mile buffer ring extent. Any ideas or directions for me to head will be greatly appreciated. Again, I need a user to be able to click on the layer and see information about it, but by not adding this layer as a feature layer I'm not sure how to go about that, then I need user to enter address, zoom to location and place a graphic and text of address, then create buffers, then select all Routes within 1/4 Mile Buffer Distance and display those Routes in the box provided along with the count of Routes.

When you first run the fiddle application you can select the area you want and it works great with the Draw Tool, of course not my end goal, but it's something. I tried to get a circle going as well but can't seem to figure it out. Any input is greatly appreciated.

A good local address is: 600 S Grand Central Pkwy if you wanted to test the geocoder to see what it does.

I have attached a jsfiddle link to what I have now: https://jsfiddle.net/vkk8qhof/16/

RobertScheitlin__GISP · ‎03-17-2015

John,

Here is your code cleaned up to remove Legacy and AMD styles being mixed together. And I have tried to hit all your wants in the list. I have made some comments on my changes.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <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>Find Address</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.13/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #map {
      border: solid 2px #808775;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin: 5px;
      padding: 0px;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 22px;
      left: 70px;
    }
  </style>
  <script>
    var map, roadsLayer;
    require([
    "dojo/dom",
    "dojo/on",
    "dojo/parser",
    "dojo/_base/array",
    "esri/map",
    "esri/basemaps",
    "esri/Color",
    "esri/geometry/Extent",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/InfoTemplate",
    "esri/dijit/Measurement",
    "esri/dijit/Geocoder",
    "esri/dijit/BasemapToggle",
    "esri/dijit/Scalebar",
    "esri/dijit/Legend",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/Font",
    "esri/symbols/TextSymbol",
    "esri/graphic",
    "esri/toolbars/draw",
    "esri/tasks/GeometryService",
    "esri/tasks/BufferParameters",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/config",
    "esri/SpatialReference",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/AccordionContainer",
    "dijit/TitlePane",
    "dojo/domReady!"], function (
      dom,
      on,
      parser,
      arrayUtils,
      Map,
      esriBasemaps,
      Color,
      Extent,
      FeatureLayer,
      ArcGISDynamicMapServiceLayer,
      InfoTemplate,
      Measurement,
      Geocoder,
      BasemapToggle,
      Scalebar,
      Legend,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Font,
      TextSymbol,
      Graphic,
      Draw,
      GeometryService,
      BufferParameters,
      Query,
      QueryTask,
      esriConfig,
      SpatialReference) {

      parser.parse();
      var locatorUrl = "http://gis.rtcsnv.com/arcgis/rest/services/Geocode/GISSDE_USStreets/GeocodeServer";
      //Proxy URL if you need to use a proxy
      //esriConfig.defaults.io.proxyUrl = "/Proxy/proxy.ashx";

      //global variables
      var defaultSymbol, highlightSymbol, resultTemplate;

      var resultTemplate = new esri.InfoTemplate("Name", "<tr><td>${NAME}</tr></td>");
      
      //Adding the map service as a dynamic layer instead of a FeatureLayer
      roadsLayer = new ArcGISDynamicMapServiceLayer("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer", {id:"Routes"});
      // Specify the infoTemplate for the one layer that is your bus routes layer in your map service
      roadsLayer.setInfoTemplates({
        2: { infoTemplate: resultTemplate }
      });
      //Set the visible layer just for the bus routes
      roadsLayer.setVisibleLayers([2]);


      //create map, set initial extent and disable default info window behavior
      map = new esri.Map("map", {
        basemap: "topo",
        center: [-115.147541, 36.164419],
        zoom: 12
      });
      //Add the layer now that the map is loaded
      map.on('load', function(){
        map.addLayer(roadsLayer);
      });


      /* ------------------------------------------------------------ */
      // GEOCODE
      // Symbol used for the Located Address (red circle)
      var geoSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 18,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
          new Color([255, 153, 153, 0.5]), 8),
        new Color([255, 0, 0]));

      var gsvc = null;
      gsvc = new GeometryService("http://gis.rtcsnv.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

      // Creates the Geocoder using the RTC Streets Geocoder
      var myGeocoders = [{
        url: locatorUrl,
        name: "LocateLocationByAddress",
        singleLineFieldName:  "Single Line Input",
        placeholder: "Search By Local Address"
      }];

      var geocoder = new Geocoder({
        map: map,
        autoComplete: true,
        arcgisGeocoder: false,
        geocoders: myGeocoders
      }, dom.byId("search"));
      geocoder.startup();

      geocoder.on("select", function showLocation(evt) {
        map.graphics.clear();
        point = evt.result.feature.geometry;
        doBuffer(point);
      });

      function doBuffer(point) {
        //map.graphics.clear();
        var params = new BufferParameters();
        params.geometries = [point];
        //buffer 200, 400, 600, 1320 feet.
        params.distances = [200, 400, 600, 1320];
        params.unit = GeometryService.UNIT_FOOT;
        // Set to Nevada State Plane East wkid 3421 in order to accurately calculate buffer distances
        params.bufferSpatialReference = new esri.SpatialReference({
            wkid: 3421
        });
        params.outSpatialReference = map.spatialReference;
        gsvc.buffer(params, showBuffer);
      }

      function showBuffer(geometries) {
        // Setting the color of the buffer circles
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([0, 0, 255, 0.65]), 2),
          new dojo.Color([0, 0, 255, 0.3]));
        var graphic;
        dojo.forEach(geometries, function (geometry) {
          graphic = new Graphic(geometry, symbol);
          map.graphics.add(graphic);
        });
        createAddress(point);
        locateRoads(geometries[geometries.length - 1]);
      }

      function createAddress(point) {
        var graphic = new Graphic(point, geoSymbol);
        // Adds the Graphics Symbol for the Address Point (Red)
        map.graphics.add(graphic);

        // This code will create the Text Element to show the address
        var displayText = document.getElementById("search_input").value;
        //  Setting the look of the fone
        var font = new Font(
          "12pt",
          Font.STYLE_NORMAL,
          Font.VARIANT_NORMAL,
          Font.WEIGHT_BOLD,
          "Calibri");
        var addressSymbol = new esri.symbol.TextSymbol(
          displayText,
          font,
          new Color("#000000"));
        addressSymbol.setAlign(TextSymbol.ALIGN_START);
        addressSymbol.setOffset(12, -4);
        // Adds the Geocoded Address Text Graphic only
        map.graphics.add(new Graphic(point, addressSymbol));
      }

      // RED
      highlightSymbol = new SimpleLineSymbol().setColor(new Color([255, 0, 0, 3.5]));

      function locateRoads(geom) {
        var queryTask = new esri.tasks.QueryTask("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer/2");
        var query = new Query();
        query.geometry = geom;
        query.outSpatialReference = map.spatialReference;
        query.outFields = ["NAME"];
        query.returnGeometry = true;
        queryTask.execute(query, addLinesToMap);
      }

      function addLinesToMap(featureSet) {
        var results = [];
        dojo.forEach(featureSet.features, function (feature) {
          map.graphics.add(feature.setSymbol(highlightSymbol));
          results.push('<tr><td>' + feature.attributes.NAME + '</tr></td>');
        });
        //display number of points in extent
        dojo.byId("inextent").innerHTML = results.length;
        //display list of points in extent
        dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
      }

    });
  </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" style="width:620px; height:380px; border:1px solid #000;" data-dojo-props="region:'center'">
        <div id="search"></div>
      </div>

      <!-- list points in extent -->
      <div id="resultsDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        <b># of Routes Selected = <span id="inextent">0</span></b>
        <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;"></div>
      </div>
    </div>
  </body>
</html>

View solution in original post

TomSellsted · ‎03-17-2015

John,

Your JSfiddle project looks like it uses references to internal ArcGIS servers, so I can't run your application.

You might take a look at using the new geometry engine in the latest version of Javascript API. It has a lot of functions built in to let the client do buffering, and selecting of features. You can find out more about it here:

esri/geometry/geometryEngine | API Reference | ArcGIS API for JavaScript

Regards,

Tom

JohnRitsko · ‎03-17-2015

It's working now. Give the fiddle a shot if you don't mind.

RobertScheitlin__GISP · ‎03-17-2015

John,

Here is your code cleaned up to remove Legacy and AMD styles being mixed together. And I have tried to hit all your wants in the list. I have made some comments on my changes.

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9" />
  <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>Find Address</title>

  <link rel="stylesheet" href="http://js.arcgis.com/3.13/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.13/esri/css/esri.css">
  <script src="http://js.arcgis.com/3.13/"></script>

  <style>
    html,
    body {
      padding: 0;
      margin: 0;
      height: 100%;
    }

    #map {
      border: solid 2px #808775;
      -moz-border-radius: 4px;
      -webkit-border-radius: 4px;
      border-radius: 4px;
      margin: 5px;
      padding: 0px;
    }

    #search {
      display: block;
      position: absolute;
      z-index: 2;
      top: 22px;
      left: 70px;
    }
  </style>
  <script>
    var map, roadsLayer;
    require([
    "dojo/dom",
    "dojo/on",
    "dojo/parser",
    "dojo/_base/array",
    "esri/map",
    "esri/basemaps",
    "esri/Color",
    "esri/geometry/Extent",
    "esri/layers/FeatureLayer",
    "esri/layers/ArcGISDynamicMapServiceLayer",
    "esri/InfoTemplate",
    "esri/dijit/Measurement",
    "esri/dijit/Geocoder",
    "esri/dijit/BasemapToggle",
    "esri/dijit/Scalebar",
    "esri/dijit/Legend",
    "esri/symbols/SimpleMarkerSymbol",
    "esri/symbols/SimpleLineSymbol",
    "esri/symbols/SimpleFillSymbol",
    "esri/symbols/Font",
    "esri/symbols/TextSymbol",
    "esri/graphic",
    "esri/toolbars/draw",
    "esri/tasks/GeometryService",
    "esri/tasks/BufferParameters",
    "esri/tasks/query",
    "esri/tasks/QueryTask",
    "esri/config",
    "esri/SpatialReference",
    "dijit/layout/BorderContainer",
    "dijit/layout/ContentPane",
    "dijit/layout/AccordionContainer",
    "dijit/TitlePane",
    "dojo/domReady!"], function (
      dom,
      on,
      parser,
      arrayUtils,
      Map,
      esriBasemaps,
      Color,
      Extent,
      FeatureLayer,
      ArcGISDynamicMapServiceLayer,
      InfoTemplate,
      Measurement,
      Geocoder,
      BasemapToggle,
      Scalebar,
      Legend,
      SimpleMarkerSymbol,
      SimpleLineSymbol,
      SimpleFillSymbol,
      Font,
      TextSymbol,
      Graphic,
      Draw,
      GeometryService,
      BufferParameters,
      Query,
      QueryTask,
      esriConfig,
      SpatialReference) {

      parser.parse();
      var locatorUrl = "http://gis.rtcsnv.com/arcgis/rest/services/Geocode/GISSDE_USStreets/GeocodeServer";
      //Proxy URL if you need to use a proxy
      //esriConfig.defaults.io.proxyUrl = "/Proxy/proxy.ashx";

      //global variables
      var defaultSymbol, highlightSymbol, resultTemplate;

      var resultTemplate = new esri.InfoTemplate("Name", "<tr><td>${NAME}</tr></td>");
      
      //Adding the map service as a dynamic layer instead of a FeatureLayer
      roadsLayer = new ArcGISDynamicMapServiceLayer("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer", {id:"Routes"});
      // Specify the infoTemplate for the one layer that is your bus routes layer in your map service
      roadsLayer.setInfoTemplates({
        2: { infoTemplate: resultTemplate }
      });
      //Set the visible layer just for the bus routes
      roadsLayer.setVisibleLayers([2]);


      //create map, set initial extent and disable default info window behavior
      map = new esri.Map("map", {
        basemap: "topo",
        center: [-115.147541, 36.164419],
        zoom: 12
      });
      //Add the layer now that the map is loaded
      map.on('load', function(){
        map.addLayer(roadsLayer);
      });


      /* ------------------------------------------------------------ */
      // GEOCODE
      // Symbol used for the Located Address (red circle)
      var geoSymbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE, 18,
        new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID,
          new Color([255, 153, 153, 0.5]), 8),
        new Color([255, 0, 0]));

      var gsvc = null;
      gsvc = new GeometryService("http://gis.rtcsnv.com/arcgis/rest/services/Utilities/Geometry/GeometryServer");

      // Creates the Geocoder using the RTC Streets Geocoder
      var myGeocoders = [{
        url: locatorUrl,
        name: "LocateLocationByAddress",
        singleLineFieldName:  "Single Line Input",
        placeholder: "Search By Local Address"
      }];

      var geocoder = new Geocoder({
        map: map,
        autoComplete: true,
        arcgisGeocoder: false,
        geocoders: myGeocoders
      }, dom.byId("search"));
      geocoder.startup();

      geocoder.on("select", function showLocation(evt) {
        map.graphics.clear();
        point = evt.result.feature.geometry;
        doBuffer(point);
      });

      function doBuffer(point) {
        //map.graphics.clear();
        var params = new BufferParameters();
        params.geometries = [point];
        //buffer 200, 400, 600, 1320 feet.
        params.distances = [200, 400, 600, 1320];
        params.unit = GeometryService.UNIT_FOOT;
        // Set to Nevada State Plane East wkid 3421 in order to accurately calculate buffer distances
        params.bufferSpatialReference = new esri.SpatialReference({
            wkid: 3421
        });
        params.outSpatialReference = map.spatialReference;
        gsvc.buffer(params, showBuffer);
      }

      function showBuffer(geometries) {
        // Setting the color of the buffer circles
        var symbol = new SimpleFillSymbol(
          SimpleFillSymbol.STYLE_SOLID,
          new SimpleLineSymbol(
            SimpleLineSymbol.STYLE_SOLID,
            new dojo.Color([0, 0, 255, 0.65]), 2),
          new dojo.Color([0, 0, 255, 0.3]));
        var graphic;
        dojo.forEach(geometries, function (geometry) {
          graphic = new Graphic(geometry, symbol);
          map.graphics.add(graphic);
        });
        createAddress(point);
        locateRoads(geometries[geometries.length - 1]);
      }

      function createAddress(point) {
        var graphic = new Graphic(point, geoSymbol);
        // Adds the Graphics Symbol for the Address Point (Red)
        map.graphics.add(graphic);

        // This code will create the Text Element to show the address
        var displayText = document.getElementById("search_input").value;
        //  Setting the look of the fone
        var font = new Font(
          "12pt",
          Font.STYLE_NORMAL,
          Font.VARIANT_NORMAL,
          Font.WEIGHT_BOLD,
          "Calibri");
        var addressSymbol = new esri.symbol.TextSymbol(
          displayText,
          font,
          new Color("#000000"));
        addressSymbol.setAlign(TextSymbol.ALIGN_START);
        addressSymbol.setOffset(12, -4);
        // Adds the Geocoded Address Text Graphic only
        map.graphics.add(new Graphic(point, addressSymbol));
      }

      // RED
      highlightSymbol = new SimpleLineSymbol().setColor(new Color([255, 0, 0, 3.5]));

      function locateRoads(geom) {
        var queryTask = new esri.tasks.QueryTask("http://gis.rtcsnv.com/arcgis/rest/services/Maps/PROD_ADA_CERT/MapServer/2");
        var query = new Query();
        query.geometry = geom;
        query.outSpatialReference = map.spatialReference;
        query.outFields = ["NAME"];
        query.returnGeometry = true;
        queryTask.execute(query, addLinesToMap);
      }

      function addLinesToMap(featureSet) {
        var results = [];
        dojo.forEach(featureSet.features, function (feature) {
          map.graphics.add(feature.setSymbol(highlightSymbol));
          results.push('<tr><td>' + feature.attributes.NAME + '</tr></td>');
        });
        //display number of points in extent
        dojo.byId("inextent").innerHTML = results.length;
        //display list of points in extent
        dojo.byId("results").innerHTML = "<table><tbody>" + results.join("") + "</tbody></table>";
      }

    });
  </script>
  </head>
  <body class="claro">
    <div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline',gutters:false" style="width:100%; height:100%;">
      <div id="map" data-dojo-type="dijit/layout/ContentPane" style="width:620px; height:380px; border:1px solid #000;" data-dojo-props="region:'center'">
        <div id="search"></div>
      </div>

      <!-- list points in extent -->
      <div id="resultsDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'bottom'">
        <b># of Routes Selected = <span id="inextent">0</span></b>
        <div id="results" style="width:400px; height:200px; border:1px solid #000; overflow:auto;"></div>
      </div>
    </div>
  </body>
</html>

JohnRitsko · ‎03-17-2015

Robert,

Thank you so much for taking the time to help me out with this. I have plugged your code in on my end and for some reason the geocode address isn't returning the routes. Perhaps I'm missing something here. Thank you again for taking the time to help out. You've always been such a great help.

RobertScheitlin__GISP · ‎03-17-2015

John,

That exact code is working for me. I just tested again.

JohnRitsko · ‎03-18-2015

For some reason the routes just aren't highlighting red and the whole count and list of routes within the 1/4 Mile aren't showing up for me. I've updated the Fiddle site and doesn't work on their either. Thank you again for your patience and helping me with this, much appreciated.

https://jsfiddle.net/vkk8qhof/17/

RobertScheitlin__GISP · ‎03-18-2015

John,

Your fiddle works great if you don't use a https url like you have in your fiddle link.

Select Routes Within Buffer - JSFiddle