Logo
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Tools / Compass Created with Sketch.
Leaflet is an open-source JavaScript library for mobile-friendly interactive maps. For more info please check Leaflet's Home.

Basic Demo


							<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


							<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


							<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


							<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


							<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


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

Quick Actions finance & reports

User Profile 15 messages

Recent Notifications
Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Files / File-done Created with Sketch.

Important Notice

Lorem Ipsum is simply dummy text of the printing and industry.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Design / Pen&ruller Created with Sketch.

System Update

There are many variations of passages of Lorem Ipsum available.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / General / Thunder-move Created with Sketch.

Server Maintenance

Contrary to popular belief, Lorem Ipsum is not simply random text.

Stockholm-icons / Layout / Layout-polygon Created with Figma. Stockholm-icons / Home / Alarm-clock Created with Sketch.

DB Migration

If you are going to use a passage of Lorem Ipsum, you need.

System Messages
Stockholm-icons / Communication / Group-chat Created with Sketch.
09:30 AM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / General / Attachment2 Created with Sketch.
2:45 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Home / Library Created with Sketch.
3:12 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Stockholm-icons / Communication / Add-user Created with Sketch.
7:05 PM

To start a blog, think of a topic about and first brainstorm ways to write details

Privacy Settings:

After you log in, you will be asked for additional information to confirm your identity.

Security Settings:

After you log in, you will be asked for additional information to confirm your identity. For extra security, this requires you to confirm your email. Learn more.

Stockholm-icons / Navigation / Up-2 Created with Sketch.

Select A Demo

Demo 1
Demo 2
Demo 3
Demo 4
Demo 5
Demo 6
Demo 7
Demo 8
Demo 9