Logo

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

User Profile 12 messages

James Jones
Application Developer
Recent Notifications
Another purpose persuade Due in 2 Days
+28%
Would be to people Due in 2 Days
+50%
-27%
The best product Due in 2 Days
+8%

Select A Demo