Help needed adding own style

Good evening,

I need some help regarding adding sources and hope if you could help me please. My goal is to show some traffic information on a lower zoom level, and change other settings. I understand that I should use style sources. I’ve created with https://developer.tomtom.com/maps-api/map-styler a json file.

How do I load this json in to my map? Is this with setStyle(style)? When I cally this function I get a CORS error because I test with a HTML file with a browser. Before I try to test with a HTTP server, I want to be sure that this is the option for my live project and an HTTP server is needed.

		    var map = new tt.map({
    			key: '',
    			container: 'map',
    			center: [locations],
    			zoom: 12,
    			interactive: true
        		});
    		map.setStyle('./incidentsmarker.json');

Thanks in advance.

You can also define style in properties:

var map = new tt.map({
    key: '',
    container: 'map',
    style: './incidentsmarker.json',
    center: [locations],
    zoom: 12,
    interactive: true
});

for CORS related - you can try with some small http server, like https://www.npmjs.com/package/http-server

Thanks.
How is it arranged regarding overriding.
If I use the style defined as a configuration object or URL. And then load a JSON file. Will it override the new values red from the JSON or is this undefined behavior for now?

With setStyle() you can change the style in runtime.
So for inmstance: with map initialization you can use the default style, then once a button is clicked the custom style is loaded.

So you can only once load a style in the style parameter in the map object?
It is not supported that I load two mapstyles. One for one the incidents markers and one for the traffic flow? That is, let’s say, undefined behavior. You load one style in the constructor and can change the some other options with the setStyle function.

Current SDK uses merged styles. So one JSON defines all layers (base map, traffic flow, traffic incidents, labels, etc.).
If you want to make a change to the style in the runtime, you can:

  1. use setStyle() to load predefined style
  2. use getStyle() to retrieve current style, make changes to the JSON and then use it with setStyle()

Is it possible to export current configuration to a json?
The designer has a lot of options. I am missing the option to load your current setting as a basis and adjust this to my needs.
style: {
map: ‘basic_night’,
poi: ‘poi_main’,
trafficIncidents: ‘incidents_day’,
trafficFlow: ‘flow_relative’,
poi: ‘poi_main’
},

BTW I’ve found out that you can select more incidents and flows then written in the documentation.

Do I understand correctly?
You are making changes to the style in the code and want to export this style to a JSON file?

Or import it in the designer. The designer doesn’t has all the options available that the styles parameter has. The main_lite.
And also traffic flows seem to be fixed. If you change it with setStyle it will only display the traffic flow, and no longer the complete map.

Current SDK uses merged style. So your style needs to contain map style + traffic flow.
If you use setStyle with only Traffic Flow, then the map is gone.

1 Like

Thank you for your help, I really like that.

I am still struggling with my traffic flows. How can I change the traffic flow from relative to absolute in my own style? I see some traffic flows IDs in the template that uses flow_relative0 at the template designer. But, I am having a hard time to find out what is possible. Is it perhaps based on a standard?

I respond with slack, because it is a side side side project.