Logo

Projects

Bravio Application By James
Quick Reports By Ana
CRM Reporting Tool By Adam
DB Management By CRA Team
Cloud Service By iC Team
Disqus Project By PV Inc.
Plurk Meeting By Plurk Team.
Leafletis 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

Important Notice

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

System Update

There are many variations of passages of Lorem Ipsum available.

Server Maintenance

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

DB Migration

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

System Messages
09:30 AM

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

2:45 PM

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

3:12 PM

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

7:05 PM

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

Notifications
Pic
Marcus Smart UI/UX, Art Director
+65%
AH
Andreas Hawks Python Developer
+23%
SC
Sarah Connor HTML, CSS. jQuery
-34%
Pic
Amanda Harden UI/UX, Art Director
+72%
SR
Sean Robbins UI/UX, Art Director
+65%
JT
Jason Tatum ASP.NET Developer
+139%

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.

Select A Demo

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