How to use json styles with Tom Tom?

The new map styler is nice, but how do I use the JSON file? I can’t even find a list of all possible parameters to use with map let alone what arguments each parameter accepts.

var map = tomtom.map('map', {
		key: 'xyz',
		source: 'vector',
		basePath: '/wp-content/uploads/TomTomSDK/',
		style: 'path/to/my.json'
});

I took some shots in the dark but can’t figure this out. Any help is appreciated.

I haven’t seen the map function call with two arguments. Where did you find it?

Can you try the following instead?

var map = tt.map({
  container: 'map',
  key: 'xyz',
  style: 'path/to/my.json'
});

container with a string value refers to the ID of an element on the page. You can also pass an HTMLElement directly. I’m not sure what basePath is doing. I would just point to the JSON file directly using the style property.

I advise you to look at the functional examples:

1 Like

Two arguments are used when using SDK for Web v4.

Example with custom style:

var map = tomtom.L.map('map', {
    key: '<your-api-key>',
    center: [52.37187, 4.89218],
    basePath: '/sdk',
    source: 'vector',
    styleUrlMapping: {
        main: {
            basic: '/sdk/styles/mono.json',
            labels: '/sdk/styles/labels_main.json'
        }
    },
    zoom: 12
});

documentation: https://developer.tomtom.com/maps-sdk-web/documentation#L.Map

3 Likes

Thanks very much! I just couldn’t find that documentation on styleUrlMapping.

For anyone else doing this, I used “Basic Light” style to start with and that style is dependent on making glyphs from the font Noto-Regular - my new styles wouldn’t work until I created PBF files and added them to my sdk. Here are instructions to create pbf files from Noto Regular.
Glyph Tutorial: https://developer.tomtom.com/maps-sdk-web/tutorials-advanced/creating-custom-glyphs

Cheers