TomTom tile layer not included in leaflet map

Currently working on an app (map) where I would like to use the Tom Tom tile layers on top of Leaflet. Due to Leaflet's documentation I would like to stick to Leaflet, rather than Tom Tom. I was successful at setting up the map using the Tom Tom approach, but I couldnt get the tile layer to be added using the leaflet library.

I cant see what Im doing wrong. Could anyone help please?

According to the leaflet tutorial the code should work like this: https://leafletjs.com/examples/quick-start/

The Tom Tom tile map API url can be generated from: https://developer.tomtom.com/content/maps-api-explorer#/Vector/get_map__versionNumber__tile__layer___style___zoom___X___Y__pbf

// Creating a map instance with its center set to London with a zoom of 13
var mymap = L.map('map').setView([51.505, -0.09], 13);

// Accessing the tile layer from the TOMTOM site
L.tileLayer('https://api.tomtom.com/map/1/tile/basic/main/1/0/0.pbf?key=MY_API_KEY', {
  attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',

  //id: 'mapbox.streets',
  //accessToken: 'your.mapbox.access.token'
}).addTo(mymap);

<!DOCTYPE html>
<html>

<head>
  <!-- Bootstrap css and scripts -->
  <link rel="stylesheet" href="./00_Local_Bootstrap\css\bootstrap.css">
  <script src="./00_Local_Bootstrap\js\bootstrap.js"></script>
  <script src="./00_Local_Bootstrap\jquery_3_4_1\jquery_3_4_1.js"></script>

  <!-- Leaflet css and scripts -->
  <link rel="stylesheet" type="text/css" href="./Leaflet\leaflet.css" />
  <script src="./Leaflet\leaflet.js"></script>

  <style media="screen">
    #map {
      width: 50vw;
      height: 50vh;
    }
  </style>

</head>

<body>


  <!-- Map Import-->

  <div class="container">
    <p>Here is the map</p>
    <div id='map'></div>

    <!-- Mymap script -->
    <script src="./welcome_page_leaflet.js"></script>

  </div>

</body>

</html>

` The leaflet documentation is using Mapbox, which is why they refer to the corresponding access token and id. Thats why I commented it out.

The map doesnt load the tiles and I only get a blank screen where the map should be. What am I missing?

Solution

Looks like you are trying to display vector tiles (with PBF extension) through Leaflet Tile Layer, which is meant for raster tiles.

Tom Tom provides raster tiles as well: https://developer.tomtom.com/maps-api/maps-api-documentation-raster/raster-tile