604 lines
12 KiB
JavaScript
604 lines
12 KiB
JavaScript
// IRAN bounds, by this order:
|
|
// [North, East]
|
|
// [South, West]
|
|
var bounds = [
|
|
[46.9130026312, 77.6166317076],
|
|
[17.5782370061, 32.5092252948]
|
|
];
|
|
|
|
// Create leaflet map client
|
|
var map = L.map('map', {
|
|
maxBounds: bounds,
|
|
minZoom: 5
|
|
}).setView([34.620, 52.471], 5);
|
|
|
|
// Create map tile layer
|
|
L.tileLayer('https://testmap.141.ir/141map/{z}/{x}/{y}.png', {}).addTo(map);
|
|
|
|
// Project icons
|
|
var blueIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-blue'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var greenIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-green'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var yellowIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-yellow'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
var redIcon = L.divIcon({
|
|
className: 'custom-div-icon',
|
|
html: "<span class='beacon beacon-red'></span>",
|
|
iconSize: [30, 42],
|
|
// iconAnchor: [15, 42]
|
|
});
|
|
|
|
var provinces = [
|
|
{
|
|
id: 1,
|
|
name: 'آذربایجان شرقی',
|
|
lat: 37.9211202,
|
|
lng: 46.6821517
|
|
},
|
|
{
|
|
id: 2,
|
|
name: 'آذربایجان غربی',
|
|
lat: 37.7416484,
|
|
lng: 45.0207638
|
|
},
|
|
{
|
|
id: 3,
|
|
name: 'اردبیل',
|
|
lat: 38.4583983,
|
|
lng: 47.9313001
|
|
},
|
|
{
|
|
id: 4,
|
|
name: 'اصفهان',
|
|
lat: 33.196733,
|
|
lng: 50.7884216,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 33.096733,
|
|
lng: 50.7884216,
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 33.396733,
|
|
lng: 50.7884216
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 2,
|
|
lat: 33.196733,
|
|
lng: 50.4884216
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 33.196733,
|
|
lng: 50.8884216
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 33.196733,
|
|
lng: 51.1884216
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 33.496733,
|
|
lng: 50.9884216
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 2,
|
|
lat: 33.696733,
|
|
lng: 50.1884216
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 3,
|
|
lat: 33.296733,
|
|
lng: 51.4884216
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 32,
|
|
name: 'البرز',
|
|
lat: 35.9960,
|
|
lng: 50.9289
|
|
},
|
|
{
|
|
id: 5,
|
|
name: 'ایلام',
|
|
lat: 33.1545696,
|
|
lng: 46.7576343
|
|
},
|
|
{
|
|
id: 6,
|
|
name: 'بوشهر',
|
|
lat: 28.8936645,
|
|
lng: 51.3204877
|
|
},
|
|
{
|
|
id: 7,
|
|
name: 'تهران',
|
|
lat: 35.5021945,
|
|
lng: 51.3269098
|
|
},
|
|
{
|
|
id: 8,
|
|
name: 'چهارمحال و بختیاری',
|
|
lat: 32.0163307,
|
|
lng: 50.685709
|
|
},
|
|
{
|
|
id: 29,
|
|
name: 'خراسان جنوبی',
|
|
lat: 33.0006776,
|
|
lng: 58.3262335
|
|
},
|
|
{
|
|
id: 30,
|
|
name: 'خراسان رضوی',
|
|
lat: 35.756361,
|
|
lng: 59.1280992,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 35.756361,
|
|
lng: 59.1280992
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 36.756361,
|
|
lng: 59.3280992
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 35.456361,
|
|
lng: 60.1280992
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 35.956361,
|
|
lng: 60.5280992
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 34.156361,
|
|
lng: 60.5280992
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 34.756361,
|
|
lng: 59.6280992
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 1,
|
|
lat: 34.156361,
|
|
lng: 58.6280992
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 2,
|
|
lat: 35.156361,
|
|
lng: 58.4280992
|
|
},
|
|
{
|
|
id: 9,
|
|
type: 2,
|
|
lat: 36.056361,
|
|
lng: 58.1280992
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 31,
|
|
name: 'خراسان شمالی',
|
|
lat: 37.5378855,
|
|
lng: 56.9526137
|
|
},
|
|
{
|
|
id: 10,
|
|
name: 'خوزستان',
|
|
lat: 31.5535141,
|
|
lng: 49.0077168
|
|
},
|
|
{
|
|
id: 11,
|
|
name: 'زنجان',
|
|
lat: 36.515854,
|
|
lng: 48.4777616,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 36.515854,
|
|
lng: 48.4777616
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 35.415854,
|
|
lng: 47.5777616
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 2,
|
|
lat: 37.315854,
|
|
lng: 48.3777616
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 4,
|
|
lat: 36.915854,
|
|
lng: 48.5777616
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 2,
|
|
lat: 37.115854,
|
|
lng: 49.4777616
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 12,
|
|
name: 'سمنان',
|
|
lat: 35.4380386,
|
|
lng: 54.8626294
|
|
},
|
|
{
|
|
id: 13,
|
|
name: 'سیستان و بلوچستان',
|
|
lat: 28.1292481,
|
|
lng: 60.8236848,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 29.1292481,
|
|
lng: 60.8236848
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 28.1292481,
|
|
lng: 61.8236848
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 27.1292481,
|
|
lng: 61.8236848
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 28.1292481,
|
|
lng: 59.8236848
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 3,
|
|
lat: 30.1292481,
|
|
lng: 60.4236848
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 4,
|
|
lat: 31.1292481,
|
|
lng: 61.4236848
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 4,
|
|
lat: 27.7292481,
|
|
lng: 60.8236848
|
|
},
|
|
{
|
|
id: 8,
|
|
type: 2,
|
|
lat: 27.1292481,
|
|
lng: 59.2236848
|
|
},
|
|
]
|
|
},
|
|
{
|
|
id: 14,
|
|
name: 'فارس',
|
|
lat: 29.299051,
|
|
lng: 53.218456
|
|
},
|
|
{
|
|
id: 28,
|
|
name: 'قزوین',
|
|
lat: 36.0156291,
|
|
lng: 49.8398161
|
|
},
|
|
{
|
|
id: 26,
|
|
name: 'قم',
|
|
lat: 34.7191915,
|
|
lng: 51.0122844
|
|
},
|
|
{
|
|
id: 16,
|
|
name: 'کردستان',
|
|
lat: 35.672803,
|
|
lng: 47.0124376
|
|
},
|
|
{
|
|
id: 15,
|
|
name: 'کرمان',
|
|
lat: 29.571858,
|
|
lng: 57.301047
|
|
},
|
|
{
|
|
id: 17,
|
|
name: 'کرمانشاه',
|
|
lat: 34.3789744,
|
|
lng: 46.7010122
|
|
},
|
|
{
|
|
id: 18,
|
|
name: 'کهگیلویه و بویراحمد',
|
|
lat: 30.8143476,
|
|
lng: 50.8661454
|
|
},
|
|
{
|
|
id: 27,
|
|
name: 'گلستان',
|
|
lat: 37.1984436,
|
|
lng: 55.070672
|
|
},
|
|
{
|
|
id: 19,
|
|
name: 'گیلان',
|
|
lat: 37.5115476,
|
|
lng: 49.3554429
|
|
},
|
|
{
|
|
id: 20,
|
|
name: 'لرستان',
|
|
lat: 33.5372643,
|
|
lng: 48.2435197
|
|
},
|
|
{
|
|
id: 21,
|
|
name: 'مازندران',
|
|
lat: 36.3159159,
|
|
lng: 51.8968597
|
|
},
|
|
{
|
|
id: 22,
|
|
name: 'مرکزی',
|
|
lat: 34.5302705,
|
|
lng: 49.7864561
|
|
},
|
|
{
|
|
id: 23,
|
|
name: 'هرمزگان',
|
|
lat: 27.7198095,
|
|
lng: 56.335807
|
|
},
|
|
{
|
|
id: 24,
|
|
name: 'همدان',
|
|
lat: 34.973321,
|
|
lng: 48.6555779
|
|
},
|
|
{
|
|
id: 25,
|
|
name: 'یزد',
|
|
lat: 32.2452686,
|
|
lng: 55.105172,
|
|
projectCoordinates: [
|
|
{
|
|
id: 1,
|
|
type: 1,
|
|
lat: 32.1452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 2,
|
|
type: 1,
|
|
lat: 31.8452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 3,
|
|
type: 1,
|
|
lat: 31.8452686,
|
|
lng: 55.405172,
|
|
},
|
|
{
|
|
id: 4,
|
|
type: 2,
|
|
lat: 31.6452686,
|
|
lng: 55.605172,
|
|
},
|
|
{
|
|
id: 5,
|
|
type: 2,
|
|
lat: 32.3452686,
|
|
lng: 55.205172,
|
|
},
|
|
{
|
|
id: 6,
|
|
type: 3,
|
|
lat: 32.9452686,
|
|
lng: 55.105172,
|
|
},
|
|
{
|
|
id: 7,
|
|
type: 3,
|
|
lat: 33.2452686,
|
|
lng: 55.905172,
|
|
},
|
|
]
|
|
},
|
|
];
|
|
|
|
$('.map-container > svg #iran path').on('click', function () {
|
|
// console.log(this.id);
|
|
// console.log(provinces.find(entry => entry.id == parseInt(this.id.substring(3))));
|
|
|
|
let selectedProvince = provinces.find(entry => entry.id == parseInt(this.id.substring(3)));
|
|
|
|
areaChart = new Chart(areaChartCanvas, {
|
|
type: 'line',
|
|
data: areaChartData2,
|
|
options: areaChartOptions
|
|
});
|
|
|
|
let numberOfProjects = $('.numberOfProjects');
|
|
let numberOfActiveProjects = $('#numberOfActiveProjects');
|
|
let numberOfOpenedProjects = $('#numberOfOpenedProjects');
|
|
let numberOfFinishedProjects = $('#numberOfFinishedProjects');
|
|
let numberOfStoppedProjects = $('#numberOfStoppedProjects');
|
|
|
|
jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 700 }, {
|
|
duration: 1000,
|
|
easing: 'swing',
|
|
step: function () {
|
|
numberOfProjects.text(Math.ceil(this.Counter));
|
|
}
|
|
});
|
|
jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 400 }, {
|
|
duration: 1000,
|
|
easing: 'swing',
|
|
step: function () {
|
|
numberOfActiveProjects.text(Math.ceil(this.Counter));
|
|
}
|
|
});
|
|
jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 250 }, {
|
|
duration: 1000,
|
|
easing: 'swing',
|
|
step: function () {
|
|
numberOfOpenedProjects.text(Math.ceil(this.Counter));
|
|
}
|
|
});
|
|
jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 100) + 100 }, {
|
|
duration: 1000,
|
|
easing: 'swing',
|
|
step: function () {
|
|
numberOfFinishedProjects.text(Math.ceil(this.Counter));
|
|
}
|
|
});
|
|
jQuery({ Counter: 0 }).animate({ Counter: Math.floor(Math.random() * 50) }, {
|
|
duration: 1000,
|
|
easing: 'swing',
|
|
step: function () {
|
|
numberOfStoppedProjects.text(Math.ceil(this.Counter));
|
|
}
|
|
});
|
|
|
|
map.flyTo([selectedProvince.lat, selectedProvince.lng], 9);
|
|
|
|
for (let index = 0; index < selectedProvince.projectCoordinates.length; index++) {
|
|
switch (selectedProvince.projectCoordinates[index].type) {
|
|
case 1: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: blueIcon }
|
|
).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 2: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: greenIcon }
|
|
).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 3: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: yellowIcon }
|
|
).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
case 4: {
|
|
L.marker(
|
|
[selectedProvince.projectCoordinates[index].lat, selectedProvince.projectCoordinates[index].lng],
|
|
{ icon: redIcon }
|
|
).bindPopup(getPopupContent(selectedProvince.projectCoordinates[index].type), { 'className': 'customPopupStyle' })
|
|
.addTo(map);
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
});
|
|
|
|
function getPopupContent(type) {
|
|
// switch (type) {
|
|
// case 1: {
|
|
// // Active
|
|
// break;
|
|
// }
|
|
// case 2: {
|
|
// // Opened
|
|
// break;
|
|
// }
|
|
// case 3: {
|
|
// // Finished
|
|
// break;
|
|
// }
|
|
// case 4: {
|
|
// // Stopped
|
|
// break;
|
|
// }
|
|
// }
|
|
|
|
return "\
|
|
<div class=\"popup\">\
|
|
<span style=\"color:#FF5630 ; font-size:12px\">نوع پروژه: </span><span>احداث</span>\
|
|
<br><span style=\"color:#FF5630 ;font-size:12px\">وضعیت پروژه: </span><span>" + getProjectStatus(type) + "</span>\
|
|
<br><span style=\"color:#FF5630 ;font-size:12px\">درصد پیشرفت فیزیکی پروژه: </span><span>" + getProjectProgress() + "%</span>\
|
|
</div>";
|
|
}
|
|
|
|
function getProjectStatus(type) {
|
|
switch (type) {
|
|
case 1:
|
|
return 'فعال';
|
|
case 2:
|
|
return 'افتتاح شده';
|
|
case 3:
|
|
return 'خاتمه یافته';
|
|
case 4:
|
|
return 'متوقف شده';
|
|
}
|
|
}
|
|
|
|
function getProjectProgress() {
|
|
let percentage = Math.floor(Math.random() * 100) + 1; // returns a random integer from 0 to 99
|
|
return percentage;
|
|
}
|