JSAPI 4.1 Action Bar Find Closest

ArcGIS JS API 4.1

by Alex Azuero

HTML

<script src="https://js.arcgis.com/4.1/init.js"></script>
<link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
<script type="text/javascript">
  var dojoConfig = {
    async: true
  };

</script>
<div id="viewDiv"></div>

CSS

html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }

JavaScript

require([
  "esri/Map",
  "esri/views/MapView",
  "esri/layers/FeatureLayer",
  "esri/layers/GraphicsLayer",
  "esri/Graphic",
  "esri/symbols/SimpleMarkerSymbol",
  "esri/geometry/geometryEngine",
  "esri/geometry/Point",
  "esri/geometry/Multipoint",
  "dojo/domReady!"
],
function(
	Map, 
  MapView,
  FeatureLayer,
  GraphicsLayer,
  Graphic,
  SimpleMarkerSymbol,
  GeometryEngine,
  Point,
  Multipoint
  ) {
  var map = new Map({
    basemap: "streets"
  });
  
  var viewOptions = {
    container: "viewDiv",
    map: map,
    center: [-87.6232194, 41.881610],
    zoom: 16
  };
  
  var symbol = new SimpleMarkerSymbol({
    style: "square",
    color: "blue",
    size: 20
  });

  // 2D:
  var view = new MapView(viewOptions);
  var gl = new GraphicsLayer();
  var fl = new FeatureLayer({
    url: "https://services1.arcgis.com/g2TonOxuRkIqSOFx/arcgis/rest/services/Bike_Racks/FeatureServer/0",
    outFields: ["*"],
    popupTemplate: {
          title: "{RackID}",
          content: [{
            type: "fields",
            fieldInfos: [{
              fieldName: "RackID",
              label: "Rack ID"
            }, {
              fieldName: "Community_Name",
              label: "Community Name"
            }]
          }],
          actions: [{
            id: "search-nearby",
            image: "https://www.google.com/images/branding/product/ico/googleg_lodp.ico",
            title: "Search Nearby"
          }]
        }
  });
  map.addMany([fl, gl]);
  

  
  view.then(function() {
  	var popup = view.popup;
    popup.viewModel.on("trigger-action", function(evt) {
    	if(evt.action.id === 'search-nearby') {
      	fl.queryFeatures().then(function(featureSet) {
          var multiPoint = new Multipoint();
          featureSet.features.forEach(function(feature) {
          	if(feature != popup.selectedFeature) {
            	multiPoint.addPoint(feature.geometry);
            } else {
            	console.log('found current');
            }
          });
   ...