Empty output in browser with my first Sample Map

Hi Team,
I’m new to Maps SDK. I’m trying my first sample java script app. But I’m getting empty when I load below web page. Could you help me.
Note: i have added a valid API-Key by registering an account.

Maps SDK for Web - Vector map

It’s hard to guess what’s wrong without any source code example from your side. You can check the following working code example:

<!DOCTYPE html>
<html>
<head>
    <title>TomTom Map Example</title>
    <meta charset="UTF-8">
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.52.0/maps/maps.css'>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.52.0/maps/maps-web.min.js"></script>
    <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.52.0/services/services-web.min.js"></script>
    <style>
        body {
            margin: 0;
        }
        #map {
            height: 100vh;
            width: 100vw;
        }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        var apiKey = 'WORKING_API_KEY';
        var centerCoords = [4.876935, 52.360306];
        var map = tt.map({
            key: apiKey,
            container: 'map',
            center: centerCoords,
            style: 'tomtom://vector/1/basic-main',
            zoom: 13
        });
        tt.setProductInfo('Your TomTom Map Application', '1.00');
        map.addControl(new tt.NavigationControl(), 'top-left');
    </script>
</body>
</html>

Regards,
Mateusz

Thanks, your source code is working for me.
I didn’t understand what’s wrong in my source code.
Below is my source code:

<!DOCTYPE html>
<html class='use-all-space'>
<head>
    <meta http-equiv='X-UA-Compatible' content='IE=Edge' />
    <meta charset='UTF-8'>
    <title>Maps SDK for Web - Vector map</title>
    <meta name='viewport'
          content='width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no'/>
    <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.53.0/maps/maps.css'>
    <link rel='stylesheet' type='text/css' href='../assets/ui-library/index.css'/>
</head>
<body>
    <div id='map' class='map'></div>
    <script src='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.53.0/maps/maps-web.min.js'></script>
    <script type='text/javascript' src='../assets/js/mobile-or-tablet.js'></script>
    <script>
        var map = tt.map({
            key: 'MY VALID KEY',
            container: 'map',
            style: 'tomtom://vector/1/basic-main',
            dragPan: !isMobileOrTablet()
        });
        map.addControl(new tt.FullscreenControl());
        map.addControl(new tt.NavigationControl());
    </script>
</body>
</html>

You’re welcome :slight_smile:

First of all, you don’t have proper styles for the map container so it’s not visible. The next problem is probably lying in the fact that isMobileOrTablet() function is not defined.

Regards,
Mateusz