Welcome to the Ultimate Guide on Leaflet

Leaflet is an open-source JavaScript library that is widely used for mobile-friendly interactive maps. It is designed with simplicity, performance, and usability in mind. Below, we will explore dozens of useful Leaflet APIs along with code snippets and an app example.

Basic Map Setup

  var map = L.map('map').setView([51.505, -0.09], 13);
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

Adding Markers

  var marker = L.marker([51.5, -0.09]).addTo(map);
  marker.bindPopup('Hello world!
I am a popup.').openPopup();

Adding a Circle

  var circle = L.circle([51.508, -0.11], {
      color: 'red',
      fillColor: '#f03',
      fillOpacity: 0.5,
      radius: 500
  }).addTo(map);

Adding a Polygon

  var polygon = L.polygon([
      [51.509, -0.08],
      [51.503, -0.06],
      [51.51, -0.047]
  ]).addTo(map);

Custom Icons

  var greenIcon = L.icon({
      iconUrl: 'leaf-green.png',
      shadowUrl: 'leaf-shadow.png',

      iconSize: [38, 95],
      shadowSize: [50, 64],
      iconAnchor: [22, 94],
      shadowAnchor: [4, 62],
      popupAnchor: [-3, -76]
  });

  L.marker([51.5, -0.09], {icon: greenIcon}).addTo(map);

Creating Layers

  var baseMaps = {
      "Map": L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png')
  };

  var overlayMaps = {
      "Markers": L.layerGroup([marker]),
      "Circles": L.layerGroup([circle]),
  };

  L.control.layers(baseMaps, overlayMaps).addTo(map);

Using GeoJSON

  var geojsonFeature = {
      "type": "Feature",
      "properties": {
          "name": "Coors Field",
          "amenity": "Baseball Stadium",
          "popupContent": "This is where the Rockies play!"
      },
      "geometry": {
          "type": "Point",
          "coordinates": [-104.99404, 39.75621]
      }
  };

  L.geoJSON(geojsonFeature).addTo(map);

Adding Controls

  L.control.scale().addTo(map);

App Example

Below is a simple app example that combines several of the introduced APIs:

Hash: 73e47f3ae78b3400ae23f75a4ef62e131bd0d02848f922227f5bd27767368fb9