[OutSystems Maps] Marker Advanced Options
outsystems-maps
Reactive icon
Forge component by Platform Maintenace
Application Type
Reactive

Hi, how can I add advanced options to a marker. 

For example, I want to set a class, a color and change the fontFamily of the marker label.


Best Regards,

Diogo

Hello @Diogo Barata,

Thank you for the feedback, and you are right! Right now we don't have the event OnInitialize available for the Marker which would make it much easier to "Subscribe" the handlers to the Markers. We will keep the suggestion in mind for future releases as we are always trying to improve the component.

I tried to recreate what you were asking and I believe I have a solution for you. Can you try the solution on the sample attached to this answer?

We are now using an OutSystems Block that will include the Marker Block and inside the OnReady of that OS Block you will have all the necessary code to change the Label of the Markers in runtime. I'm simulating changes on the Database (list that feeds the Markers) with a button that increments the number of Max records from the GetOffices Aggregate.

Again, please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases.

Best regards,

Tiago Pereira

MarkerOptionalConfigsV2.oml

Hello @Diogo Barata,


The OutSystems Maps component doesn't have such property to allow the developers to add the advanced options you are asking just by setting the values on the configuration of the Marker. Nevertheless, I prepared a workaround that I hope and believe will work for you.

On the sample attached you will find 2 different screens. One is for a single marker or if you have a set of marker blocks on the map and you know the id of them. The second screen is used for a list of markers (when you don't know the id of the blocks).

Currently, the component only has the possibility to add a handler to the initialization of the Map. Therefore, we need to hardcode with Javascript blocks in order to create or recreate the same logic that is being used by the Map, but this time for the Markers themself:

1) Create a new handler for the Map Initialization.

2)  Add the following code into a JS block:

MapAPI.MarkerManager.Events.Subscribe(

    $parameters.markerId,

    OSFramework.Event.Marker.MarkerEventType.Initialized,

    // This function is a callback, will only be invoked when the marker has been initialized 

    // (has both the OutSystems Object and the GoogleMaps Marker Object created)

    function(){$actions.ChangeMarkerLabel($parameters.markerId)}

);

3) As you can see, we were calling a ChangeMarkerLabel action on the previous code. So you will need to add a new client action that will have the MarkerId as an input parameter.

4) Inside the ChangeMarkerLabel action you will need to add the second JS block, this time to change the label style:

var marker = MapAPI.MarkerManager.GetMarkerById($parameters.markerId);

marker.provider.label && marker.changeProperty('label',{

        text: marker.provider.label, // Use the same text that was pre-configured.

        color: "red",

        fontSize: "15px",

        className: 'marker-label'// Google adds more styles. Some of those css configurations might override your css properties.

    });

5) You can now set your marker-label CSS configuration:
.marker-label {
  background-color:#ccccccaa;
}


Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases. We are continuously working to provide more events and API methods, so I suggest you keep tuned.

Can you please check if the current sample attached to this answer meets all your needs?

Best regards,

Tiago Pereira

MarkerOptionalConfigs.oml

Hi Tiago Miguel Pereira ,

I thanks for the help. 

I understood what you've made and it works like a charm. 

But that method only works when you first Initialize the map. In my scenario I'm constantly removing and adding markers according to what the user selects on a form, therefore I need what you've implemented but to be triggered OnMarkersList change or something like that because the Map Initialize doesn't trigger when there is a change on the map.

For now, I can achieve my goal by using the DEPRECATED_Markers input of the map, but since it's Deprecated I would like to avoid it.

Can you help?

Best Regards,

Diogo

Hello @Diogo Barata,

Thank you for the feedback, and you are right! Right now we don't have the event OnInitialize available for the Marker which would make it much easier to "Subscribe" the handlers to the Markers. We will keep the suggestion in mind for future releases as we are always trying to improve the component.

I tried to recreate what you were asking and I believe I have a solution for you. Can you try the solution on the sample attached to this answer?

We are now using an OutSystems Block that will include the Marker Block and inside the OnReady of that OS Block you will have all the necessary code to change the Label of the Markers in runtime. I'm simulating changes on the Database (list that feeds the Markers) with a button that increments the number of Max records from the GetOffices Aggregate.

Again, please bear in mind that we didn't make all the necessary tests to ensure that it will work on all edge cases.

Best regards,

Tiago Pereira

MarkerOptionalConfigsV2.oml

Hi Tiago Miguel Pereira ,

Thanks for the help. That workaround worked perfectly.

Best Regards,

Diogo Barata

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