TheKeithStewart / angular-esri-components

A set of Angular components to work with ArcGIS API for JavaScript v4.6
Apache License 2.0
43 stars 28 forks source link

Show popup or infobox on a map #22

Closed z3dmax closed 6 years ago

z3dmax commented 6 years ago

Hi, is it possible to show a popup or window box or something similar using this library? Is there any example? I've an Angular5 running project with everything right except popups.

 this.map.on('click', function($event) {
            // Here I need to show a popup of a clicked point using data stored into it's InfoTemplate
        });

Here original InfoTemplate Esri example:

TheKeithStewart commented 6 years ago

@z3dmax

The below example shows how you could create a feature layer that includes a configured popupTemplate. All that you would need to do at this point is add graphics to the feature layer that have attributes to map to the fields in the feature layer.

this.esriLoader
  .loadModules([
    'esri/layers/FeatureLayer',
    'esri/PopupTemplate',
    'esri/core/Collection',
    'esri/geometry/Point',
    'esri/renderers/SimpleRenderer',
    'esri/symbols/PictureMarkerSymbol'
  ])
  .then((FeatureLayer, PopupTemplate, Collection, Point, SimpleRenderer, PictureMarkerSymbol) => {
    const featureLayer = new FeatureLayer({
      fields: [
        {
          name: 'ObjectID',
          alias: 'ObjectID',
          type: 'oid'
        },
        {
          name: 'title',
          alias: 'title',
          type: 'string'
        },
        {
          name: 'place',
          alias: 'place',
          type: 'string'
        }
      ],
      objectIdField: 'ObjectID',
      spatialReference: {
        wkid: 4326
      },
      geometryType: 'point',
      popupTemplate: new PopupTemplate({
        title: '{title}',
        content: '{place}'
      }),
      title: layer.name,
      id: layer.id,
      source: new Collection(),
      renderer: new SimpleRenderer({
        symbol: new PictureMarkerSymbol({
          url: 'url/of/some/icon',
          width: 18,
          height: 18
        })
      })
    });
    this.map.add(featureLayer);
  });
TheKeithStewart commented 6 years ago

@z3dmax I had forgotten about an example that I put together recently that shows putting a graphic on a map that includes a popup. Take a look at this.