1

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/leaflet@1.7.1/dist/leaflet.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" />
    <script src="https://unpkg.com/sql.js@0.3.2/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 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
    – sokratis
    Mar 5 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 at 16:31

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.