topic Re: Feature Layer and its related Thumbnails in ArcGIS JavaScript Maps SDK Questions

Feature Layer and its related Thumbnails

JuliermePinheiro — Tue, 12 Feb 2019 21:36:01 GMT

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

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:27 GMT

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 });
}‍‍‍‍‍‍‍‍‍‍‍

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Wed, 13 Feb 2019 15:47:15 GMT

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

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Wed, 13 Feb 2019 17:49:21 GMT

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.

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Mon, 18 Feb 2019 12:40:50 GMT

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

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

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Mon, 18 Feb 2019 17:08:36 GMT

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

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Mon, 18 Feb 2019 19:20:19 GMT

Hi Robert,

Thank you very much for your reply.

The response is: undefined

Kind Regards

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Mon, 18 Feb 2019 19:41:32 GMT

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.

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Mon, 18 Feb 2019 20:43:34 GMT

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:

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

Any comment will be very appreciated.

Kind regards

Julierme

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Mon, 18 Feb 2019 20:57:28 GMT

Hi Robert,

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

BUT it did not work either.

Kind regards

JUlierme

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Mon, 18 Feb 2019 22:11:56 GMT

You seem pretty confused in your programming. When developing templated widget they are normally in a separate widget.js file and have their own widget.html which is the html template for the widget. I think you want to forget the whole templated widget thing an dojo mixins. Just give the content pane and id and use that it to get a reference to it.

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Tue, 19 Feb 2019 15:35:09 GMT

Hi Robert,

I got it. I was following the instruction given here in [1], which used the this.<data-dojo-attach-point>, but after changing to this.<id>. The image was loaded.

Thank you very much for your help.

However, before closing this topic I have been hitting a wall trying to figure out on how to put the GeoJSON thumbnail attribute (which had the image path) out of a function.

I have the function createGraphics bellow, and graphic.attributes.thumbnail has the image path information. My question is how: I can get the value in graphic.attributes.thumbnail out of the function and have the value changing on mouse click over the feature?

function createGraphics(response) {
const data = response.data;

if (!data) {
data = jsonData;
} else {
jsonData = data;
}

const graphicsPromise = promiseUtils.create(function(resolve,
reject) {

const graphics = data.features.map(function(feature, i) {
// create a polygon instance from the GeoJSON data
const polygon = new Polygon({
spatialReference: SpatialReference.WGS84
});

// read the GeoJSON's geometry and add to the polygon rings
feature.geometry.coordinates.forEach(function(coord) {
const coordinates = feature.geometry.type ===
"MultiPolygon" ? coord[0] : coord;
polygon.addRing(coordinates);
});

const graphic = {
geometry: polygon,
attributes: feature.properties
};

// Print the graphic object content
// console.log(graphic.attributes.thumbnail);
// alert(graphic.attributes.thumbnail);

return graphic;
});

resolve(graphics);
});

//alert(graphicsPromise);
return graphicsPromise;
}

Kind regards

Julierme

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Tue, 19 Feb 2019 16:32:43 GMT

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-move-event

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Thu, 28 Feb 2019 13:14:09 GMT

Dear Mr. Scheitlin,

Thank you very much for your reply. In the code bellow, I am facing three issues:

1 - On mouse click the quickLook element displays only the last thumbnail in the object (graphic.attributes.thumbnail = "./images/cloudy-night-3.svg" );

2 - Anywhere clicked on the view the event fires. I need the on mouse click event only over the feature and on next button in case of overlapping features.

3 - For overlapping features, by clicking next button, the event setQuickLook(does not update image in the quickLook element);

I wonder if you could provide me some paid support. In case, you are interested in guiding me in this project, write please to juliermeopensourcedeveloper@gmail.com.

I appreciated your time.

Kind regards

Julierme

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" conten="initial-scale=1,maximum-scale=1,user-scalable=no">
<title>Create a FeatureLayer with client side graphics - 4.10</title>

</head>
<body class="claro">

<div class="panel panel-primary panel-fixed">
<div class="panel-heading">
<h3 class="panel-title">Basemaps</h3>
</div>
<div class="panel-body">
<div id="basemapGallery"></div>
</div>
</div>

</div>

<div id="viewDiv" dojotype="dijit/layout/ContentPane" style="border:5px solid #000;">
<div id="loader" class="fa-5x">
<i class="fas fa-sync fa-spin"></i>

</div>


<div id="quickLook" data-dojo-type="dijit/layout/ContentPane" isClickable="true" data-dojo-attach-point="container">

