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
Solved! Go to Solution.
Julierme,
Have mouse over graphic event in the 4.x API is complicated but this thread should get you going:
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 });
}
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
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.
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
<div id="quickLook" data-dojo-type="dijit/layout/ContentPane" isClickable="true" data-dojo-attach-point="container">
</div>
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
<div id="quickLook" data-dojo-type="dijit/layout/ContentPane" isClickable="true" data-dojo-attach-point="container">
</div>
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
In code 2 what do you get when you console.log(this.container); ?
Hi Robert,
Thank you very much for your reply.
The response is: undefined
Kind Regards
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.
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
Hi Robert,
I also added these 3 items: "dijit/_WidgetsInTemplateMixin",
"dijit/_TemplatedMixin",
"dijit/_WidgetBase",
BUT it did not work either.
Kind regards
JUlierme