3

I would like to render a map with Leaflet from a MBTiles file using the Leaflet.TileLayer.MBTiles library. I added the MBTiles file on the same folder with index.php. I am NOT using a web server like Apache etc. Here is my code:

<!DOCTYPE HTML>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
    <script src="https://unpkg.com/[email protected]/js/sql.js"></script>
    <script src="https://unpkg.com/leaflet.tilelayer.mbtiles@latest/Leaflet.TileLayer.MBTiles.js"></script>

    <style>
      html, body {
        height: 100%;
        padding: 0;
        margin: 0;
      }
      #map {
        /* configure the size of the map */
        width: 100%;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      // initialize Leaflet
    

    var mb = L.tileLayer.mbTiles('demo.mbtiles').addTo(map);
 
    var map = L.map('map').setView({lon: 0, lat: 0}, 2);

      // show the scale bar on the lower left corner
      L.control.scale({imperial: true, metric: true}).addTo(map);

      // show a marker on the map
      L.marker({lon: 0, lat: 0}).bindPopup('The center of the world').addTo(map);
    </script>
  </body>
</html>

What am I doing wrong?

Regarding the path of the file, I tried also absolute path like /home/username/Desktop/maps/demo.mbtiles etc.

Here is the library: https://gitlab.com/IvanSanchez/Leaflet.TileLayer.MBTiles

3
  • 1
    What do you see in browser debugger console and network section?
    – TomazicM
    Mar 5, 2022 at 16:05
  • I can see these messages in Console: GET unpkg.com/leaflet.tilelayer.mbtiles@latest/… net::ERR_ABORTED 404 leafletmbtiles.html:31 Uncaught TypeError: L.tileLayer.mbTiles is not a function at leafletmbtiles.html:31:27 And under network:404 Leaflet.TileLayer.MBTiles.js
    – Dion
    Mar 5, 2022 at 16:11
  • 1
    If you type address unpkg.com/leaflet.tilelayer.mbtiles@latest/… directly into the browser, you'll get response: Cannot find package leaflet.tilelayer.mbtiles@latest. You'll have to find the right address for the plugin or download it and load it locally.
    – TomazicM
    Mar 5, 2022 at 16:31

1 Answer 1

1

Pay attention to capital letters => https://unpkg.com/[email protected]/Leaflet.TileLayer.MBTiles.js

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.