[OutSystems Maps] Exclude current location Marker from Clustering
outsystems-maps
Reactive icon
Forge component by Platform Maintenance
Application Type
Reactive

Hi Guys,

Is there any way that we can exclude our current location marker com the Clustering functionality?

The use case is that when we zoom out, we still want to see our current location marker on the screen along with the other markers that were clustered.

Right now, what is happening is that our current location Marker is being clustered along with all other markers which, as you can understand, is not useful.

Cheers,

Pedro Domingues

Solution

Hi @Adriano Palma

I believe I found a way to implement your requirement. Can you please try to use the following script?

var myMarker = MapAPI.MapManager.GetActiveMap().markers.filter(function (m) {
        return m._widgetId === $parameters.markerWidgetId;
    }).map(function (m) {
        return m;
    })[0];
    
MapAPI.MapManager.GetActiveMap().features.markerClusterer._markerClusterer.removeMarker(myMarker.provider, false);
myMarker.provider.setMap(MapAPI.MapManager.GetActiveMap().provider);    

or even simpler:

var myMarker = MapAPI.MarkerManager.GetMarkerById($parameters.markerWidgetId).provider;
    
MapAPI.MapManager.GetActiveMap().features.markerClusterer._markerClusterer.removeMarker(myMarker, false);
myMarker.setMap(MapAPI.MapManager.GetActiveMap().provider);   

Let me know if it works for you.

Cheers,
GM

Hi @Pedro Domingues 

First of all, thank you for bringing this topic.

Just to clarify: 

  • How're you identifying your current location marker? 
  • And, would that location always be ignored?
  • What have you tried so far while using the Maps API?
  • If you have a sample you can share with that use case we would appreciate it.

Cheers,
GM

Hi @Gonçalo Martins 

All good? :D

We are getting the device coordinates with the Location plugin and then we create a marker with those coordinates.

The problem is that if we enable the clustering feature then all markers will be added to the clustering, including the one with the device coordinates. And the clustering markers list will be refreshed (cleared and created again) even if we add the marker after all normal markers were added. So, there's no way to remove a specific marker of the clustering and leave it outside of that list.

I've looked the code in the Maps API and was not able to find a way to do this.

My "hammer time" solution was to create an InfoWindow always visible and worked on the CSS to make it look like the current position blue dot lol (it ain't stupid if it works ahah) 

Cheers

Hi @Adriano Palma
What's up, mate? 😉

I tried some approaches that might work for you if I got the use case right (I still need to find how to properly make the marker we'll exclude from the cluster visible).

  1. Remove the marker from the cluster:

    var myMarker = MapAPI.MapManager.GetActiveMap().markers.filter(function (m) {
    return m._widgetId === $parameters.markerWidgetId;
    }).map(function (m) { return m; })[0];

    MapAPI.MapManager.GetActiveMap().features.markerClusterer.removeMarker(myMarker);



  2. Set the marker not visible on the cluster:

    var myMarker = MapAPI.MapManager.GetActiveMap().markers.filter(function (m) {
    return m._widgetId === $parameters.markerWidgetId;
    }).map(function (m) { return m; })[0];

    var markerCluster = MapAPI.MapManager.GetActiveMap().features.markerClusterer;
    var clusterMarks = MapAPI.MapManager.GetActiveMap().features.markerClusterer._markerClusterer.getMarkers();

    for (var i in clusterMarks) {
    if (i === (myMarker.index-1))
    {
    clusterMarks[i].setVisible(false);
    }
    }

    markerCluster.setIgnoreHidden(true);
    markerCluster.repaint();


Let me know if it helps and once I find another way of doing this I'll reach out.

Cheers,
GM

Hi @Gonçalo Martins 

Thank for the suggestions, I got to that point too, using the markerClusterer.removeMarker() function, but then I can't add it the the normal list of markers. As soon as I add it again to the markers list, the code updates the clustering and there it is clustered again :/

In our project we are also using the DEPRECATED_AdvancedFormat to disable the map controls and limit the map zoom, eventually when you guys remove this input is there a way to configure this before the map is rendered? 

Thanks for the help mate!

Cheers

Solution

Hi @Adriano Palma

I believe I found a way to implement your requirement. Can you please try to use the following script?

var myMarker = MapAPI.MapManager.GetActiveMap().markers.filter(function (m) {
        return m._widgetId === $parameters.markerWidgetId;
    }).map(function (m) {
        return m;
    })[0];
    
MapAPI.MapManager.GetActiveMap().features.markerClusterer._markerClusterer.removeMarker(myMarker.provider, false);
myMarker.provider.setMap(MapAPI.MapManager.GetActiveMap().provider);    

or even simpler:

var myMarker = MapAPI.MarkerManager.GetMarkerById($parameters.markerWidgetId).provider;
    
MapAPI.MapManager.GetActiveMap().features.markerClusterer._markerClusterer.removeMarker(myMarker, false);
myMarker.setMap(MapAPI.MapManager.GetActiveMap().provider);   

Let me know if it works for you.

Cheers,
GM

Nice! Will try, thanks mate.

Regarding the DEPRECATED_AdvancedFormat do you know how can we make extra configs when this input is removed?


Cheers

That will depend on the configs you're using. But mostly that should be done via extensibility since we want to avoid having things like advanced formats that open a Pandora's box :/
You can send me directly the configs you need so that we can take a look and try to help.

Cheers,
GM

Currently our requirements are:

  • Disable or hide the default UI controls.
  • Disable clickable icons
  • Define a Max and Min zoom
  • Add a custom control to the map (I solve this by adding a floating div on top of the map)

Do you think that would be something that we would be able to configure in the future.

I'm a little bit afraid of the future updates that could break these definitions.


Cheers

Will take a look together with the team and will reach out asap.
About the cluster requirement, any feedback? Could we mark this as Solved?

Cheers,
GM

Yup, It works using the code you mentioned :D

I was missing the myMarker.setMap() when tried this approach hehe

Thanks for helping us out! You can mark it as solved :)

Eventually in the future it would be nice to have a parameter on the marker widget to define if we want to leave it out of the clustering or not.


Thanks again mate! Cheers :P

Hi @Adriano Palma,

This will be always customizable with .js using the .setOptions() method. 

You can use the following code: 
MapAPI.MapManager.GetMapById('[YourMapID]').provider.setOptions
({
'disableDefaultUI':true, 
'clickableIcons':false, 
'minZoom':4, 
'minZoom':7
})

Obviously we will try to provide the APIs or WebBlocks that are most in the needs of our users, so please send us your feedback everytime the component has a limitation that could be offer in the different way.

Cheers,
João Ferreira



Thanks a lot Gonçalo!!

Give a "calduço" to Marcelino :D

Will do @Pedro Domingues 🤣

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