</div>

</div>
<script src="./script/satellite_path.js"></script>

</body>
</html>

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",
"esri/widgets/BasemapGallery",
"esri/widgets/ScaleBar",
"dojo/dom-construct",
"dojo/dom",
"dojo/on",
"dojo/_base/declare",
"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,
BasemapGallery,
ScaleBar,
domConstruct,
dom,
on,
declare,
BorderContainer,
ContentPane,
BasemapGallery,
esriConfig,
esriRequest
) {

// let countriesLayer, wgs84Graphics;
var layer, graphic, graphics, graphicsPromise, legend, countriesLayer, wgs84Graphics;

// Run the loader Icon

const loadingDiv = document.getElementById("loader");

/******************************************************************************
* Create the map and view
*****************************************************************************/

var map = new Map({
basemap: "osm"
//ground: "world-elevation"
});

// Create MapView

var view = new MapView({
container: "viewDiv",
map: map,
center: [-54.4, -14.3 ],
zoom: 3,
// customize ui padding for legend placement
ui: {
padding: {
bottom: 15,
right: 0
}
}
});

function createBasemaps(){

// Create and add the maps from ArcGIS.com
var basemapGallery = new BasemapGallery({
showArcGISBasemaps: true,
view: view
}, "basemapGallery");
basemapGallery.startup();

// Listen to the basemap selection and set the title
on(basemapGallery, "onSelectionChange", function() {
dom.byId("userMessage").innerHTML = basemapGallery.getSelected().title;
});

}

createBasemaps();

var scaleBar = new ScaleBar({
view: view
});
// Add widget to the bottom left corner of the view
view.ui.add(scaleBar, {
position: "bottom-left"
});

view.when(function() {
// Request the earthquake data from USGS when the view resolves
getData()
.then(createGraphics) // then send it to the createGraphics() method
.then(createLayer)// when graphics are created, create the layer
.then(displayThumbnail)
.then(createLayerList)
.then(stopLoader)
.then(setQuickLook)
.catch(errback);
});

// Request the earthquake data
function getData() {
// data downloaded from the USGS at http://earthquake.usgs.gov/eartquakes/feed/v1.0/summary/ on 4/4/16
// week.json represent recorded earthquaes betweem 03/28/2016 and 04/04/2016

//var url = "https://developers.arcgis.com/javascript/latest/sample-code/layers-featurelayer-collection/live/data/week.json";
var url = "./data/cosmo_skymed_footprint_amapa_thumb.json";

esriConfig.request.corsEnabledServers.push(url);
var requestHandle = esriRequest(url, {
responseType: "json"
});
//console.log(requestHandle);
return requestHandle;
}

// Creates Graphics from GeoJSON data

function createGraphics(response) {
const data = response.data;

if (!data) {
data = jsonData;
} else {
jsonData = data;
}

graphicsPromise = promiseUtils.create(function(resolve,
reject) {

graphics = data.features.map(function(feature, i) {
// create a polygon instance from the GeoJSON data
const polygon = new Polygon({
spatialReference: SpatialReference.WGS84
});

graphic = {
geometry: polygon,
attributes: feature.properties
};

// Print the graphic object content
//console.log("I am the Thumbanail in the Graphics function: ", graphic.attributes.thumbnail);
console.log("I am graphics: ", graphics);
return graphic;
});
console.log("I am graphicsPromise: ", graphicsPromise);
console.log("I am graphics: ", graphics);
console.log("I am graphics attributes: ", graphics[0].attributes);
console.log("I am graphic: ", graphic);
resolve(graphics);
});

//alert(graphic.attributes.thumbnail);
return graphicsPromise;
}

function createLayer(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: [{
name: "OBJECTID",
alias: "ObjectID",
type: "oid"
},{
name: "co_seq_ima",
alias: "co_seq_ima",
type: "integer"
},{
name: "tp_produto",
alias: "tp_produto",
type: "string"

},{
name: "dt_coleta",
alias: "dt_coleta",
type: "string"

},{
name: "no_direcao",
alias: "no_direcao",
type: "string"

},{
name: "no_lado_im",
alias: "no_lado_im",
type: "string"
},{
name: "dt_indexac",
alias: "dt_indexac",
type: "string"

},{
name: "no_caminho",
alias: "no_caminho",
type: "string"

},{
name: "nu_area_km",
alias: "nu_area_km",
type: "double"

},{
name: "thumbnail",
alias: "thumbnail",
type: "string"

}],
popupTemplate: {
title: "{tp_produto}",
content: [{
type: "fields",
fieldInfos:[{
fieldName: "co_seq_ima",
label: "Image ID",
visible: true
},{
fieldName: "tp_produto",
label: "Product",
visible: true
},{
fieldName: "dt_coleta",
label: "Acquisition Date",
visible: true
},{
fieldName: "no_direcao",
label: "Orbit Direction",
visible: true
},{
fieldName: "no_lado_im",
label: "Imaging Side",
visible: true
},{
fieldName: "dt_indexac",
label: "Indexation Date",
visible: true
},{
fieldName: "no_caminho",
label: "URL",
visible: true
},{
fieldName: "nu_area_km",
label: "Area",
visible: true
}]
},{
type: "text",
text: "In God we trust. God blesses Amazonia."

},{
type: "media",
mediaInfos:[{
title: "{tp_produto}",
type: "image",
caption: "Sar Images",
value: {
linkURL: "http://172.21.5.187/",
sourceURL: "{thumbnail}"
}

}]
},{

type: "attachments",
attachmentInfos:[{
contentType: "image/jpg",
name: "ficus-microcarpa-tree-3",
url: "https://selectree.calpoly.edu/images/0600/09/original/ficus-microcarpa-tree-3.jpg"

}]

}

]
},
renderer: {
type: "class-breaks",
defaultLabel: "No data",
defaultSymbol: {
type: "simple-fill",
color: "#fcedcd",
style: "none",
outline: {
color: [153, 102, 255],
width: 0.5
}
}
},
outFields: ["*"]
});
map.add(countriesLayer);
return countriesLayer;
}

