markers = [];
function getMapBigIconByStatus(status_id) {
if (status_id == 1) return "marker_on.svg";
if (status_id == 2) return "marker_off.svg";
if (status_id == 3) return "marker_none.svg";
if (status_id == 4) return "marker_stopped.svg";
if (status_id == -2) return "marker_unknown.svg";
return "marker_none.svg";
}
function getMapSmallIconByStatus(status_id) {
if (status_id == 1) return "marker_small_on.svg";
if (status_id == 2) return "marker_small_off.svg";
if (status_id == 3) return "marker_small_none.svg";
if (status_id == 4) return "marker_small_stopped.svg";
if (status_id == -2) return "marker_small_unknown.svg";
return "marker_small_none.svg";
}
function getFilterByStatus(status_id) {
//https://codepen.io/sosuke/pen/Pjoqqp
if (status_id == 1) return "invert(46%) sepia(25%) saturate(7045%) hue-rotate(86deg) brightness(96%) contrast(106%)"; //on
if (status_id == 2) return "invert(12%) sepia(81%) saturate(3912%) hue-rotate(318deg) brightness(80%) contrast(116%)"; //off
if (status_id == 3) return "";
if (status_id == 4) return "invert(53%) sepia(43%) saturate(3005%) hue-rotate(35deg) brightness(121%) contrast(101%)"; //stopped
if (status_id == -2) return "invert(35%) sepia(35%) saturate(2523%) hue-rotate(171deg) brightness(88%) contrast(98%)"; //unknown
return "";
}
function generatePopupForMarker(address, channel) {
var s = "Адреса: " + address.replace("->", '') + "
";
var info = generateStringChannelState(channel, true);
if (info.length > 1) s += info + "
";
s += "Канал: @" + channel.link + " ( " + channel.users + ")";
if (channel.timetable_template_name != null && channel.timetable_template_name.length > 2) {
s += '
Розклад: ' + channel.timetable_template_name.replace('->', '') + "";
}
if (channel.channel_id >= 0) {
s += "
Редагувати канал " + channel.channel_id + "";
}
return s;
}
/*function getDistanceBetween2Coords(lat1, lng1, lat2, lng2) {
return Math.sqrt(Math.pow(lat1 - lat2, 2) + Math.pow(lng1 - lng2, 2));
}
function getDistanceBetween2Markers(marker1, marker2) {
return getDistanceBetween2Coords(marker1.getLatLng().lat, marker1.getLatLng().lng, marker2.getLatLng().lat, marker2.getLatLng().lng);
}*/
function drawLineOnMap(lat1, lng1, lat2, lng2, color) {
var pointA = new L.LatLng(lat1, lng1);
var pointB = new L.LatLng(lat2, lng2);
var pointList = [pointA, pointB];
var line = new L.polyline(pointList, {
color: color,
weight: 3,
opacity: 0.5,
smoothFactor: 1
});
map.addLayer(line);
}
function drawLineOnMapBetweenMarkers(marker1, marker2, color) {
drawLineOnMap(marker1.getLatLng().lat, marker1.getLatLng().lng, marker2.getLatLng().lat, marker2.getLatLng().lng, color);
}
function haversineDistance(lat1, lng1, lat2, lng2) {
var R = 6371e3; // radius of the earth in meters
var φ1 = lat1 * (Math.PI / 180);
var φ2 = lat2 * (Math.PI / 180);
var Δφ = (lat2 - lat1) * (Math.PI / 180);
var Δλ = (lng2 - lng1) * (Math.PI / 180);
var a = Math.sin(Δφ / 2) * Math.sin(Δφ / 2) +
Math.cos(φ1) * Math.cos(φ2) *
Math.sin(Δλ / 2) * Math.sin(Δλ / 2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
var d = R * c; // distance in meters
return d;
}
function getMarkerCircleStyle(percentage1, color1, percentage2, color2, percentage3, color3, percentage4, color4) {
return `background: linear-gradient(to right,
${color1} 0%,
${color1} ${percentage1}%,
${color2} ${percentage1}%,
${color2} ${percentage1 + percentage2}%,
${color3} ${percentage1 + percentage2}%,
${color3} ${percentage1 + percentage2 + percentage3}%,
${color4} ${percentage1 + percentage2 + percentage3}%,
${color4} 100%) 0 0 / 100% 100% no-repeat;`;
}
var markerCluster = null;
function handleClusterSubElements() {
var arr = markerCluster.getLayers();
arr = arr.filter(function(marker) {
return marker._icon != null;
});
map.eachLayer(function(layer) {
if (layer instanceof L.Polyline) {
map.removeLayer(layer);
}
});
var point_icon_width = 20;
var point_icon_height = 20;
var point_marker_z_index = 10;
var connected_markers_array = [];
for (var i in arr) {
var marker = arr[i];
if (marker.channel == null) continue;
//connected points
var point_icon_path = "assets/media/map_img/icon_small/" + getMapSmallIconByStatus(marker.channel.status_id);
var point_icon = L.icon({
iconUrl: point_icon_path,
iconSize: [point_icon_width, point_icon_height],
iconAnchor: [point_icon_width / 2, point_icon_height / 2]
});
if (marker.channel != null && marker.channel.connected_points != null && marker.channel.connected_points.length > 0) {
for (var i in marker.connected_markers) {
markerCluster.removeLayer(marker.connected_markers[i]);
}
marker.connected_markers = [];
//connect with anchor
for (var i in marker.channel.connected_points) {
var point = marker.channel.connected_points[i];
var point_popup = generatePopupForMarker(point.name, marker.channel);
//find same marker
var same_marker = null;
for (var i2 in connected_markers_array) {
var already_marker = connected_markers_array[i2];
if (haversineDistance(already_marker.getLatLng().lat, already_marker.getLatLng().lng, point.latitude, point.longitude) <= 1) {
same_marker = already_marker;
break;
}
};
if (same_marker != null) {
same_marker.bindPopup(same_marker.getPopup().getContent() + "
" + point_popup);
drawLineOnMapBetweenMarkers(marker, same_marker, getColorByStatus(marker.channel.status_id))
continue;
} else {
var point_marker = L.marker([point.latitude, point.longitude], {
icon: point_icon
}).addTo(markerCluster);
point_marker.bindPopup(point_popup);
point_marker.setZIndexOffset(point_marker_z_index);
point_marker.channel = null;
marker.connected_markers.push(point_marker);
connected_markers_array.push(point_marker);
drawLineOnMapBetweenMarkers(marker, point_marker, getColorByStatus(marker.channel.status_id))
}
}
}
}
}
function mapFlyTo(lat, lng, zoom) {
map.flyTo([lat, lng], zoom, {
animate: true,
duration: 1.5
});
}
function plotChannelsOnMap(channels) {
markers = [];
var first = true;
var icon_size = 30;
var icon_width = icon_size;
var icon_height = icon_size * 4 / 3;
var marker_z_index = 20;
let urlParams = new URLSearchParams(window.location.search);
let zoom_to_channel_link = urlParams.get('zoom_to_channel_link');
if (zoom_to_channel_link == null) {
zoom_to_channel_link = "-1";
}
var is_grouping_enabled = $("#dataForm_checkBox").is(":checked");
var cluster_zoom = is_grouping_enabled ? 14 : -1;
//cluster_zoom.removeFrom(map);
if (markerCluster != null) {
map.removeLayer(markerCluster);
}
markerCluster = L.markerClusterGroup({
disableClusteringAtZoom: cluster_zoom,
zoomToBoundsOnClick: true,
spiderfyOnMaxZoom: false,
showCoverageOnHover: false,
iconCreateFunction: function(cluster) {
var childCount = cluster.getChildCount();
var c = ' my-marker-cluster-';
if (childCount < 10) {
c += 'small';
} else if (childCount < 100) {
c += 'medium';
} else {
c += 'large';
}
var statuses = {};
cluster.getAllChildMarkers().forEach(function(marker) {
if (marker.channel != null) {
var status = marker.channel.status_id;
if (!statuses[status]) {
statuses[status] = 1;
}
statuses[status]++;
}
});
var total_on = statuses[1];
var total_off = statuses[2];
var total_stopped = statuses[3];
var total_unknown = statuses[-2]; // added line
total_on = total_on == null ? 0 : total_on;
total_off = total_off == null ? 0 : total_off;
total_stopped = total_stopped == null ? 0 : total_stopped;
total_unknown = total_unknown == null ? 0 : total_unknown; // added line
var total = total_on + total_off + total_stopped + total_unknown; // modified line
var s_style = 'style="' + getMarkerCircleStyle(
total_on / total * 100, "#00e300",
total_off / total * 100, "#ff0000",
total_stopped / total * 100, "#c5c5c4",
total_unknown / total * 100, "#009ef7") + '"'; // modified line
var icon = new L.DivIcon({
html: '