DashByte - Premium Dashboard Template

Maps and Icons

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.

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

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

With Popups

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

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

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

L.marker([51.5, -0.09]).addTo(map2)
.bindPopup("Hello world!
I am a popup.").openPopup();

Markers, Circles & Polygons

Besides tile layers, you can easily add other things to your map, including markers, polylines, polygons, circles, and popups.

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

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

L.marker([51.5, -0.09]).addTo(map3);

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

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

Shaira Diaz

Leaflet Maps

Basic Map

With Popups

Markers, Circles & Polygons