Customized markers with popups from within a loop

Maps SDK for Web (JavaScript)
#1

Hello!

I’m new to Tom Tom API and am looking to convert my website currently using Google Maps API

I’ve got code like the below working (it’s altered for simplicity) to display multiple markers with popups on a map

mylocations.forEach(function (child) { 
    tomtom.L.marker(child.Coordinate)
    .addTo(map)    
    .bindPopup("<strong>" + child.PlaceName + "</strong")  
});

What I need to do is have different colour markers depending on one of the child values
I’ve seen a tutorial about how to customise the markers when they’re set individually but I can’t work out the syntax for how to do it in a loop like the above. Can anyone help me out or point me in the direction of a tutorial?

Many thanks

#2

Hello!

It seems that you are trying to use our old version of the SDK. You should definitely try to use the newest version.
When it comes to handling markers, you can take a look at one of our tutorials:
Store Locator or Taxi cars dispatcher.

Regards,
Mateusz

2 Likes
#3

Thanks Mateuz
I’ve converted to v5 and have got my page working!
http://www.myfootygrounds.co.uk/AreaMap.asp?view=ENGLAND
Not sure if it’s the tidiest way of doing it but I created a rule for each colour in the stylesheet and dynamically set the element property of the marker

const leagueid = st.properties.leagueid;
       var element = document.createElement('div');      
       var color = GetIconColour(leagueid);
       element.id = 'marker' + color ;
        const marker = new tt.Marker(          
              {element: element}       
        )
        .setLngLat(location)
        .setPopup(new tt.Popup({offset: 35})
        .setHTML(strLink)).addTo(map);
3 Likes