Leaflet Maps

Actions

Leafletis an open-source JavaScript library for mobile-friendly interactive maps. For more info please check Leaflet's Home.

Basic Demo

+−

Leaflet | © OpenStreetMap

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Basic Demo
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_1" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo1 = function () {
  // define leaflet
  var leaflet = L.map('kt_leaflet_1', {
   center: [-37.8179793, 144.9671293],
   zoom: 11
  });

  // set leaflet tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(leaflet);

  // set custom SVG icon marker
  var leafletIcon = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // bind marker with popup
  var marker = L.marker([-37.8179793, 144.9671293], { icon: leafletIcon }).addTo(leaflet);
  marker.bindPopup("<b>Flinder's Station</b><br/>Melbourne, Victoria").openPopup();
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo1();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Multi Markers Colors

+−

1000 km

500 mi

Leaflet | © OpenStreetMap

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Multi Markers Colors
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_3" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo3 = function () {
  // define leaflet
  var leaflet = L.map('kt_leaflet_3', {
   center: [47.339, 11.602],
   zoom: 3
  })

  // set leaflet tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(leaflet);


  // set custom SVG icon marker
  var leafletIcon1 = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  var leafletIcon2 = L.divIcon({
   html: `<span class="svg-icon svg-icon-primary svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  var leafletIcon3 = L.divIcon({
   html: `<span class="svg-icon svg-icon-warning svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  var leafletIcon4 = L.divIcon({
   html: `<span class="svg-icon svg-icon-success svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // bind markers with popup
  var marker1 = L.marker([39.3262345, -4.8380649], { icon: leafletIcon1 }).addTo(leaflet);
  var marker2 = L.marker([41.804, 13.843], { icon: leafletIcon2 }).addTo(leaflet);
  var marker3 = L.marker([51.11, 10.371], { icon: leafletIcon3 }).addTo(leaflet);
  var marker4 = L.marker([46.74, 2.417], { icon: leafletIcon4 }).addTo(leaflet);

  marker1.bindPopup("Spain", { closeButton: false });
  marker2.bindPopup("Italy", { closeButton: false });
  marker3.bindPopup("Germany", { closeButton: false });
  marker4.bindPopup("France", { closeButton: false });

  L.control.scale().addTo(leaflet);
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo3();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Interactive Map

+−

Leaflet | © OpenStreetMap contributors

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Interactive Map
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_5" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo5 = function () {
  // Define Map Location
  var leaflet = L.map('kt_leaflet_5', {
   center: [40.725, -73.985],
   zoom: 13
  });

  // Init Leaflet Map
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
  }).addTo(leaflet);

  // Set Geocoding
  var geocodeService;
  if (typeof L.esri.Geocoding === 'undefined') {
   geocodeService = L.esri.geocodeService();
  } else {
   geocodeService = L.esri.Geocoding.geocodeService();
  }

  // Define Marker Layer
  var markerLayer = L.layerGroup().addTo(leaflet);

  // Set Custom SVG icon marker
  var leafletIcon = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // Map onClick Action
  leaflet.on('click', function (e) {
   geocodeService.reverse().latlng(e.latlng).run(function (error, result) {
    if (error) {
     return;
    }
    markerLayer.clearLayers(); // remove this line to allow multi-markers on click
    L.marker(result.latlng, { icon: leafletIcon }).addTo(markerLayer).bindPopup(result.address.Match_addr, { closeButton: false }).openPopup();
    alert(`You've clicked on the following address: ${result.address.Match_addr}`);
   });
  });
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo5();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Polygons

+−

Leaflet | © OpenStreetMap

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Polygons
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_2" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo2 = function () {
  // define leaflet
  var leaflet = L.map('kt_leaflet_2', {
   center: [51.5073219, -0.1276474],
   zoom: 11
  })

  // set leaflet tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(leaflet);

  // set custom SVG icon marker
  var leafletIcon = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // bind marker with popup
  var marker = L.marker([51.5073219, -0.1276474], { icon: leafletIcon }).addTo(leaflet);
  marker.bindPopup("<b>City of London</b>").openPopup();

  // set circle polygon
  var circle = L.circle([51.5073219, -0.1276474], {
   color: '#4A7DFF',
   fillColor: '#6993FF',
   fillOpacity: 0.5,
   radius: 700
  }).addTo(leaflet);
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo2();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Multi Polygons

+−

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Multi Polygons
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_4" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo4 = function () {
  // define leaflet
  var leaflet = L.map('kt_leaflet_4', {
   center: [51.505, -0.09],
   zoom: 13
  })

  // set leaflet tile layer
  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
   attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
  }).addTo(leaflet);

  // set custom SVG icon marker
  var leafletIcon = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // bind marker with popup
  var marker = L.marker([51.5, -0.09], { icon: leafletIcon }).addTo(leaflet);

  // set circle polygon
  var circle = L.circle([51.508, -0.11], {
   color: '#4A7DFF',
   fillColor: '#6993FF',
   fillOpacity: 0.5,
   radius: 700
  }).addTo(leaflet);

  // set polygon
  var polygon = L.polygon([
   [51.509, -0.08],
   [51.503, -0.06],
   [51.51, -0.047]
  ]).addTo(leaflet);
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo4();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Location Array

