37
Views
7
Comments
Solved
[OutSystems Maps] [OutSystems Maps] How would I change the z-index of map markers?
outsystems-maps
Reactive icon
Forge asset by OutSystems
Application Type
Mobile
Service Studio Version
11.54.1 (Build 62118)

Hi everyone,

I'm trying to modify the z-index of map markers, I've seen other posts suggesting to implement marker clustering, however this isn't applicable in my use case. 

I need to apply a single z-index to a list of markers so that another marker appears over the top.

I'll also note the markers use a custom icon as specified by the IconURL property.

Can anyone suggest a solution for this issue? I would greatly appreciate any help or advice you can offer.

Thank you in advance!

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Oliver Kellett 

In Google Maps you can set the z-index using the following Google API here (remember that this component is a wrapper over Google Maps).

In OutSystemsMaps you can call this method through our API (choose the z-index value you want, this is just an example) by:

OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById('<YourMarkerBlockId>').provider.setZIndex(3);


Hope it helps!

Cheers,
GM


2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Oliver Kellett 

I think I found the issue and was able to fix it.
I used the same approach you mentioned in the other forum post and adapted it to your use case, creating the event subscription like this:

var markerId = document.querySelector("#"+$parameters.MarkerId).querySelector(".ss-marker").getAttribute("name");

OutSystems.Maps.MapAPI.MarkerManager.Events.Subscribe(    
   markerId,    
   OSFramework.Maps.Event.Marker.MarkerEventType.Initialized,    
   // This function is a callback, will only be invoked when the marker has 
   // been initialized     
   () => {        
           OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById(markerId).provider.setZIndex(666999);    
   }
);

Fin attached a working example where I'm setting z-index = 666999 to be easy to find in the HTML.

Hope it helps.

GM

MarkerSetZIndex.oml
2022-11-12 11-28-30
Gonçalo Martins
Staff

Hello @Oliver Kellett,

First of all, thank you for reaching out.
Could you please share a sample oml showing that use case so that we can try to help?

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hello @Oliver Kellett 

In Google Maps you can set the z-index using the following Google API here (remember that this component is a wrapper over Google Maps).

In OutSystemsMaps you can call this method through our API (choose the z-index value you want, this is just an example) by:

OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById('<YourMarkerBlockId>').provider.setZIndex(3);


Hope it helps!

Cheers,
GM


UserImage.jpg
Oliver Kellett

Hi Gonçalo,

Thanks for your reply.

I have tried utilizing a modified version of the solution I found in this thread

https://www.outsystems.com/forums/discussion/74975/outsystems-maps-marker-advanced-options/

In short I make the maker into a block and apply JavaScript through the on ready event.

I've attached the code I'm using, when inspecting using chrome dev tools it seems to be selecting the right element but the zIndex isn't applying.

If more information is required I'll create an oml that showcases the problem.

Thanks for the help so far!

Oliver

2022-11-12 11-28-30
Gonçalo Martins
Staff

Hi @Oliver Kellett 

It would be great if you could share it since using the code I've shared I was able to set the marker's z-index.

Cheers,
GM

2022-11-12 11-28-30
Gonçalo Martins
Staff
Solution

Hi @Oliver Kellett 

I think I found the issue and was able to fix it.
I used the same approach you mentioned in the other forum post and adapted it to your use case, creating the event subscription like this:

var markerId = document.querySelector("#"+$parameters.MarkerId).querySelector(".ss-marker").getAttribute("name");

OutSystems.Maps.MapAPI.MarkerManager.Events.Subscribe(    
   markerId,    
   OSFramework.Maps.Event.Marker.MarkerEventType.Initialized,    
   // This function is a callback, will only be invoked when the marker has 
   // been initialized     
   () => {        
           OutSystems.Maps.MapAPI.MarkerManager.GetMarkerById(markerId).provider.setZIndex(666999);    
   }
);

Fin attached a working example where I'm setting z-index = 666999 to be easy to find in the HTML.

Hope it helps.

GM

MarkerSetZIndex.oml
UserImage.jpg
Oliver Kellett

While trying to recreate the issue in my personal environment so I could upload it I was able to get it working with the solution I had posted previously, and when recreating it in its main environment I've managed to get it working, I may have had something affecting it I wasn't aware of.

Thanks for taking the time to assist me I really appreciate it!

2023-04-06 11-24-23
Paulo Zacarias

Hi Oliver

Without looking deeper into the code of the maps component, an idea that you can try is to create a CSS class with the desired z-index and then apply that class to those map markers elements.

Is it doable?

Regards


Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.