topic Re: ArcGIS JS API vs 4.10 Add Feature Thumbnail to a DIV in ArcGIS JavaScript Maps SDK Questions

ArcGIS JS API vs 4.10 Add Feature Thumbnail to a DIV

JuliermePinheiro — Mon, 11 Feb 2019 18:46:16 GMT

Dear ArcGIS developers and users,

I would like to add add a thumbnail related to each feature on a mapView on click or click on next feature this latter due to features overlapping.

My GeoJSON has an attribute <thumbnails> which has the path for the thumbnails "./images/thumbs.svg"

I have a <div id="quickLook"> that displays the thumbnails. I have FeatureLayer Function as shown bellow to create the layer.

Here is what would like to do: I want to display through the quickLook DIV the features thumb.svg on a mouse click over the feature or when next feature button is clicked in case or overlapping. Could someone point me any starting point to achieve that on ArcGIS API JS 4.10?

Thank you for your time in advance.

function createForestLayer(graphics) { if (graphics) { wgs84Graphics = graphics; } else { graphics = wgs84Graphics; } // display projected graphics as a FeatureLayer countriesLayer = new FeatureLayer({ title: "Forest area by country", source: graphics, objectIdField: "OBJECTID", fields: fields, popupTemplate: pTemplate, renderer: myRenderer,

Any help on that will be very appreciated

Kind regards

Julierme

Re: ArcGIS JS API vs 4.10 Add Feature Thumbnail to a DIV

JuliermePinheiro — Mon, 11 Feb 2019 22:15:09 GMT

Hi all,

regarding my previous question. Following the information in here and discussed in here, in order to add the feature thumbnail to the Div element <div id="quickLook">, I did the following.

function createForestLayer(graphics) {
        if (graphics) {
          wgs84Graphics = graphics;
        } else {
          graphics = wgs84Graphics;
        }
        // display projected graphics as a FeatureLayer
        countriesLayer = new FeatureLayer({
          title: "Cosmo Skymed Images",
          source: graphics,
          objectIdField: "OBJECTID",
          fields: myFields,

renderer: myRenderer,

popupTemplate: myPopup,

          template: {
                           name: "{tp_produto}",
                           thumbnail: '<img src=${thumbnail} alt="View" style="width:304px;height:228px;">'

}

})

}

{thumbnail} attribute contains the path for the feature thumbnail.

Could someone tell me if I am on the right track and if the template settings are correct?

I appreciated your time

Julierme