ArcGIS JS API vs 4.10 Add Feature Thumbnail to a DIV

519
1
Jump to solution
02-11-2019 10:46 AM
JuliermePinheiro
New Contributor III

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

0 Kudos
1 Solution

Accepted Solutions
JuliermePinheiro
New Contributor III

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

View solution in original post

0 Kudos
1 Reply
JuliermePinheiro
New Contributor III

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

0 Kudos