nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

4.x GraphicsLayer - popup?

evtguy

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

Find more posts tagged with

Accepted answers

TonyAbo

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>

<style>

html, body, #map {width: 100%; height: 100%; margin: 0}

</style>

</head>

<body>

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>

All comments

evtguy

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!

TonyAbo

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>

<style>

html, body, #map {width: 100%; height: 100%; margin: 0}

</style>

</head>

<body>

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>

GeoGalvanic

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.