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-18-2019

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.

JuliermePinheiro · ‎02-19-2019

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

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-...

JuliermePinheiro · ‎02-28-2019

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

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

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

});

RobertScheitlin__GISP · ‎02-28-2019

please provide the cosmo_skymed_footprint_amapa_thumb.json

JuliermePinheiro · ‎02-28-2019

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>

RobertScheitlin__GISP · ‎02-28-2019

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

RobertScheitlin__GISP · ‎02-28-2019

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

JuliermePinheiro · ‎02-28-2019

Mr. Scheitlin,

Thank you very much for your reply.

The popup got a little bit messed up and the page is freezing on mouse click.

Kind regards

Julierme

RobertScheitlin__GISP · ‎02-28-2019

I don't see any of that on my end.