[OutSystems Maps] Need to show MarkerLabel on Marker Points in Reactive
Forge component by OutSystems R&D
Application Type
Reactive

Hi all,

How to show the Marker Label on Marker , attaching screenshot below.

the actual requirement is I want to show the order of points like 1,2,3....., in the markers .

I've attached optional config options showing for Marker block but I didn't find Label over there, there's a title option for showing the title when mouse is hovered on it.



With Regards,

Sandeep.

Hello Sandeep K,  

I'm sorry, I should have created the OML with the list just like you asked in your first question of this thread.

Since you have a list and the marker itself on the OutSystems Maps component is not yet supporting this type of behavior, what I suggest is adding the following code inside the JS block just like on my previous message:


MapAPI.MapManager.GetMapById($paramaters.MapId).markers.forEach(function(marker, index){

    MapAPI.MarkerManager.Events.Subscribe(

        marker.widgetId, 

        OSFramework.Event.Marker.MarkerEventType.Initialized, 

        function(mapId, markerId){ 

            MapAPI.MarkerManager.GetMarkerById(markerId).provider.setLabel(index.toString());

        }

    )

});


You can see that we are now using a forEach to subscribe to each marker OnInitialize event the line that allows you to set the label of the Marker.

The limitation here is on the Label, unless you create some logic around the index of the Marker, you will only be able to use information from the current Marker and not from another aggregate list from your application for instance.


Best regards,

Tiago Pereira

Maps.oml

Hello, so to add the marker label you need to do this

1- You can simply use this JSON;

"{label: {text: '1'}}"


2-or you can use this on the map initialize

  var map = new google.maps.Map(
    document.getElementById("map_canvas"), {
      center: new google.maps.LatLng(37.4419, -122.1660756),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });
  var data = [{GPSCoordinates: "37.4419, -122.1419"},
    {GPSCoordinates: "37.4529598, -122.1817252"},
    {GPSCoordinates: "37.4335499, -122.2030209"},
    {GPSCoordinates: "37.424106, -122.1660756"}
  ]
  for (var i = 0; i < data.length; i++) {
    var coords = data[i].GPSCoordinates.split(',');
    var position = new google.maps.LatLng(coords[0], coords[1]);
    var labels = "" + (i + 1);
    addMarker(position, map, labels);
  }

  function addMarker(location, map, label) {
    var marker = new google.maps.Marker({
      position: location,
      map: map,
      label: label
    });
  }

On the map initialize you need to add the markers like this

https://stackoverflow.com/questions/52142299/how-to-add-label-to-google-map-marker-error-invalidvalueerror-setlabel-not

https://marcio-carvalho4.outsystemscloud.com/PreviewInDevices/?IsMobilePreview=True&DeviceName=Smartphone&URL=/MapsMobile/maps?_ts=637646691979415564

ps: if you are using the trusted component for OutSystems I think the 2 option I think is possible, because on initialize it will be possible to do that. but the first option right now is not possible, and it was a good idea to insert this on the OutSystems's map component.

Give it a try, Hope I could help you :)

Kind Regards,

Márcio

MapsMobile.oml

Hi Marcio,

Thanks for the response but I'm using OutsystemsGoogleMaps Component , so I'm trying to get labels in this component, I've noticed that you're using some other component to set labels for the markers.



Hello Sandeep K,

Thanks for bringing this subject to the discussion.

At the moment, that is not available on the OutSystems Maps component without a workaround. Nevertheless, we intend to have multiple methods so I passed this post to the team and we will analyze it as I think it might be a good use case.

Right now, I would suggest the following workaround

---

1) Add a handler on the Map_Initialized event of the Map Block.

2) Inside the new client action, drag-and-drop a JS block.

Code: 

MapAPI.MarkerManager.Events.Subscribe(

    $parameters.MarkerWidgetId, 

    OSFramework.Event.Marker.MarkerEventType.Initialized, 

    function(mapId, markerId){ 

        MapAPI.MarkerManager.GetMarkerById(markerId).provider.setLabel($parameters.Label);

    }

)


The previous code will subscribe to the OnInitialize event of the Marker. This way we can ensure the callback will only take action after the initialization of the Marker.

---
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 API methods, so I suggest you keep tuned. We also intend to launch new events that might replace the code that I am providing in order to make it easier to replicate such behaviors.

Hope this answer is useful.

Best regards,

Tiago Pereira

Hi @Tiago Miguel Pereira , I'll surely try with your solution and update you.


Thanks for the Update,

Sandeep.

Hi  @Tiago Miguel Pereira, I'm getting some Exceptions with the above ,can you please share the OML in which you'd tried the above workaround.


Thanks in advance,

Sandeep.

Hello Sandeep K

Please check the suggested workaround on the OML attached to this reply.


Hope this sample is useful.

Best regards,

Tiago Pereira

OutSystemsMapsMarkerLabels.oml

Only thing difference is , I'm using List and Marker widget inside the list so I'm not able to get the MarkerID at client action to assign to JavaScript Input.

I'll attach my OML can you please suggest me how to fix that.

if we are using only one marker then MarkerID is coming but not in my case.

Maps.oml

Hello Sandeep K,  

I'm sorry, I should have created the OML with the list just like you asked in your first question of this thread.

Since you have a list and the marker itself on the OutSystems Maps component is not yet supporting this type of behavior, what I suggest is adding the following code inside the JS block just like on my previous message:


MapAPI.MapManager.GetMapById($paramaters.MapId).markers.forEach(function(marker, index){

    MapAPI.MarkerManager.Events.Subscribe(

        marker.widgetId, 

        OSFramework.Event.Marker.MarkerEventType.Initialized, 

        function(mapId, markerId){ 

            MapAPI.MarkerManager.GetMarkerById(markerId).provider.setLabel(index.toString());

        }

    )

});


You can see that we are now using a forEach to subscribe to each marker OnInitialize event the line that allows you to set the label of the Marker.

The limitation here is on the Label, unless you create some logic around the index of the Marker, you will only be able to use information from the current Marker and not from another aggregate list from your application for instance.


Best regards,

Tiago Pereira

Maps.oml


Hi @Tiago Miguel Pereira , Thank you so much , now my requirement fulfilled .

I hope/suggest Map Component itself should support this feature from next release.



Thanks,

Sandeep.

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