Search widget Geocoding service with another feature layer

Henryobaseki · ‎07-31-2017

Hi All,

I need help again please.

I have a geocoding service which when you search address in the search widget. It returns approximate xy coordinates.

I have a feature layer also as one of the sources in my search widget

if a user types in an address in the search box and the result of the search is from the geocoding service,

I want the code to identity the result as it works now see below code.

I also want the code to get the nearest feature layer source which are added as points in the code.

Any help on how to get the nearest feature source layer?

Thanks in advance

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
<title>DevLabs - Search and Geocode</title>
<style>
  html, body, #viewDiv {
    padding: 0;
    margin: 0;
    height: 100%;
    width: 100%;
  }
</style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.3/esri/css/main.css">
<script src="https://js.arcgis.com/4.3/"></script>
  
  <script>
require([
  "esri/Map",
  "esri/views/MapView",
  "esri/widgets/Search",
  "esri/layers/FeatureLayer",
  "dojo/domReady!"
], function(Map, MapView, Search, FeatureLayer) {
  
  var map = new Map({
    basemap: "streets-vector"
  });
  
  // Add the layer to the map
  var trailsLayer = new FeatureLayer({
    url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/myApp/FeatureServer/0",
  });
  
  map.add(trailsLayer); // Optionally add layer to map
   // Add the layer to the map
  var trailsLayerr = new FeatureLayer({
    url: "https://services7.arcgis.com/uE69mPI6U3rpSmCT/arcgis/rest/services/AddressA_csv/FeatureServer/0",
  });
  
  map.add(trailsLayerr); // Optionally add layer to map
  
  var view = new MapView({
    container: "viewDiv",  
    map: map,
   zoom: 17,
 center: [0.46564130, 51.736810] // longitude, latitude
  });
  
  // Search
  
  var search = new Search({
    view: view
  });
  search.defaultSource.withinViewEnabled = true; // Limit search to visible map area only
  view.ui.add(search, "top-right"); // Add to the map

  // Add the trailheads as a search source
  search.sources.push({
    featureLayer: trailsLayer,
     searchFields: ["Postcode", "UPRN", "ADDRESS" ],
  displayField: "ADDRESS",
  exactMatch: false,
  outFields: ["*"],
   resultGraphicEnabled: true,
    name: "ADDRESS",
  placeholder: "example:  CM2 0HU",
    popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: {Postcode}</br>UPRN: {UPRN}</br>ADDRESS: {ADDRESS}",
        overwriteActions: true
      
      }
  });
  search.sources.push({
    featureLayer: trailsLayerr,
     searchFields: ["Postcode", "UPRN", "ADDRESS" ],
  displayField: "ADDRESS",
  exactMatch: false,
  outFields: ["*"],
   resultGraphicEnabled: true,
    name: "Postcode",
  placeholder: "example:  CM2 0HU",
    popupTemplate: { // autocasts as new popupTemplate()
        title: "Post Code: {Postcode}</br>UPRN: {UPRN}</br>ADDRESS: {ADDRESS}",
        overwriteActions: true
      
      }
  });
  
  
  
    

 
  
  
  
  
  
  // Find address
  
  function showPopup(address, pt) {
    view.popup.open({
      title: "Find Address Result",
      content: address + "<br><br> Lat: " + Math.round(pt.latitude * 100000)/100000 + " Lon: " + Math.round(pt.longitude * 100000)/100000,
      location: pt
    });
  }
  
  view.on("click", function(evt){
    search.clear(); 
    view.popup.clear();
    
    var locatorSource = search.defaultSource;
    locatorSource.locator.locationToAddress(evt.mapPoint)
      .then(function(response) {
        var address = response.address.Match_addr;
       
       
        // Show the address found
        showPopup(address, evt.mapPoint);
      }, function(err) {
        // Show no address found
        showPopup("No address found for this location.", evt.mapPoint);
      });
  });

});</script>
</head>
<body>
  <div id="viewDiv"></div>
</body>
</html> 
 
 

.