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

How to add a custom marker with given renderer for features on portalitem?

ChristianBischof

Using JS API 4.15

I have a portalItem which comes with already rendered markers for its features (3 feature layers). Those markers have shadows which shouldn't be "clickable" to trigger the popup.

So the idea is to put our own markers (for which we have renderer.json files) exactly on all of those provided markers of the portalItem so that we have access to all those markers and make the provided markers not clickable.

So basically we want to put our own markers with the according renderer.json on top of the given markers from the portalItem.

If anybody could provide some sample code, instructions or suggestions I'd be glad!

Thanks in advance!

clickablearea.PNG

nonclickableshadow.PNG

Find more posts tagged with

Accepted answers

Egge-Jan_Pollé

Hi Christian Bischof,

Maybe you can add the feature layers twice. Once the original one, the one with the shadow, and another one on top, with your own rendering.

In that case you can set popupEnabled to false for the first layer and to true for the second one. This should give the desired effect.

Please note: you may also wish to set the listMode to false for the bottom layer, just to avoid that the layer appears twice in the LayerList (if you have any in your app).

Does this solve your issue?

BR,

Egge-Jan

All comments

ChristianBischof

hi Egge-Jan Pollé‌ your suggestion was helpful and I was able to implement it, but it didn't fix my issue because the popup opens generally not only at an exact click on the feature/it's marker, but also if the click event happens "somewhere very close to it". Eventually I wasn't able to achieve what I wanted: define a certain area which is clickable to trigger the popup.

Anyway I guess if the markers would be bigger than this approach could work for others

ChristianBischof

thanks Egge-Jan Pollé‌ I am currently trying to make exactly this approach work haha I'll share my code snippet when I'm done - if anybody else's faster, feel free to contribute

Additoinally maybe it's worth mentioning that the webmap is a portalItem and already comes with some feature layers added to it.

Egge-Jan_Pollé

Hi Christian Bischof,

Maybe you can add the feature layers twice. Once the original one, the one with the shadow, and another one on top, with your own rendering.

In that case you can set popupEnabled to false for the first layer and to true for the second one. This should give the desired effect.

Please note: you may also wish to set the listMode to false for the bottom layer, just to avoid that the layer appears twice in the LayerList (if you have any in your app).

Does this solve your issue?

BR,

Egge-Jan

ChristianBischof

Thanks Egge-Jan Pollé‌ this was helpful, but I am still a bit stuck with this "clickable are thing". Let's say I wanted to make only the white man in the image of the trailheadslayer to be the trigger for the popup as demonstrated in the clickablearea.png file I added to the question. So basically if the area outside of the red box is clicked nothing happens, but if the click is inside of it the popup opens.

Egge-Jan_Pollé

Hi Christian Bischof,

Would this tutorial Style feature layers | ArcGIS API for JavaScript 4.15 answer your question?

BR,

Egge-Jan

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.