Community
Select to view content in your preferred language

4.x GraphicsLayer - popup?

535
3
Jump to solution
08-08-2024 03:47 PM
SteveCole
by
Honored Contributor
‎08-08-2024 03:47 PM

Can a 4.x GraphicsLayer have a popup? This was possible in 3.x but I'm not seeing it in 4.x.

In my 3.x application, users primarily worked using a combo box picklist of mapped features but I used the GraphicsLayer and Draw toolbar to provide the option of manually drawing a graphic on the map but still take advantage of some reporting functionality that I have in the app. The report functionality could extract some of the information that a user provided when adding the graphic for use inside the final report product.

I guess if GraphicsLayers can't have attributes I might have to use a FeatureLayer like one. Ugh. One step forward, two steps backwards..

0 Kudos
1 Solution

Accepted Solutions
TonyAbo
by
Occasional Contributor
‎08-08-2024 09:12 PM

Well that's odd. I have been successfully adding popupTemplate to my graphicsLayers and it has been working. I did not realize that it is not documented, so I am worried.

This simple page adds a graphic at the Sydney Opera House, and the template (with reference to attributes) works fine:

<!doctype html>
<html>
<head>
<script src="https://js.arcgis.com/4.30/"></script>
<style>
  html, body, #map {width: 100%; height: 100%; margin: 0}
</style>
</head>
<body>
  <div id=map></div>
  <script>
require(['esri/Map', 'esri/views/MapView', 'esri/layers/GraphicsLayer', 'esri/Graphic'], (Map, MapView, GraphicsLayer, Graphic) => {
const map = new Map({
basemap: "streets-vector"
});
const view = new MapView({
map: map,
container: 'map'
});
const myLayer = new GraphicsLayer({
popupTemplate: {
title: 'The point',
content: '{here}!'
},
id: 'myLayer',
title: 'My Layer',
geometryType: 'point',
graphics: [],
});
 
map.add(myLayer);
 
const graphic = new Graphic({
attributes: {
id: 0,
here: 'my point'
},
geometry: {
type: 'point',
latitude: -33.857068,
longitude: 151.215191,
},
symbol: {
type: 'simple-marker',
style: 'square',
color: 'red',
size: 8
}
});
myLayer.add(graphic);
});
</script
</body>
 
</html>

 

View solution in original post

3 Replies
GeoGalvanic
by
Occasional Contributor
‎08-08-2024 04:24 PM

Popups for the Graphics Layer in 4.30 are set on the graphics level rather than the layer level. You'll want to use the popupTemplate property of the Graphic object.

Graphic | API Reference | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer

 

You can of course programmatically update all of the graphic popup templates in a graphic layer through various methods.

 

As an aside, according to the Graphics Layer reference page, the Feature Layer is more performant than the Graphics Layer so it might be worth looking into a solution that uses feature layers instead.

If you're just using the Graphics Layer and Draw toolbar as a means to create new features on an existing layer, you may want to look into using the Editor widget instead. It supports creating and updating feature workflows so you wouldn't need to maintain a separate widget for that. You can also use the events to extract data from creation/update into another system if you need it.

Editor | API Reference | ArcGIS Maps SDK for JavaScript 4.30 | Esri Developer

 

TonyAbo
by
Occasional Contributor
‎08-08-2024 09:12 PM

Well that's odd. I have been successfully adding popupTemplate to my graphicsLayers and it has been working. I did not realize that it is not documented, so I am worried.

This simple page adds a graphic at the Sydney Opera House, and the template (with reference to attributes) works fine:

<!doctype html>
<html>
<head>
<script src="https://js.arcgis.com/4.30/"></script>
<style>
  html, body, #map {width: 100%; height: 100%; margin: 0}
</style>
</head>
<body>
  <div id=map></div>
  <script>
require(['esri/Map', 'esri/views/MapView', 'esri/layers/GraphicsLayer', 'esri/Graphic'], (Map, MapView, GraphicsLayer, Graphic) => {
const map = new Map({
basemap: "streets-vector"
});
const view = new MapView({
map: map,
container: 'map'
});
const myLayer = new GraphicsLayer({
popupTemplate: {
title: 'The point',
content: '{here}!'
},
id: 'myLayer',
title: 'My Layer',
geometryType: 'point',
graphics: [],
});
 
map.add(myLayer);
 
const graphic = new Graphic({
attributes: {
id: 0,
here: 'my point'
},
geometry: {
type: 'point',
latitude: -33.857068,
longitude: 151.215191,
},
symbol: {
type: 'simple-marker',
style: 'square',
color: 'red',
size: 8
}
});
myLayer.add(graphic);
});
</script
</body>
 
</html>

 

SteveCole
by
Honored Contributor
‎08-09-2024 08:55 AM

Thanks, guys. I gave the nod to Tony since his post is how I would like to implement this in 4.x but I appreciate the context that GeoGalvanic provided. It is weird how the use of popupTemplate isn't documented in the GraphicsLayer Help Docs but at least it does work.

My implementation is literally using one user generated feature so I don't think there's going to be any performance hit in using GraphicsLayer vs FeatureLayer. I also prefer the freedom of storying either a point, line, or polygon in one layer using GraphicsLayer.

Cheers!

0 Kudos