// Executes if data retrieval was unsuccessful.

function errback(error) {
console.error("Something went wrong. ", error);
}

// Stop loader icon
function stopLoader(){

jQuery(document).ready(function() {
jQuery('#loader').fadeOut(5000);
});

}

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

function displayThumbnail(countriesLayer){

// Listen to the click event on the map view.
view.on("click", setQuickLook);

function setQuickLook(event){
console.log("I am a thumbnail: ", graphic.attributes.thumbnail);
// create a chart for example
dojo.empty("quickLook");
var lookQuick = domConstruct.create("img",
{

src: graphic.attributes.thumbnail,
title: "satellite",
style: "position: relative;max-width: 200px;bottom: 1px;right: 1px;padding: 8px;"

});
domConstruct.place(lookQuick, this.quickLook);
console.log(this.quickLook);
}

}

function createLayerList(){
// create a new layer list
var layerList = new LayerList({
view: view
});
view.ui.add(layerList, "top-left");
}

});

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Thu, 28 Feb 2019 14:34:30 GMT

please provide the cosmo_skymed_footprint_amapa_thumb.json

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Thu, 28 Feb 2019 14:39:27 GMT

Dear Mr. Scheitlin,

Thank you very much for your reply.

Find the file in attached.

Kind regards

Julierme

On Thu, Feb 28, 2019 at 11:35 AM Robert Scheitlin, GISP <geonet@esri.com>

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Thu, 28 Feb 2019 14:53:10 GMT

I need all other associated files too. like satellite_path.css

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Sat, 11 Dec 2021 10:26:29 GMT

Julierme,

Here is a fix for the main function of the quickview that should resolve all your issue.

The quick view will update based on the feature shown in the popup.

  function displayThumbnail(countriesLayer) {
    view.popup.watch('selectedFeature', function(evt){
      if(evt){
        domConstruct.empty("quickLook");
        var lookQuick = domConstruct.create("img", {
          src: evt.attributes.thumbnail,
          title: "satellite",
          style: "position: relative;max-width: 200px;bottom: 1px;right: 1px;padding: 8px;"
        });
        domConstruct.place(lookQuick, "quickLook");
      }
    });
  }‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Feature Layer and its related Thumbnails

JuliermePinheiro — Thu, 28 Feb 2019 17:35:16 GMT

Dear Mr. Scheitlin,

Thank you very much for your reply. Please, rename the file from

./script/satellite_path.txt to ./script/satellite_path.js

Find attached the hole project. Just unzip the file in your web server.

Kind regards

Julierme

On Thu, Feb 28, 2019 at 11:53 AM Robert Scheitlin, GISP <geonet@esri.com>

Re: Feature Layer and its related Thumbnails

RobertScheitlin__GISP — Thu, 28 Feb 2019 17:56:16 GMT

OK thanks for all the files. The fix is still my last post to you.