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?

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>
  • 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 Dec 14 '17 at 14:41
0

@Bill Chappell How could I set the template settings showed above to a DIV id="quickLook" instead of a popupTemplate. I am in need to display each feature thumbnail in a DIV.

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.