Marker Map Container


can someone explain me how I can use the marker map container like in the DHL-Preview APP?
Do I first need a flow?

Help meee! :slight_smile:


I assume you found the component? Share token AwLbtcW498vBtZR7xBJ0Ew to paste into component marketplace.

You need to give the Markers property an array of data according to the specified schema and it’ll render the markers. See also the info balloon text next to Markers property for info on the tap event’s schema!

We’ll try to get a more detailed tutorial together soon!

1 Like

Could you send a photo, i cant see any rendered Icons on the container

Hello I am interested in adding markers on photos. Is there a way to select a photo (“pick image from gallery” or “take photo”), and pass it to the market map container as the background photo ?

Hi, sorry for taking so long to answer. I tested this now and would suggest to not to use background image, but rather add a separate image component into the Marker Map Container. You can basically use it like a regular Container in this regard.

And yes, you can use Take photo and Pick image from library flow functions to get the correct image from device. Though, Pick image from library is being fixed at the moment as there was issues with it on the newest Android phones. You might consider Pick files Flow function to replace it for now if you want to.

Which ever Flow function you use, set the output property path to some Page/App variable that is type Local filesystem path and bind this variable to the image source.

1 Like

Hi, I tried today to use this component but schema for Markers property is missing :frowning:.

Hi! Yes, sorry, we still need to improve the documentation for this component. Here’s an answer that was given elsewhere by @Kristian_Gerkman

The component takes in a list of objects, that contains the marker positions. And the ‘Component tap’- event returns object called ‘newMarker’ if you don’t tap already existing marker, and if you do tap already existing marker it returns object called ‘marker’.

So what you can do is, first create page or app variable that is a list of objects, the object should look like this {“xPercentage”:Number, “yPercentage”:Number, “active”:true/false, “id”:Number}, then connect the the ‘Component tap’- event to ‘If condition’- flow function that checks if it is a newMarker, the formula for this is outputs["Component tap"].event.newMarker.

Then you can connect the 1st output of the if condition, meaning that it is a new marker to a ‘Set page/app variable’- flow function and select the markers variable you created, and for the ‘assigned value’ field select formula function from the binding selector and make it look something like this WITH_ITEM(pageVars.markers, outputs["Component tap"].event.newMarker). This adds the new marker to your already existing markers without erasing them.
Now that you have the markers inside a variable, you can bind the variable to the ‘Markers’ field under the properties tab. Now it should work.

Hi @Mevi, since the marker map container has a bug and the tutorial here very conclusive, can you possibly also make a video tutorial?

I have not come to the goal with the tutorial.

Hi! Have you got a more advanced tutorial already? Thank you!