IncidentMarker where to use?

Maps SDK for Web (JavaScript)
#1

Can somebody help me how to implement the tt.IncidentMarker (in V5) pelase? I can’t figure out how it works.

I am trying to get all the incidents on my map. That it shows the icons for accident, blocked roads etc. etc… According to documentatin that is done with the tt.IncidentMarker(). But I am unable to find out the working of the class tt.IncidentMarker. Where ever I implement or call it, my code allways throws an error that IncidentMarker() is not a constructor. Is it something that is called from tt.Marker? I doubt it, because tt.IncidentMarker is a seperate class, and tt.marker extends the tt.events. I am just lost.

In the documentation, examples from V3, V4, and V5 I am unable to find a example or solution.

Thanks!

1 Like
#2

Good day Joris6,

If you want to show only the traffic incidents, it is easier just to add a traffic incident Tier. For example:

var trafficIncidentsConfig = {
key: ‘YOUR_API_KEY’,
incidentTiles: {
style: ‘tomtom://vector/1/s3’
},
incidentDetails: {
style: ‘s2’
}
}

map.addTier(new tt.TrafficIncidentTier(trafficIncidentsConfig))

This is assuming that your map object is called ‘map’.
Just need to make sure you added the Icons CSS :

 <link rel='stylesheet' type='text/css' 
         href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.38.0/maps/css-styles/traffic-incidents.css'/>

Now If you want to present custom icons from a list of traffic incidents and you’re having issues with tt.incidentMarker() would it be possible to have a code snippet?

I look forward to your reply.

2 Likes
#3

Adding the https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.38.0/maps/css-styles/traffic-incidents.css did the trick. Thank you very much. I already used the tier for TrafficIncidents, and assumed it was only the arrows. But now the whole map is complete! :slight_smile:

Where did you found the part of adding this style sheet? I reread the Web SDK part V5, but I can’t find it back. Also the part what S1, S2, and S3 means is something I can’t find back.

			map.addTier(new tt.TrafficIncidentTier({
			key: 'mykey',
			refresh: 3600000,
			incidentTiles: { style: 'tomtom://raster/1/s3'},
			incidentDetails: {style: 's3'}
		}))
1 Like
#4

Hi @Joris6, you can find more information about the traffic incident styles in the Traffic API documentation: https://developer.tomtom.com/traffic-api/traffic-api-documentation-traffic-incidents/raster-traffic-incident-tiles.
Regarding the style sheet, it will be added soon to our documentation.

3 Likes
#5

Perfect. In general, some more example would be nice welcome. What CSS is needed etc…

I think you also might add that the style ‘night’ works, even though documentation writes that only s1, s2, and s3 are working.

But even though my map is now working fine. How does the class tt.IncidentMarker works? I am still curious though what I did wrong.

1 Like
#6

The IncidentMarker class is used internally by trafficIncidentTier, it was not meant to be used separately, we document it so that the users know what options are available for it. You can pass options to this class in the incidentDetails property of the options passed to trafficIncidentTier.

We will make this more clear in the documentation.

3 Likes