[OutSystems Maps] Click table trigger marker popup
outsystems-maps
Forge component by Platform Maintenace
Application Type
Reactive

Hi,

I'm trying to use the "Outsystems Map" component. I'd like to have two columns - Left is a table of locations (inc lat & Long) - right is a map with "Marker Popup".

I've got the data loaded in the table and map, markers show ok and the popups work. 

  1. I can't see how to trigger a marker popup on table click.. I imagine it involves javascript but the examples I've seen are for Google Maps component not the Outsystems one
  2. I'd also like to highlight the row or cell clicked.
  3. Also, when the marker is clicked I'd like to highlight the corresponding table item,


I don't think reactive pages allow you to set the row colour so I've put a container one of the cells containing the location text and set style on container to highlight a hardcoded location but it doesn't seem to apply...

Can anyone assist ?

Many Thanks,

Sam.



Hello Sam Swancutt,

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 and events on the component 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 (.oml attached to the reply)

---

1) Add your Table and Map and use the Aggregate to fill both elements with rows and marker popups.

2) Create a new Client Action as follows:

3) Make sure you save the Previous MarkerId and its corresponding Row Number on the Table. You can see that I'm saving those values on the Assign right below the JS Block.

4) On the JS Block, we need to close the popup as well as remove the CSS class from the previous Marker and Row from the Table. Then, we need to open the popup from the current Marker and add a CSS class to the row that has the same index as the Marker. 

5) Create the class row-clicked (if you want a different class please change the JS Block accordingly).

.row-clicked td {
    background: red;
}
/* By using the "td" you will be adding the red background to all td elements inside the row */

6) By clicking on the Row Cell add the previously created client action:

7) By clicking on the MarkerPopup add the previously created client action:

---
Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all cases. We are continuously working to provide more API methods, so I suggest you keep tuned, as we 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

MapsTablesAndMarkerPopups.oml

Part 3 - I've managed to highlight the correct table row by using Client Action "MarkerEventAction"... ListIndexOf (to find my locationID) and SetSelectedTableRow if my ListIndexOf  <> -1.

I couldn't see how to clear the selection other that doing a Client Action "ClearSelectedRows" foreach - SetSelectedTableRow - isSelected = False

So I think I can do item 2 now, I just need help with (item 3) triggering the marker popup by clicking an item in the table.

Hello Sam Swancutt,

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 and events on the component 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 (.oml attached to the reply)

---

1) Add your Table and Map and use the Aggregate to fill both elements with rows and marker popups.

2) Create a new Client Action as follows:

3) Make sure you save the Previous MarkerId and its corresponding Row Number on the Table. You can see that I'm saving those values on the Assign right below the JS Block.

4) On the JS Block, we need to close the popup as well as remove the CSS class from the previous Marker and Row from the Table. Then, we need to open the popup from the current Marker and add a CSS class to the row that has the same index as the Marker. 

5) Create the class row-clicked (if you want a different class please change the JS Block accordingly).

.row-clicked td {
    background: red;
}
/* By using the "td" you will be adding the red background to all td elements inside the row */

6) By clicking on the Row Cell add the previously created client action:

7) By clicking on the MarkerPopup add the previously created client action:

---
Please bear in mind that we didn't make all the necessary tests to ensure that it will work on all cases. We are continuously working to provide more API methods, so I suggest you keep tuned, as we 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

MapsTablesAndMarkerPopups.oml

Hi Tiago,

Many thanks for the info ;)

I've had a quick look and it seems to do what I wanted, the only issue is that the mouseover styling on the table is hiding the fact that it's highlighted red. It shows up once you move the mouse off the table...

One more question, if you don't mind, is it possible to draw a circle of a specific size i.e 20km radius around the selected marker ?

Regards,

Sam.




Hello Sam Swancutt,

I'm glad you found this useful!

Regarding the styling, I believe you can accomplish that using CSS. Have you tried the :hover selector? Something like:

.row-clicked td,
.row-clicked:hover td {
    background: red;
}


As for the circle, we're currently working on the "drawing shapes" feature which will include several shapes, including the one you're asking for. 


Best regards,

Tiago Pereira

I had a couple of other css items but once I removed them and used yours, it worked fine.


Many thanks,

Sam.

Hi Tiago,

One last question ;)

The options / filter panel that you used in your demo, where was that from ?

I'd like to switch it from the right to the left side but it looked like a lot needed changing to achieve that...


Regards,

Sam.


Hello Sam Swancutt,

If I'm right, you want to change the container with the options from the right side to the left side of the Map Preview. That container is placed inside the SamplesOptions Block.

You can see the SamplesOptions Block here:

On the widget tree, you will find that we are using CSS classes from the OutSystems UI Theme.

On the image above you can see the CSS Classes that we are using. If you click on the class pointed to by the red arrow, you will see the style declarations for the pattern-preview-left.


In order to change/translate the pattern-preview-left to the right and the pattern-preview-right to the left and end up with something like this:

You need to make some changes on the CSS classes, which can be made with new classes that recreate what you need or by using a workaround that overrides the OS UI code:

1) Add the following CSS to the Style Sheet of the Screen ->

/* We need to make sure the whole preview aligns to the right. OS UI defined the pattern-preview class with display: flex, so we can use the justify-content here. */
.pattern-preview {
    justify-content: flex-end;
}
/* The pattern-preview-right has a border-left, so we might need to add the border-right this time. This class has a declaration of an absolute position with a right margin of 0, we need to change it to the left. */
.pattern-preview-right {
    border-right: 1px solid #DEDFE4;
    left: 0;
}
/* Finally, when the options icon is clicked there is an animation that translates the container from the left to the right. We need to change it to -100% */
.pattern-preview.pattern-preview-no-options .pattern-preview-right,
.pattern-preview:not(.pattern-preview-open) .pattern-preview-right {
    transform: translateX(-100%);
}

Please bear in mind that didn't make all the necessary tests to ensure that this will work on all cases. 

Best regards,

Tiago Pereira

Hi Tiago,

I'm not sure if you will see this as it has been solved, but I just wanted a little more info...

Where can I get some details on the functions with MapAPI.MapManager, MapAPI.MarkerManager etc ?

I'd like to capture the current zoom level


Thanks


Hello @Sam Swancutt,

In order to get the zoom level, you can use the following line:

> MapAPI.MapManager.GetMapById(mapWidgetId).features.zoom.level

We currently don't have a place with all the details about the functions that we are making available with the MapAPI.MapManager or MarkerManager, etc. 

I'll make sure to pass that message as a request to the team. Until we have more details about it, feel free to ask whatever you need about the OutSystems Maps component.


Did it work for you?


Best regards,

Tiago Pereira

Thanks for the info, but I can't get it to work

Ignore the name "ShowZoomLevelOnClick" - I call this from a map event "Entities.MapEventTriggered.ZoomChanged"

it seems to run the java but always returns outZoom = 0

I dont use javascript much so it could be me.. 

MapZoom.png

Hello @Sam Swancutt,

I'm sorry the previous code didn't work like you were expecting.

You can actually get the current zoom from the provider (google maps) by using the following code:

$parameters.level = MapAPI.MapManager.GetMapById($parameters.mapId).provider.getZoom();


Hope this works for you,

Best regards,

Tiago Pereira

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