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.

  • 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, 2018 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, 2018 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, 2018 at 16:38

1 Answer 1


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' });


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) {
    features: res.features,
    updateLocationEnabled: true,

zoomToPoint(zoomLong: number, zoomLat: number) {
  var point = new Point([zoomLong, zoomLat]);
    target: point,
    zoom: 15,

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

  • Thanks. How do you get "[selectedGraphic]"?
    – Phillip
    Feb 23, 2018 at 15:00
  • i've edited my answer
    – LMokrane
    Feb 23, 2018 at 16:07
  • Thanks. I can see what is intended. But, result array is always empty.
    – Phillip
    Feb 23, 2018 at 19:17
  • i've edited again my answer
    – LMokrane
    Feb 24, 2018 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, 2018 at 22:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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