Enable default popup of a map service

ZahidMia · ‎05-28-2019

I am an AGOL beginner and looking for to create HTML file similar to AGOL map. When I add a map service into AGOL map (http://arcg.is/1iqvOu ) it shows the popups. However, I can't view any popup after adding a feature layer into a a html map as below (please see the attachement):

var featureLayer = new FeatureLayer({ url: "xxxxxxxxx"}); map.add(featureLayer);

How can I enable the default popup without any customisation. I have hundreds of layer and don't like to define the popup for each layer, but prefer to have the popup just same as checking "Show Pop-ups" in "Configure Pop-up" section of AGOL map.

Modifying the html is highly appreciated.

Egge-Jan_Pollé · ‎05-29-2019

Hi Zahid Mia‌,

I have had a quick look at your parks map. Don't know if it is possible to turn on the popup as is.

Think you have to have a look at popupTemplate. See below - full working example at the bottom.

HTH,

Egge-Jan

I have tried two options:

1.

      // showing all fields, but hyperlink not working
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "{*}"
      };‍‍‍‍‍‍‍‍‍‍

2.

      // html configuration of popup, with working hyperlink
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
      };
‍‍‍‍‍

Full working example:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>National Parks in England</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>
  

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList"
    ], function (Map, MapView, FeatureLayer, LayerList) {
      var map = new Map({
        basemap: "topo-vector",
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-2.2297829, 53.0219186],
        zoom: 7
      });

      // showing all fields, but hyperlink not working
      <!-- var popupTemplate = { // autocasts as new PopupTemplate() -->
        <!-- title: "{Name}", -->
        <!-- content: "{*}" -->
      <!-- }; -->

      // html configuration of popup, with working hyperlink
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
      };
      
      var parksLayer = new FeatureLayer({
        url: "https://services.arcgis.com/JJzESW51TqeY9uat/ArcGIS/rest/services/National_Parks_England/FeatureServer/0",
        popupTemplate: popupTemplate
      }); 
      map.add(parksLayer);

      // Following section for showing layer list. You need a require "esri/widgets/LayerList" and function LayerList
      var layerList = new LayerList({
        view: view,

        // This section is for adding legend to each layer
        listItemCreatedFunction: function (event) {
          const item = event.item;
          if (item.layer.type != "group") {
            item.panel = {
              content: "legend",
              open: false 
            };
          }
        }
      });
      // Adds widget below other elements in the top right corner of the view
      view.ui.add(layerList, "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

View solution in original post

Egge-Jan_Pollé · ‎05-29-2019

Hi Zahid Mia‌,

I have had a quick look at your parks map. Don't know if it is possible to turn on the popup as is.

Think you have to have a look at popupTemplate. See below - full working example at the bottom.

HTH,

Egge-Jan

I have tried two options:

1.

      // showing all fields, but hyperlink not working
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "{*}"
      };‍‍‍‍‍‍‍‍‍‍

2.

      // html configuration of popup, with working hyperlink
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
      };
‍‍‍‍‍

Full working example:

<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>National Parks in England</title>
  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 100%;
      width: 100%;
    }
  </style>
  <link rel="stylesheet" href="https://js.arcgis.com/4.11/esri/css/main.css">
  <script src="https://js.arcgis.com/4.11/"></script>
  

  <script>
    require([
      "esri/Map",
      "esri/views/MapView",
      "esri/layers/FeatureLayer",
      "esri/widgets/LayerList"
    ], function (Map, MapView, FeatureLayer, LayerList) {
      var map = new Map({
        basemap: "topo-vector",
      });

      var view = new MapView({
        container: "viewDiv",
        map: map,
        center: [-2.2297829, 53.0219186],
        zoom: 7
      });

      // showing all fields, but hyperlink not working
      <!-- var popupTemplate = { // autocasts as new PopupTemplate() -->
        <!-- title: "{Name}", -->
        <!-- content: "{*}" -->
      <!-- }; -->

      // html configuration of popup, with working hyperlink
      var popupTemplate = { // autocasts as new PopupTemplate()
        title: "{Name}",
        content: "<p>Code: {CODE}</p><br><a target='blank' href='{HOTLINK}'>More info</a>"
      };
      
      var parksLayer = new FeatureLayer({
        url: "https://services.arcgis.com/JJzESW51TqeY9uat/ArcGIS/rest/services/National_Parks_England/FeatureServer/0",
        popupTemplate: popupTemplate
      }); 
      map.add(parksLayer);

      // Following section for showing layer list. You need a require "esri/widgets/LayerList" and function LayerList
      var layerList = new LayerList({
        view: view,

        // This section is for adding legend to each layer
        listItemCreatedFunction: function (event) {
          const item = event.item;
          if (item.layer.type != "group") {
            item.panel = {
              content: "legend",
              open: false 
            };
          }
        }
      });
      // Adds widget below other elements in the top right corner of the view
      view.ui.add(layerList, "top-right");
    });
  </script>
</head>

<body>
  <div id="viewDiv"></div>
</body>
</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

ZahidMia · ‎05-29-2019

Hi Egge-Jan

Thank you very much. That's the solution I was looking for. I have had a look to popupTemplate but missed "*" for content. I was looking for something to loop through all fields.

However, if you don't mind I like to learn something more from you.

When we add the service in AGOL map, it popups a customised version, though no popup template is defined. But in the HTML it popups all fields, I can understand it can be customised. My query is, how can we do this, is there any way to read the popup template defined in the feature service.

Thanks again for your support.

Regards

Zahid

Egge-Jan_Pollé · ‎05-29-2019

Hi Zahid,

You might login to ArcGIS Online Assistant, look for your item and click I want to... > View an Item's JSON

Under popupInfo you will find a JSON description of the popup in the Map Viewer. But I don't think you can use this description in your JavaScript application... I think you have to do some additional configuration.

Let's see what others say about this.

HTH,

Egge-Jan