Feature Layer and its related Thumbnails

JuliermePinheiro · ‎02-12-2019

Hi,

I am trying to display a feature layer thumbnail in a <div id="quickLook"></div>. On click or next feature button click I want to display the layer thumbnail. The path for the thumbnail is in a GeoJSON Attribute <thumbnail>. I am hitting a wall trying to figure out to accomplish that. My first attempt bellow was not successful:

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

renderer: myRenderer,

popupTemplate: myPopup,

template: createTemplate

})

function createTemplate(){
const myFeatureTemplate = new FeatureTemplates({

container: "quickLook",
layers: countriesLayer,
filterFunction: createItem
});
}

function createItem(){
const myTemplate = new TemplateItem({
layer: countriesLayer,
template: myFeatureTemplate,
thumbnail: {
contentType: "png",
imageData: "./data/satellite.png",
height: 300,
width: 300
}
});
}

Any help on that will be very appreciated

Kind regards

Julierme

RobertScheitlin__GISP · ‎02-19-2019

Julierme,

Have mouse over graphic event in the 4.x API is complicated but this thread should get you going:

https://community.esri.com/thread/192980-viewhittest-throwing-error-when-triggered-by-views-pointer-...

View solution in original post

RobertScheitlin__GISP · ‎02-12-2019

Julierme,

Are you wanting to have a div containing the layers symbol in it?

//requires
'esri/symbols/jsonUtils',
'dojox/gfx',
...

var mySurface = gfx.createSurface(iconDiv, 40, 40); //iconDiv is the html div you are wanting the symbol in.
var descriptors = jsonUtils.getShapeDescriptors(symbol);// symbol is the graphics symbol
if(descriptors.defaultShape){
  var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
  shape.applyTransform({ dx: 20, dy: 20 });
}‍‍‍‍‍‍‍‍‍‍‍

JuliermePinheiro · ‎02-13-2019

Dear Robert,

Thank you very much for your reply. Before digging into the code you provided, let me say something else, I am not trying to set a symbol for the layer features as in 1 and 2. Here is, I have a GeoJSON file for the footprint of satellite sar images. When I click on the overlay, sar images footprint, I want to display the thumbnail (png/svg) in a div id="quickLook". Each feature, image footprint, has a thumbnail which path is in the GeoJSON attribute thumbnail.

The div is a quickLook of the sar image. As was discussed in 3, they did this for a popup, but I want to do in a div element. So, as I understood, where your code says symbol, I can use ${thumbnail}, GeoJSON field?

I appreciated your time.

Kind regards

Julierme

RobertScheitlin__GISP · ‎02-13-2019

Julierme,

So if the geoJSON has the url to the image you wish to add then just use domConstruct to create a new img element and place it into your quickLook div.

JuliermePinheiro · ‎02-18-2019

Dear Robert,

Thank you very much for your reply and for pointing to the use of domConstruct. Following the instructions in [1], and configuring the HTML as shown in (Code 1) bellow, I created the function setContent (Code 2) and I am hitting the (Error 1). And lastly, I have the following requirements for dojo in my JS: dojo/dom-construct, dojo/dom, dojo/on, dojo/domReady!,. Any comment and directions on how to solve the error I am facing will bery appreciated.

Code 1

Code 2

function setContent(){
// create a chart for example
var lookQuick = domConstruct.create("img",
{

src: "./images/satellite.png",
title: "satellite",
style: "position: relative;max-width: 200px;bottom: 1px;right: 1px;padding: 8px;"

});

domConstruct.place(lookQuick, this.container);

}

Error 1

Something went wrong. TypeError: "b is null"

place https://js.arcgis.com/4.10/:96 setContent http://localhost:8080/sar-catalogo/script/satellite_path.js:406 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 p https://js.arcgis.com/4.10/:136 c https://js.arcgis.com/4.10/:136 then https://js.arcgis.com/4.10/:139 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 k https://js.arcgis.com/4.10/:507 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 b https://js.arcgis.com/4.10/:137 c https://js.arcgis.com/4.10/:136 e https://js.arcgis.com/4.10/:136 resolve https://js.arcgis.com/4.10/:138 g https://js.arcgis.com/4.10/:150 m https://js.arcgis.com/4.10/:153

satellite_path.js:345:3

ON THE OTHER HAND

Following the discussion in [2], I tried using domClass "dojo/dom-class" in order to use domConstruct. I do not see any error message in the console, but the image is not placed in the div container id="quickLook" as shown bellow. Any comment on this issue will very much appreciated.

HTML

JS

function setContent(){
// create a chart for example
var lookQuick = domConstruct.create("img",
{

src: "./images/satellite.png",
title: "satellite",
style: "position: relative;max-width: 200px;bottom: 1px;right: 1px;padding: 8px;"

});

domClass.add(lookQuick, 'quickLook');

}

My apologies for the long email

Kind regards

Julierme

RobertScheitlin__GISP · ‎02-18-2019

In code 2 what do you get when you console.log(this.container); ?

JuliermePinheiro · ‎02-18-2019

Hi Robert,

Thank you very much for your reply.

The response is: undefined

Kind Regards

RobertScheitlin__GISP · ‎02-18-2019

So that is your issue. You need to a reference to the content pane and you are attempting to use data-dojo-attach-point which is normally done for templated widgets. You seen to be using JS API 4.10 but I am not sure if you are building a widget using dojos base widget.

JuliermePinheiro · ‎02-18-2019

Hi Robert,

Thank you very much for your reply and patience. I followed your discussion in here [1], and because of ArcGIS version it did not help me much.

I am running ArcGIS 4.10, and I tried adding _WidgetBase as shown in [2], but did not help either. Find the requirements in my JS bellow:

require([
"esri/views/MapView",
"esri/Map",
"esri/layers/FeatureLayer",
"esri/layers/support/FeatureTemplate",
"esri/layers/support/AttachmentInfo",
"esri/layers/OpenStreetMapLayer",
"esri/geometry/Point",
"esri/geometry/Polygon",
"esri/geometry/SpatialReference",
"esri/core/promiseUtils",
"esri/core/watchUtils",
"esri/widgets/Legend",
"esri/widgets/BasemapToggle",
"esri/widgets/LayerList",
"esri/widgets/FeatureTemplates",
"esri/widgets/FeatureTemplates/TemplateItem",
"esri/widgets/Widget",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/_base/declare",
"dijit/_TemplatedMixin",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/widgets/BasemapGallery",
"esri/config",
"esri/request",
"dojo/domReady!"
], function (
MapView,
Map,
FeatureLayer,
FeatureTemplate,
AttachmentInfo,
OpenStreetMapLayer,
Point,
Polygon,
SpatialReference,
promiseUtils,
watchUtils,
Legend,
BasemapToggle,
LayerList,
FeatureTemplates,
TemplateItem,
Widget,
domConstruct,
dom,
on,
declare,

_TemplatedMixin,
Button,
BorderContainer,
ContentPane,
BasemapGallery,
esriConfig,
esriRequest
) {

Any comment will be very appreciated.

Kind regards

Julierme

JuliermePinheiro · ‎02-18-2019

Hi Robert,

I also added these 3 items: "dijit/_WidgetsInTemplateMixin",
"dijit/_TemplatedMixin",
"dijit/_WidgetBase",

BUT it did not work either.

Kind regards

JUlierme