Keen | Leaflet Maps

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

Basic Demo

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

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

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

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

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();
							});

Custom

Layout

features

Pricing Tables

Wizards

Invoices

Login

Error Pages

Leaflet Maps

Basic Demo

Multi Markers Colors

Interactive Map

Polygons

Multi Polygons

Location Array

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9

Custom

Layout

features

Pricing Tables

Wizards

Invoices

Login

Error Pages

Quick Actions

Leaflet Maps

Basic Demo

Multi Markers Colors

Interactive Map

Polygons

Multi Polygons

Location Array

User Profile 15 messages

Recent Notifications

Important Notice

System Update

Server Maintenance

DB Migration

System Messages

Notifications

Privacy Settings:

Security Settings:

Select A Demo

Demo 1

Demo 2

Demo 3

Demo 4

Demo 5

Demo 6

Demo 7

Demo 8

Demo 9