google-mapsleafletmapbox

How to use Leaflet Map for free?


Leaflet is open source and free. However the examples on leaflet site use Mapbox to render map. Mapbox is more expensive than Google map (Mapbox pricing). The question is: can anyone use Leaflet really free?


Solution

  • You can use the Leaflet library for free, only the tileprovider used in the examples, Mapbox, asks money for serving tiles. You just need a free tileprovider like OpenStreetMap for instance:

    var map = new L.Map('leaflet', {
        center: [0, 0],
        zoom: 0,
        layers: [
            new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
                'attribution': 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors'
            })
        ]
    });
    body {
        margin: 0;
    }
    
    html, body, #leaflet {
        height: 100%;
    }
    <!DOCTYPE html>
    <html>
      <head>
        <title>Leaflet 1.0.3</title>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <link type="text/css" rel="stylesheet" href="//unpkg.com/leaflet@1.0.3/dist/leaflet.css" />
      </head>
      <body>
        <div id="leaflet"></div>
        <script type="application/javascript" src="//unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
      </body>
    </html>