4

Using esri javascript api 4.3 in an Angular 2 application.

I initially generate the map using this code:

OnInit() {
  this.map = new Map({
    basemap: 'streets'
  });

  this.map.layers.add(new FeatureLayer({
    url: 'http://test/rest/services/Project_map/MapServer/0', 
    id: '0',
    visible: true,
    outFields: ["*"],
    popupTemplate: this.jobsTemplate
  }));

  this.view = new MapView({
    container: "viewDiv",
    map: this.map,
    center: new Point({
      x: -111.876,
      y: 40.758,
    }),
    zoom: 12,
    rotation: 0
  });
}

When a feature on the map is clicked I get a popup containing the values for that feature. That works fine.

There is also a table that has a row for each feature on the map.

When a table row is clicked, I execute the following code, passing into it the lat and long for that feature:

zoomToPoint(zoomLong: number, zoomLat: number) {
  this.view.center = new Point({x: zoomLong, y: zoomLat});
  this.view.zoom = 15;
  this.view.popup.open({location: this.view.center});
}

I get a popup at the correct location. But, the popup is empty.

I want it to use the popupTemplate assigned to the feature layer and containing the values for the feature at that location.

Just like what happens if I click on the feature.

3
  • I think this example might be useful. Mainly you would want to click a feature, not a map point, by using query. – NettaB Feb 22 '18 at 22:31
  • Thanks NettaB. Yeah. I had chased my tail for a while trying to follow that example. It says to use "features: [result]" in the view.popup.open method. But, it is not clear what "[result]" is supposed to be. – Phillip Feb 23 '18 at 14:56
  • You can fiddle with their examples, using the sandbox environment. For me it's the only way to understand their examples. – NettaB Feb 23 '18 at 16:38
2

According to the doc https://developers.arcgis.com/javascript/latest/api-reference/esri-widgets-Popup.html#open you have to either specify -along with the location- the title and content to the popup, or the features of the selected point.

this.view.popup.open({ location: this.view.center, title: 'foo', content: 'bar' });

or

this.view.popup.open({ location: this.view.center, features: [selectedGraphic]});

Edit: here is another shot, with a query to your feature layer, to select the features placed at the coordinates from your table

function qLayer(pt) {
  var query = layer.createQuery();
  query.geometry = pt;
  query.spatialRelationship = "intersects";
  return layer.queryFeatures(query);
}
function showPopup(res) {
  view.popup.open({
    features: res.features,
    updateLocationEnabled: true,
  });
}

zoomToPoint(zoomLong: number, zoomLat: number) {
  var point = new Point([zoomLong, zoomLat]);
  qLayer(point).then(showPopup);
  view.goTo({
    target: point,
    zoom: 15,
  });
}

here is a fiddle to play with: https://jsfiddle.net/0tkx4091/17/ click on the filename, above the map

18
  • Thanks. How do you get "[selectedGraphic]"? – Phillip Feb 23 '18 at 15:00
  • i've edited my answer – LMokrane Feb 23 '18 at 16:07
  • Thanks. I can see what is intended. But, result array is always empty. – Phillip Feb 23 '18 at 19:17
  • i've edited again my answer – LMokrane Feb 24 '18 at 15:54
  • The query works great. The results being passed to "showPopup" do contain the correct feature and all the attributes are correct. However, the popup still does not pop up. The fiddle does exactly what I am trying to do. But, I cannot find what is different. – Phillip Feb 25 '18 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.