+−

10 km

5 mi

Leaflet

HTML
JS

<div class="card card-custom gutter-b">
 <div class="card-header">
  <div class="card-title">
   <h3 class="card-label">
    Location Array
   </h3>
  </div>
 </div>
 <div class="card-body">
  <div id="kt_leaflet_6" style="height:300px;"></div>
 </div>
</div>

// Class definition
var KTLeaflet = function () {

 // Private functions
 var demo6 = function () {
  // add sample location data
  var data = [
   { "loc": [41.575330, 13.102411], "title": "aquamarine" },
   { "loc": [41.575730, 13.002411], "title": "black" },
   { "loc": [41.807149, 13.162994], "title": "blue" },
   { "loc": [41.507149, 13.172994], "title": "chocolate" },
   { "loc": [41.847149, 14.132994], "title": "coral" },
   { "loc": [41.219190, 13.062145], "title": "cyan" },
   { "loc": [41.344190, 13.242145], "title": "darkblue" },
   { "loc": [41.679190, 13.122145], "title": "Darkred" },
   { "loc": [41.329190, 13.192145], "title": "Darkgray" },
   { "loc": [41.379290, 13.122545], "title": "dodgerblue" },
   { "loc": [41.409190, 13.362145], "title": "gray" },
   { "loc": [41.794008, 12.583884], "title": "green" },
   { "loc": [41.805008, 12.982884], "title": "greenyellow" },
   { "loc": [41.536175, 13.273590], "title": "red" },
   { "loc": [41.516175, 13.373590], "title": "rosybrown" },
   { "loc": [41.507175, 13.273690], "title": "royalblue" },
   { "loc": [41.836175, 13.673590], "title": "salmon" },
   { "loc": [41.796175, 13.570590], "title": "seagreen" },
   { "loc": [41.436175, 13.573590], "title": "seashell" },
   { "loc": [41.336175, 13.973590], "title": "silver" },
   { "loc": [41.236175, 13.273590], "title": "skyblue" },
   { "loc": [41.546175, 13.473590], "title": "yellow" },
   { "loc": [41.239290, 13.032145], "title": "white" }
  ];

  // init leaflet map
  var leaflet = new L.Map('kt_leaflet_6', {zoom: 10, center: new L.latLng(data[0].loc) });

  leaflet.addLayer(new L.TileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png'));

  // add scale layer
  L.control.scale().addTo(leaflet);

  // set custom SVG icon marker
  var leafletIcon = L.divIcon({
   html: `<span class="svg-icon svg-icon-danger svg-icon-3x"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="24px" height="24px" viewBox="0 0 24 24" version="1.1"><g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"><rect x="0" y="24" width="24" height="0"/><path d="M5,10.5 C5,6 8,3 12.5,3 C17,3 20,6.75 20,10.5 C20,12.8325623 17.8236613,16.03566 13.470984,20.1092932 C12.9154018,20.6292577 12.0585054,20.6508331 11.4774555,20.1594925 C7.15915182,16.5078313 5,13.2880005 5,10.5 Z M12.5,12 C13.8807119,12 15,10.8807119 15,9.5 C15,8.11928813 13.8807119,7 12.5,7 C11.1192881,7 10,8.11928813 10,9.5 C10,10.8807119 11.1192881,12 12.5,12 Z" fill="#000000" fill-rule="nonzero"/></g></svg></span>`,
   bgPos: [10, 10],
   iconAnchor: [20, 37],
   popupAnchor: [0, -37],
   className: 'leaflet-marker'
  });

  // set markers
  data.forEach(function(item){
   var marker = L.marker(item.loc, { icon: leafletIcon }).addTo(leaflet);
   marker.bindPopup(item.title, { closeButton: false });
  })
 }

 return {
  // public functions
  init: function () {
   // default charts
   demo6();
  }
 };
}();

jQuery(document).ready(function () {
 KTLeaflet.init();
});

Pricing Tables

Wizards

Invoices

Login

Classic Login

Error Pages

Leaflet Maps

Basic Demo

Multi Markers Colors

Interactive Map

Polygons

Multi Polygons

Location Array

Todo

Tasks Overview Pending 10 tasks

Notifications 24 New

Quick Actions finance & reports

User Profile 12 messages

Recent Notifications

System Messages

Notifications

Customer Care

Reports

Memebers

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Demo 10

Demo 11

Demo 12

Demo 13

Demo 14

Demo 15

Demo 16

Demo 17

Demo 18

Demo 19

Demo 20

Demo 21

Demo 22

Demo 23

Demo 24

Demo 25

Demo 26

Demo 27

Demo 28

Demo 29

Demo 30