1 
var featureLayer = new FeatureLayer({
      url: "https://services.arcgis.com/8MqUfIH3ilrffIf0/arcgis/rest/services/aneityum_SPEED_example_30May2017_geo/FeatureServer",
      outFields: ["*"],
      popupTemplate: {
        title: "{ipa}",
        content: "<p><b>Definition:</b> {gloss}</p>" + "<p>Definition provided by: {authority}</p>",
        type: "media",
        mediaInfos: [{
          title: "test",
          //caption: "DEF: {gloss}\n Definition provided by: {authority}",
          type: "image",
          value: {
            sourceUrl: "{image_link}"
            //linkUrl: "{image_link}"
          }
        }]
      }
    });

I'm trying to put images into my popup (using ArcGIS Javascript API), the links to which are included within the GeoJSON file in the map server. However, the media feature does not seem to be working––the "test" title is not even showing up. Any ideas as to why?

Improve this question

1 Answer 1

Reset to default
1

This will work: It's the way you defined your popup that's causing the problem. 

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">


    <title>Info Window Lite</title>

    <link rel="stylesheet" href="https://js.arcgis.com/3.20/esri/css/esri.css">
    <style>
      html, body, #mapDiv { height: 100%; margin: 0; padding: 0; } 
    </style>

    <script src="https://js.arcgis.com/3.20/"></script>
    <script>

      require([
        "esri/map", 
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function(
          Map,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct
         ) {

        var map = new Map("mapDiv", {
          basemap: "topo",
      center: [169.78,-20.23],
      zoom: 16
        });

        var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        var template = new InfoTemplate();
        template.setTitle("<b>${image}</b>");
        template.setContent('<img src=${image_link} alt="View" style="width:304px;height:228px;">');

        //add a layer to the map
        var featureLayer = new FeatureLayer("https://services.arcgis.com/8MqUfIH3ilrffIf0/ArcGIS/rest/services/aneityum_SPEED_example_30May2017_geo/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["image" , "image_link"]
        });
        map.addLayer(featureLayer);

        map.infoWindow.resize(300, 300);

      });
    </script>
  </head>

  <body>
    <div id="mapDiv"></div>
  </body>

</html>
Improve this answer
1
  • This example seems for JS API version 4 whereas the OP tagged version 4. I don't see any "FeatureLayer.MODE_ONDEMAND" in the newer API...
    – umbe1987
    Commented Dec 14, 2017 at 14:41

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.