1. Components
2. Maps
3. Leaflet Maps

Leaflet Maps

Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms. Read the Official Leaflet Documentation for a full list of instructions and other options.

---

Basic Map

A default map style by Leaflet Maps.

const map = L.map('leaflet1').setView([51.505, -0.09], 13);

const tiles = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
	maxZoom: 19,
	attribution: '© OpenStreetMap'
}).addTo(map);

---

With Popup

Popups are usually used when you want to attach some information to a map.

const map2 = L.map('leaflet2').setView([51.505, -0.09], 13);

const tiles2 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map2);

const popup = L.popup()
.setLatLng([51.513, -0.09])
.setContent('I am a standalone popup.')
.openOn(map2);

---

With Circle

Adding a circle is the same (except for specifying the radius in meters as a second argument), but lets you control how it looks by passing options as the last argument when creating the object.

const map3 = L.map('leaflet3').setView([51.505, -0.09], 13);

const tiles3 = L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
  maxZoom: 19,
  attribution: '© OpenStreetMap'
}).addTo(map3);

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

const circle = L.circle([51.508, -0.11], {
  color: 'red',
  fillColor: '#f03',
  fillOpacity: 0.5,
  radius: 500
}).addTo(map3).bindPopup('I am a circle.');

const polygon = L.polygon([
  [51.509, -0.08],
  [51.503, -0.06],
  [51.51, -0.047]
]).addTo(map3).bindPopup('I am a polygon.');