Search code examples
mapstomtom

Is it possible to use TomTom WebSdk MapTiles in raster mode?


I am using TomTom webSDK map tiles which by default work in vector mode:

https://developer.tomtom.com/maps-sdk-web-js/overview/product-information/introduction

Unfortunatelly it works very slow due to high CPU utilization. Is it possible to switch to raster mode, so it will serve map images like google maps does?


Solution

  • There is an example there:

    var endpoint = 'https://{cyclingHostname}.api.tomtom.com/map/1/tile/basic/' +
                   'main/{z}/{x}/{y}.png?tileSize=512&key=<your-tomtom-maps-API-key>';
    var tiles = ['a', 'b', 'c', 'd'].map(function(hostname) {
        return endpoint.replace('{cyclingHostname}', hostname);
    });
    var map = tt.map({
        key: '<your-tomtom-maps-API-key>',
        container: 'map',
        style: {
            'version': 8,
            'sources': {
                'raster-tiles': {
                    'type': 'raster',
                    'tiles': tiles,
                    'tileSize': 256
                }
            },
            'layers': [
                {
                    'id': 'raster-tiles-layer',
                    'type': 'raster',
                    'source': 'raster-tiles'
                }
            ]
        },
        dragPan: !isMobileOrTablet()
    });
    map.addControl(new tt.FullscreenControl());
    map.addControl(new tt.NavigationControl());