dictionarytomtom

Why does the TomTom API spit out a jumbled map?

My TomTom test code is producing a jumbled up mess of a map:

enter image description here

Why?! Here's the code...

HTML:

<link rel="stylesheet" type="text/css" href="https://themepark.com/public/tomtom-jssdk-4.47.6/mapbox-gl-js/mapbox-gl.css">
<script src="https://themepark.com/public/tomtom-jssdk-4.47.6/tomtom.min.js"></script>

<div id='map_canvas'></div>

Javascript:

document.addEventListener( 'DOMContentLoaded', function( event ) {

    var start_latitude = 50.720990653711, start_longitude = 18.89588147113, start_zoom=5;

    // draw initial map
    var map = tomtom.L.map( 'map_canvas', {
        key: 'apikey',
        source: 'raster',
        basePath: 'http://themepark.com/public/tomtom-jssdk-4.47.6',
        center: [start_latitude, start_longitude],
        zoom: start_zoom,
    } );

  // if we can, try to locate user - this is a one-time action, and will update the map view
    map.locate( {setView: true, maxZoom: 15} );

});

You can play with it all at this codepen: https://codepen.io/pnoeric/pen/GevgBN?editors=1111

codepen

Solution

  • map.css is missing here So instead of linking to mapbox-gl-js/mapbox-gl.css you should link to map.css

    Remember to set some width and height of #map_canvas

    <head>
    <link rel="stylesheet" type="text/css" href="https://themepark.com/public/tomtom-jssdk-4.47.6/map.css">
    <script src="https://themepark.com/public/tomtom-jssdk-4.47.6/tomtom.min.js"></script>
</head>
<body>
    <div id='map_canvas'></div>
</body>

    and css:

    #map_canvas {
  height: 300px;
  width: 300px;
}