KIYAN/Dashboard_Exercise
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Add project files.

Browse Source
This commit is contained in:
lianpi3
2025-07-23 18:54:59 +03:30
parent 429fe73799
commit a0852dd7d8
3356 changed files with 1632271 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

223
Content/Panel/js/pages/features/maps/google-maps.js Normal file
View File

@ -0,0 +1,223 @@
"use strict";
// Class definition
var KTGoogleMapsDemo = function() {
// Private functions
var demo1 = function() {
var map = new GMaps({
div: '#kt_gmap_1',
lat: -12.043333,
lng: -77.028333
});
}
var demo2 = function() {
var map = new GMaps({
div: '#kt_gmap_2',
zoom: 16,
lat: -12.043333,
lng: -77.028333,
click: function(e) {
alert('click');
},
dragend: function(e) {
alert('dragend');
}
});
}
var demo3 = function() {
var map = new GMaps({
div: '#kt_gmap_3',
lat: -51.38739,
lng: -6.187181,
});
map.addMarker({
lat: -51.38739,
lng: -6.187181,
title: 'Lima',
details: {
database_id: 42,
author: 'HPNeo'
},
click: function(e) {
if (console.log) console.log(e);
alert('You clicked in this marker');
}
});
map.addMarker({
lat: -12.042,
lng: -77.028333,
title: 'Marker with InfoWindow',
infoWindow: {
content: '<span style="color:#000">HTML Content!</span>'
}
});
map.setZoom(5);
}
var demo4 = function() {
var map = new GMaps({
div: '#kt_gmap_4',
lat: -12.043333,
lng: -77.028333
});
GMaps.geolocate({
success: function(position) {
map.setCenter(position.coords.latitude, position.coords.longitude);
},
error: function(error) {
alert('Geolocation failed: ' + error.message);
},
not_supported: function() {
alert("Your browser does not support geolocation");
},
always: function() {
//alert("Geolocation Done!");
}
});
}
var demo5 = function() {
var map = new GMaps({
div: '#kt_gmap_5',
lat: -12.043333,
lng: -77.028333,
click: function(e) {
console.log(e);
}
});
var path = [
[-12.044012922866312, -77.02470665341184],
[-12.05449279282314, -77.03024273281858],
[-12.055122327623378, -77.03039293652341],
[-12.075917129727586, -77.02764635449216],
[-12.07635776902266, -77.02792530422971],
[-12.076819390363665, -77.02893381481931],
[-12.088527520066453, -77.0241058385925],
[-12.090814532191756, -77.02271108990476]
];
map.drawPolyline({
path: path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
}
var demo6 = function() {
var map = new GMaps({
div: '#kt_gmap_6',
lat: -12.043333,
lng: -77.028333
});
var path = [
[-12.040397656836609, -77.03373871559225],
[-12.040248585302038, -77.03993927003302],
[-12.050047116528843, -77.02448169303511],
[-12.044804866577001, -77.02154422636042]
];
var polygon = map.drawPolygon({
paths: path,
strokeColor: '#BBD8E9',
strokeOpacity: 1,
strokeWeight: 3,
fillColor: '#BBD8E9',
fillOpacity: 0.6
});
}
var demo7 = function() {
var map = new GMaps({
div: '#kt_gmap_7',
lat: -12.043333,
lng: -77.028333
});
$('#kt_gmap_7_btn').click(function(e) {
e.preventDefault();
KTUtil.scrollTo('kt_gmap_7_btn', 400);
map.travelRoute({
origin: [-12.044012922866312, -77.02470665341184],
destination: [-12.090814532191756, -77.02271108990476],
travelMode: 'driving',
step: function(e) {
$('#kt_gmap_7_routes').append('<li>' + e.instructions + '</li>');
$('#kt_gmap_7_routes li:eq(' + e.step_number + ')').delay(800 * e.step_number).fadeIn(500, function() {
map.setCenter(e.end_location.lat(), e.end_location.lng());
map.drawPolyline({
path: e.path,
strokeColor: '#131540',
strokeOpacity: 0.6,
strokeWeight: 6
});
});
}
});
});
}
var demo8 = function() {
var map = new GMaps({
div: '#kt_gmap_8',
lat: -12.043333,
lng: -77.028333
});
var handleAction = function() {
var text = $.trim($('#kt_gmap_8_address').val());
GMaps.geocode({
address: text,
callback: function(results, status) {
if (status == 'OK') {
var latlng = results[0].geometry.location;
map.setCenter(latlng.lat(), latlng.lng());
map.addMarker({
lat: latlng.lat(),
lng: latlng.lng()
});
KTUtil.scrollTo('kt_gmap_8');
}
}
});
}
$('#kt_gmap_8_btn').click(function(e) {
e.preventDefault();
handleAction();
});
$("#kt_gmap_8_address").keypress(function(e) {
var keycode = (e.keyCode ? e.keyCode : e.which);
if (keycode == '13') {
e.preventDefault();
handleAction();
}
});
}
return {
// public functions
init: function() {
// default charts
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
demo7();
demo8();
}
};
}();
jQuery(document).ready(function() {
KTGoogleMapsDemo.init();
});

250
Content/Panel/js/pages/features/maps/jqvmap.js Normal file
View File

@ -0,0 +1,250 @@
"use strict";
// Class definition
var KTjQVMapDemo = function() {
var sample_data = {
"af": "16.63",
"al": "11.58",
"dz": "158.97",
"ao": "85.81",
"ag": "1.1",
"ar": "351.02",
"am": "8.83",
"au": "1219.72",
"at": "366.26",
"az": "52.17",
"bs": "7.54",
"bh": "21.73",
"bd": "105.4",
"bb": "3.96",
"by": "52.89",
"be": "461.33",
"bz": "1.43",
"bj": "6.49",
"bt": "1.4",
"bo": "19.18",
"ba": "16.2",
"bw": "12.5",
"br": "2023.53",
"bn": "11.96",
"bg": "44.84",
"bf": "8.67",
"bi": "1.47",
"kh": "11.36",
"cm": "21.88",
"ca": "1563.66",
"cv": "1.57",
"cf": "2.11",
"td": "7.59",
"cl": "199.18",
"cn": "5745.13",
"co": "283.11",
"km": "0.56",
"cd": "12.6",
"cg": "11.88",
"cr": "35.02",
"ci": "22.38",
"hr": "59.92",
"cy": "22.75",
"cz": "195.23",
"dk": "304.56",
"dj": "1.14",
"dm": "0.38",
"do": "50.87",
"ec": "61.49",
"eg": "216.83",
"sv": "21.8",
"gq": "14.55",
"er": "2.25",
"ee": "19.22",
"et": "30.94",
"fj": "3.15",
"fi": "231.98",
"fr": "2555.44",
"ga": "12.56",
"gm": "1.04",
"ge": "11.23",
"de": "3305.9",
"gh": "18.06",
"gr": "305.01",
"gd": "0.65",
"gt": "40.77",
"gn": "4.34",
"gw": "0.83",
"gy": "2.2",
"ht": "6.5",
"hn": "15.34",
"hk": "226.49",
"hu": "132.28",
"is": "12.77",
"in": "1430.02",
"id": "695.06",
"ir": "337.9",
"iq": "84.14",
"ie": "204.14",
"il": "201.25",
"it": "2036.69",
"jm": "13.74",
"jp": "5390.9",
"jo": "27.13",
"kz": "129.76",
"ke": "32.42",
"ki": "0.15",
"kr": "986.26",
"undefined": "5.73",
"kw": "117.32",
"kg": "4.44",
"la": "6.34",
"lv": "23.39",
"lb": "39.15",
"ls": "1.8",
"lr": "0.98",
"ly": "77.91",
"lt": "35.73",
"lu": "52.43",
"mk": "9.58",
"mg": "8.33",
"mw": "5.04",
"my": "218.95",
"mv": "1.43",
"ml": "9.08",
"mt": "7.8",
"mr": "3.49",
"mu": "9.43",
"mx": "1004.04",
"md": "5.36",
"mn": "5.81",
"me": "3.88",
"ma": "91.7",
"mz": "10.21",
"mm": "35.65",
"na": "11.45",
"np": "15.11",
"nl": "770.31",
"nz": "138",
"ni": "6.38",
"ne": "5.6",
"ng": "206.66",
"no": "413.51",
"om": "53.78",
"pk": "174.79",
"pa": "27.2",
"pg": "8.81",
"py": "17.17",
"pe": "153.55",
"ph": "189.06",
"pl": "438.88",
"pt": "223.7",
"qa": "126.52",
"ro": "158.39",
"ru": "1476.91",
"rw": "5.69",
"ws": "0.55",
"st": "0.19",
"sa": "434.44",
"sn": "12.66",
"rs": "38.92",
"sc": "0.92",
"sl": "1.9",
"sg": "217.38",
"sk": "86.26",
"si": "46.44",
"sb": "0.67",
"za": "354.41",
"es": "1374.78",
"lk": "48.24",
"kn": "0.56",
"lc": "1",
"vc": "0.58",
"sd": "65.93",
"sr": "3.3",
"sz": "3.17",
"se": "444.59",
"ch": "522.44",
"sy": "59.63",
"tw": "426.98",
"tj": "5.58",
"tz": "22.43",
"th": "312.61",
"tl": "0.62",
"tg": "3.07",
"to": "0.3",
"tt": "21.2",
"tn": "43.86",
"tr": "729.05",
"tm": 0,
"ug": "17.12",
"ua": "136.56",
"ae": "239.65",
"gb": "2258.57",
"us": "14624.18",
"uy": "40.71",
"uz": "37.72",
"vu": "0.72",
"ve": "285.21",
"vn": "101.99",
"ye": "30.02",
"zm": "15.69",
"zw": "5.57"
};
// Private functions
var setupMap = function(name) {
var data = {
map: 'world_en',
backgroundColor: null,
color: '#ffffff',
hoverOpacity: 0.7,
selectedColor: '#666666',
enableZoom: true,
showTooltip: true,
values: sample_data,
scaleColors: ['#C8EEFF', '#006491'],
normalizeFunction: 'polynomial',
onRegionOver: function(event, code) {
//sample to interact with map
if (code == 'ca') {
event.preventDefault();
}
},
onRegionClick: function(element, code, region) {
//sample to interact with map
var message = 'You clicked "' + region + '" which has the code: ' + code.toUpperCase();
alert(message);
}
};
data.map = name + '_en';
var map = jQuery('#kt_jqvmap_' + name);
map.width(map.parent().width());
map.vectorMap(data);
}
var setupMaps = function() {
setupMap("world");
setupMap("usa");
setupMap("europe");
setupMap("russia");
setupMap("germany");
}
return {
// public functions
init: function() {
// default charts
setupMaps();
KTUtil.addResizeHandler(function() {
setupMaps();
});
}
};
}();
jQuery(document).ready(function() {
KTjQVMapDemo.init();
});

22
Content/Panel/js/pages/features/maps/jvectormap.js Normal file
View File

@ -0,0 +1,22 @@
"use strict";
// Class definition
var KTjVectorMap = function() {
// Private functions
var demo1 = function() {
}
return {
// public functions
init: function() {
// default charts
demo1();
}
};
}();
jQuery(document).ready(function() {
KTjVectorMap.init();
});

280
Content/Panel/js/pages/features/maps/leaflet.js Normal file
View File

@ -0,0 +1,280 @@
"use strict";
// 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();
}
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);
}
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);
}
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);
}
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}`);
});
});
}
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
demo1();
demo2();
demo3();
demo4();
demo5();
demo6();
}
};
}();
jQuery(document).ready(function () {
KTLeaflet.init();
});