mirror of
https://github.com/wavelog/wavelog.git
synced 2026-03-22 10:24:14 +00:00
392 lines
9.3 KiB
JavaScript
392 lines
9.3 KiB
JavaScript
let osmUrl = tileUrl;
|
|
let ituz;
|
|
let geojson;
|
|
let map;
|
|
let info;
|
|
|
|
let confirmedColor = 'rgba(144,238,144)';
|
|
if (typeof(user_map_custom.qsoconfirm) !== 'undefined') {
|
|
confirmedColor = user_map_custom.qsoconfirm.color;
|
|
}
|
|
let workedColor = 'rgba(229, 165, 10)';
|
|
if (typeof(user_map_custom.qso) !== 'undefined') {
|
|
workedColor = user_map_custom.qso.color;
|
|
}
|
|
let unworkedColor = 'rgba(204, 55, 45)';
|
|
if (typeof(user_map_custom.unworked) !== 'undefined') {
|
|
unworkedColor = user_map_custom.unworked.color;
|
|
}
|
|
|
|
function load_itu_map() {
|
|
$('.nav-tabs a[href="#itumaptab"]').tab('show');
|
|
$.ajax({
|
|
url: base_url + 'index.php/awards/itu_map',
|
|
type: 'post',
|
|
data: {
|
|
band: $('#band2').val(),
|
|
mode: $('#mode').val(),
|
|
worked: +$('#worked').prop('checked'),
|
|
confirmed: +$('#confirmed').prop('checked'),
|
|
notworked: +$('#notworked').prop('checked'),
|
|
qsl: +$('#qsl').prop('checked'),
|
|
eqsl: +$('#eqsl').prop('checked'),
|
|
lotw: +$('#lotw').prop('checked'),
|
|
qrz: +$('#qrz').prop('checked'),
|
|
},
|
|
success: function(data) {
|
|
ituz = data;
|
|
load_itu_map2(data);
|
|
},
|
|
error: function() {
|
|
|
|
},
|
|
});
|
|
}
|
|
|
|
function load_itu_map2(data) {
|
|
|
|
const zonemarkers = [
|
|
["60","-160"],
|
|
["55","-125"],
|
|
["55","-100"],
|
|
["55","-78"],
|
|
["73","-40"],
|
|
["40","-119"],
|
|
["40","-100"],
|
|
["40","-80"],
|
|
["55","-60"],
|
|
["20","-102"],
|
|
["21","-75"],
|
|
["-3","-72"],
|
|
["-5","-45"],
|
|
["-30","-65"],
|
|
["-25","-45"],
|
|
["-50","-65"],
|
|
["61","-26"],
|
|
["70","10"],
|
|
["70","40"],
|
|
["70","62.5"],
|
|
["70","82.5"],
|
|
["70","100"],
|
|
["70","122.5"],
|
|
["70","142.5"],
|
|
["70","162.5"],
|
|
["70","180"],
|
|
["52","2"],
|
|
["45","18"],
|
|
["53","36"],
|
|
["53","62.5"],
|
|
["53","82.5"],
|
|
["53","100"],
|
|
["53","122.5"],
|
|
["53","142"],
|
|
["55","160"],
|
|
["35","-25"],
|
|
["35","0"],
|
|
["27.5","22.5"],
|
|
["27","42"],
|
|
["32","56"],
|
|
["10","75"],
|
|
["39","82.5"],
|
|
["33","100"],
|
|
["33","118"],
|
|
["33","140"],
|
|
["15","-10"],
|
|
["12.5","22"],
|
|
["5","40"],
|
|
["15","100"],
|
|
["10","120"],
|
|
["-4","150"],
|
|
["-7","17"],
|
|
["-12.5","45"],
|
|
["-2","115"],
|
|
["-20","140"],
|
|
["-20","170"],
|
|
["-30","24"],
|
|
["-25","120"],
|
|
["-40","140"],
|
|
["-40","170"],
|
|
["15","-170"],
|
|
["-15","-170"],
|
|
["-15","-135"],
|
|
["10","140"],
|
|
["10","162"],
|
|
["-23","-11"],
|
|
["-70","10"],
|
|
["-47.5","60"],
|
|
["-70","70"],
|
|
["-70","130"],
|
|
["-70","-170"],
|
|
["-70","-110"],
|
|
["-70","-050"],
|
|
["-82.5","0"],
|
|
["82.5","0"],
|
|
["40","-150"],
|
|
["15","-135"],
|
|
["-15","-95"],
|
|
["-40","-160"],
|
|
["-40","-125"],
|
|
["-40","-90"],
|
|
["50","-30"],
|
|
["25","-47.5"],
|
|
["-45","-40"],
|
|
["-45","10"],
|
|
["-25","70"],
|
|
["-25","95"],
|
|
["-50","95"],
|
|
["-54","140"],
|
|
["39","165"]
|
|
];
|
|
|
|
// If map is already initialized
|
|
var container = L.DomUtil.get('itumap');
|
|
|
|
if(container != null){
|
|
container._leaflet_id = null;
|
|
container.remove();
|
|
$("#itumaptab").append('<div id="itumap" class="map-leaflet" ></div>');
|
|
}
|
|
|
|
map = new L.Map('itumap', {
|
|
fullscreenControl: true,
|
|
fullscreenControlOptions: {
|
|
position: 'topleft'
|
|
},
|
|
});
|
|
|
|
L.tileLayer(
|
|
osmUrl,
|
|
{
|
|
attribution: option_map_tile_server_copyright,
|
|
maxZoom: 18
|
|
}
|
|
).addTo(map);
|
|
|
|
var notworked = zonemarkers.length;
|
|
var confirmed = 0;
|
|
var workednotconfirmed = 0;
|
|
|
|
for (var i = 0; i < zonemarkers.length; i++) {
|
|
var mapColor = unworkedColor ;
|
|
|
|
if (data[i] == 'C') {
|
|
mapColor = confirmedColor;
|
|
confirmed++;
|
|
notworked--;
|
|
}
|
|
if (data[i] == 'W') {
|
|
mapColor = workedColor;
|
|
workednotconfirmed++;
|
|
notworked--;
|
|
}
|
|
|
|
var title = '<span class="grid-text" style="cursor: default"><font style="color: \'white\'; font-size: 1.5em; font-weight: 900;">' + (Number(i)+Number(1)) + '</font></span>';
|
|
var myIcon = L.divIcon({className: 'my-div-icon', html: title});
|
|
|
|
L.marker(
|
|
[zonemarkers[i][0], zonemarkers[i][1]], {
|
|
icon: myIcon,
|
|
title: (Number(i)+Number(1)),
|
|
zIndex: 1000,
|
|
}
|
|
).addTo(map).on('click', onClick);
|
|
}
|
|
|
|
|
|
map.setView([52, -100], 3);
|
|
/*Legend specific*/
|
|
var legend = L.control({ position: "topright" });
|
|
|
|
legend.onAdd = function(map) {
|
|
var div = L.DomUtil.create("div", "legend");
|
|
var band = $('#band2').val();
|
|
div.innerHTML += "<h4>Band: " + band + "</h4>";
|
|
div.innerHTML += "<i style='background: " + confirmedColor + "'></i><span>" + lang_general_word_confirmed + " (" + confirmed + ")</span><br>";
|
|
div.innerHTML += "<i style='background: " + workedColor + "'></i><span>" + lang_general_word_worked_not_confirmed + " (" + workednotconfirmed + ")</span><br>";
|
|
div.innerHTML += "<i style='background: " + unworkedColor + "'></i><span>" + lang_general_word_not_worked + " (" + notworked + ")</span><br>";
|
|
return div;
|
|
};
|
|
|
|
legend.addTo(map);
|
|
|
|
info = L.control();
|
|
|
|
info.onAdd = function (map) {
|
|
this._div = L.DomUtil.create('div', 'info'); // create a div with a class "info"
|
|
this.update();
|
|
return this._div;
|
|
};
|
|
|
|
// method that we will use to update the control based on feature properties passed
|
|
info.update = function (props) {
|
|
this._div.innerHTML = '<h4>'+lang_general_hamradio_ituzone+'</h4>' + (props ? createContentITU(props.itu_zone_number, props.itu_zone_name) : lang_hover_over_a_zone);
|
|
};
|
|
|
|
info.addTo(map);
|
|
geojson = L.geoJson(ituzonestuff, {style: style, onEachFeature: onEachFeature}).addTo(map);
|
|
|
|
map.setView([20, 0], 2);
|
|
}
|
|
|
|
function getColor(d) {
|
|
return ituz[d-1] == 'C' ? confirmedColor :
|
|
ituz[d-1] == 'W' ? workedColor :
|
|
unworkedColor;
|
|
}
|
|
|
|
function highlightFeature(e) {
|
|
var layer = e.target;
|
|
|
|
layer.setStyle({
|
|
weight: 3,
|
|
color: 'white',
|
|
dashArray: '',
|
|
fillOpacity: 0.8
|
|
});
|
|
|
|
layer.bringToFront();
|
|
info.update(layer.feature.properties);
|
|
}
|
|
|
|
function onEachFeature(feature, layer) {
|
|
layer.on({
|
|
mouseover: highlightFeature,
|
|
mouseout: resetHighlight,
|
|
click: onClick2
|
|
});
|
|
}
|
|
|
|
function zoomToFeature(e) {
|
|
map.fitBounds(e.target.getBounds());
|
|
}
|
|
|
|
function resetHighlight(e) {
|
|
geojson.resetStyle(e.target);
|
|
info.update();
|
|
}
|
|
|
|
function style(feature) {
|
|
return {
|
|
fillColor: getColor(feature.properties.itu_zone_number),
|
|
weight: 1,
|
|
opacity: 1,
|
|
color: 'white',
|
|
// dashArray: '3',
|
|
fillOpacity: 0.6
|
|
};
|
|
}
|
|
|
|
function onClick(e) {
|
|
var marker = e.target;
|
|
displayContactsOnMap($("#itumap"),marker.options.title, $('#band2').val(), 'All', 'All', $('#mode').val(), 'ITU');
|
|
}
|
|
|
|
function onClick2(e) {
|
|
zoomToFeature(e);
|
|
console.log(e);
|
|
var marker = e.target;
|
|
displayContactsOnMap($("#itumap"),marker.feature.properties.itu_zone_number, $('#band2').val(), 'All', 'All', $('#mode').val(), 'ITU');
|
|
}
|
|
|
|
function createContentITU(zone, text){
|
|
var ctemp, ptemp, rtemp, value, value1;
|
|
var rowspan = (text.match(/#/g) || []).length + 1;
|
|
var rows = text.split("#");
|
|
var row = rows[0];
|
|
var col = row.split(":");
|
|
ptemp = (col[0].match(/!/g) || []).length;
|
|
if (ptemp > 1){
|
|
ptemp = 'rowspan="'+ptemp+'" ';
|
|
} else {
|
|
ptemp = '';
|
|
}
|
|
rowspan = (col[1].match(/!/g) || []).length;
|
|
if (rowspan!=0){
|
|
rtemp = 'rowspan="'+rowspan+'" ';
|
|
} else {
|
|
rtemp = '';
|
|
}
|
|
colspan = (col[2].match(/\*/g) || []).length;
|
|
if (colspan != 0) {
|
|
ctemp = 'colspan="'+colspan+'" ';
|
|
} else {
|
|
ctemp = '';
|
|
}
|
|
value1 = col[2].replace(/\+/g,'<br>');
|
|
var content = '<table style="border-color: white" class="table-sm table-striped table-bordered">'+
|
|
'<tbody>'+
|
|
'<tr style="vertical-align: middle;">'+
|
|
'<td '+ptemp+' style="font-size: x-large; color: #ff0000;text-align: center;">'+zone+'</td>'+
|
|
'<td '+rtemp+'style="vertical-align: top;font-size: small;">'+col[1].slice(rowspan)+'</td>'+
|
|
'<td '+ctemp+'style="vertical-align: top;font-size: small;">'+value1.slice(colspan)+'</td>'+
|
|
'</tr>';
|
|
|
|
for (var i = 1; i < rows.length; i++) {
|
|
var row = rows[i];
|
|
var col = row.split(":");
|
|
rowspan = (row.match(/!/g) || []).length;
|
|
if (rowspan!=0){
|
|
rtemp = 'rowspan="'+rowspan+'" ';
|
|
}else{
|
|
rtemp = '';
|
|
}
|
|
colspan = (row.match(/\*/g) || []).length;
|
|
if (colspan!=0){
|
|
ctemp = 'colspan="'+colspan+'" ';
|
|
}else{
|
|
ctemp = '';
|
|
}
|
|
value1 = col[1].replace(/\+/g,'<br>');
|
|
content += '<tr style="font-size: small;">'+
|
|
'<td '+rtemp+'style="vertical-align: top;">'+col[0].slice(rowspan)+'</td>'+
|
|
'<td '+ctemp+'style="vertical-align: top;">'+value1.slice(colspan)+'</td>'+
|
|
'</tr>';
|
|
}
|
|
|
|
content += '</tbody></table>';
|
|
|
|
return content;
|
|
}
|
|
|
|
|
|
$(document).ready(function(){
|
|
$('.tableitu').DataTable({
|
|
"pageLength": 25,
|
|
responsive: false,
|
|
ordering: false,
|
|
"scrollY": "400px",
|
|
"scrollCollapse": true,
|
|
"paging": false,
|
|
"scrollX": true,
|
|
"language": {
|
|
url: getDataTablesLanguageUrl(),
|
|
},
|
|
dom: 'Bfrtip',
|
|
buttons: [
|
|
'csv'
|
|
]
|
|
});
|
|
|
|
$('.tablesummary').DataTable({
|
|
info: false,
|
|
searching: false,
|
|
ordering: false,
|
|
"paging": false,
|
|
"language": {
|
|
url: getDataTablesLanguageUrl(),
|
|
},
|
|
dom: 'Bfrtip',
|
|
"language": {
|
|
url: getDataTablesLanguageUrl(),
|
|
},
|
|
buttons: [
|
|
'csv'
|
|
]
|
|
});
|
|
|
|
// change color of csv-button if dark mode is chosen
|
|
if (isDarkModeTheme()) {
|
|
$(".buttons-csv").css("color", "white");
|
|
}
|
|
});
|