Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 489
Tony Avatar asked Sep 05 '17 15:09

Tony


People also ask

Are Leaflet maps free?

Is there a fee for using it? Leaflet, unlike Google Maps and other all-in-one solutions, is just a JavaScript library. It's free to use, but doesn't provide map imagery on its own — you have to choose a tile service to combine with it.

Can I use Google Maps on my Leaflet?

Using the leaflet, we can render the map into an HTML element and we can set the marker on the map. Leaflet works efficiently across all major desktop and mobile platforms.

Can I use Leaflet offline?

This library can be used to create maps, which are still available when you are offline and are fast when your connection is not. It works in the browser or can be used in an mobile app based on html and in progressive webapps.


1 Answers

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/[email protected]/dist/leaflet.css" />
  </head>
  <body>
    <div id="leaflet"></div>
    <script type="application/javascript" src="//unpkg.com/[email protected]/dist/leaflet.js"></script>
  </body>
</html>
like image 166
iH8 Avatar answered Sep 18 '22 12:09

iH8