Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Bugfix/3.1/collection list map clustering #1373

Merged
merged 5 commits into from
May 30, 2024
Merged

Bugfix/3.1/collection list map clustering #1373

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a3d2907
reroute map result to map search b/c this is fully featured
MuchQuak May 24, 2024
b27bc31
closes #1345 add add reference marker functionality to map/index so t…
MuchQuak May 24, 2024
7a96a26
inversing switch so logic works out
MuchQuak May 30, 2024
65b47fa
default clustering off
MuchQuak May 30, 2024
87d2c1c
moved cluster switch on by default from needing param and it just def…
MuchQuak May 30, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 3 additions & 10 deletions collections/list.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -389,17 +389,10 @@ function displayDatasetTools() {
<?php echo $LANG['MAP_DESCRIPTION']; ?>
</div>
<div style='margin-top:10px;'>
<?php if (empty($GOOGLE_MAP_KEY)) { ?>
<button onclick="openLeafletMapPU();">
<?php echo $LANG['MAP_DISPLAY']; ?>
</button>
<?php } else { ?>
<button onclick="openGoogleMapPU();">
<?php echo $LANG['MAP_DISPLAY']; ?>
</button>
<?php } ?>
<button onclick="openMapPU();">
<?php echo $LANG['MAP_DISPLAY']; ?>
</button>
</div>

<div style='margin-top:10px;'>
<h2><?php echo $LANG['KML_HEADER']; ?></h2>
</div>
Expand Down
179 changes: 171 additions & 8 deletions collections/map/index.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,8 @@
$distFromMe = array_key_exists('distFromMe', $_REQUEST)?$_REQUEST['distFromMe']:'';
$gridSize = array_key_exists('gridSizeSetting', $_REQUEST) && $_REQUEST['gridSizeSetting']?$_REQUEST['gridSizeSetting']:60;
$minClusterSize = array_key_exists('minClusterSetting',$_REQUEST)&&$_REQUEST['minClusterSetting']?$_REQUEST['minClusterSetting']:10;
$clusterOff = array_key_exists('clusterSwitch',$_REQUEST)&&$_REQUEST['clusterSwitch']?$_REQUEST['clusterSwitch']:'n';
$clusterOff = array_key_exists('clusterSwitch',$_REQUEST)&&$_REQUEST['clusterSwitch']? $_REQUEST['clusterSwitch']:'y';
$menuClosed = array_key_exists('menuClosed',$_REQUEST)? true: false;
$recLimit = array_key_exists('recordlimit',$_REQUEST)?$_REQUEST['recordlimit']:15000;
$catId = array_key_exists('catid',$_REQUEST)?$_REQUEST['catid']:0;
$tabIndex = array_key_exists('tabindex',$_REQUEST)?$_REQUEST['tabindex']:0;
Expand All @@ -29,7 +30,7 @@
//Sanitation
if(!is_numeric($gridSize)) $gridSize = 60;
if(!is_numeric($minClusterSize)) $minClusterSize = 10;
if(!is_string($clusterOff) || strlen($clusterOff) > 1) $clusterOff = 'n';
if(!is_string($clusterOff) || strlen($clusterOff) > 1) $clusterOff = 'y';
if(!is_numeric($recLimit)) $recLimit = 15000;
if(!is_numeric($distFromMe)) $distFromMe = '';
if(!is_numeric($catId)) $catId = 0;
Expand Down Expand Up @@ -311,6 +312,9 @@
//Object that maps portals to matching mapGroup Index
let portalLegendMap = {}

//Indciates if clustering should be drawn. Only comes into effect after redraw or refreshes
let clusteroff = true;

const colorChange = new Event("colorchange", {
bubbles: true,
cancelable: true,
Expand Down Expand Up @@ -339,7 +343,7 @@ function buildPanels(cross_portal_enabled) {
}
setPanels(true);
$("#accordion").accordion("option",{active: 1});
buildPortalLegend();
buildPortalLegend();
buildTaxaLegend();
buildCollectionLegend();

Expand Down Expand Up @@ -539,6 +543,51 @@ function setPolyCoords(wkt) {
document.getElementById("deleteshapediv").style.display = "block";
}

function addRefPoint() {
let lat = document.getElementById("lat").value;
let lng = document.getElementById("lng").value;
let title = document.getElementById("title").value;
let useLLDecimal = document.getElementById("useLLDecimal");
if(useLLDecimal?.style?.display === 'block'){
var latdeg = document.getElementById("latdeg").value;
var latmin = document.getElementById("latmin").value;
var latsec = document.getElementById("latsec").value;
var latns = document.getElementById("latns").value;
var longdeg = document.getElementById("longdeg").value;
var longmin = document.getElementById("longmin").value;
var longsec = document.getElementById("longsec").value;
var longew = document.getElementById("longew").value;
if(latdeg != null && longdeg != null){
if(latmin == null) latmin = 0;
if(latsec == null) latsec = 0;
if(longmin == null) longmin = 0;
if(longsec == null) longsec = 0;
lat = latdeg*1 + latmin/60 + latsec/3600;
lng = longdeg*1 + longmin/60 + longsec/3600;
if(latns == "S") lat = lat * -1;
if(longew == "W") lng = lng * -1;
}
}

if((lat === null || lat === "") && (lng === null || lng === "")){
window.alert("<?php echo $LANG['ENTER_VALUES_IN_LAT_LONG']; ?>");
} else if(lat < -180 || lat > 180 || lng < -180 || lng > 180) {
window.alert("<?php echo $LANG['LAT_LONG_MUST_BE_BETWEEN_VALUES']; ?> (" + lat + ";" + lng + ")");
} else {
var addPoint = true;
if(lng > 0) addPoint = window.confirm("<?php echo $LANG['LONGITUDE_IS_POSITIVE']; ?>?");
if(!addPoint) lng = -1*lng;

document.dispatchEvent(new CustomEvent('addReferencePoint', {
detail: {
lat,
lng,
title
}
}));
}
}

function leafletInit() {

L.DivIcon.CustomColor = L.DivIcon.extend({
Expand All @@ -565,8 +614,6 @@ function leafletInit() {
drawColor: {opacity: 0.85, fillOpacity: 0.55, color: '#000' },
}, setQueryShape);

let cluster = L.markerClusterGroup();
let clusteroff = false;
let cluster_type = "taxa";

let markers = [];
Expand Down Expand Up @@ -734,7 +781,10 @@ className: `marker-cluster`,
}

let cluster = L.markerClusterGroup({
iconCreateFunction: colorCluster
iconCreateFunction: colorCluster,
disableClusteringAtZoom: recordArr.length >= 10000? 12 : 10,
spiderfyOnMaxZoom: false,
chunkedLoading: true
});

value.id_map.forEach(g => {
Expand Down Expand Up @@ -962,6 +1012,21 @@ function fitMap() {
shape = null;
});

document.addEventListener('addReferencePoint', e => {
try {
marker = L.marker([
parseFloat(e.detail.lat),
parseFloat(e.detail.lng)
]);
if(e.detail.title) {
marker.bindTooltip(`<div style="font-size: 1.5rem">${e.detail.title}</div>`)
}
marker.addTo(map.drawLayer);
} catch(e) {
console.log('failed to add point because: ' + e)
}
});

document.getElementById('clusteroff').addEventListener('change', e => {
clusteroff = e.target.checked;
if(!heatmap) {
Expand Down Expand Up @@ -1029,7 +1094,6 @@ function googleInit() {
let heatmapLayer;

let bounds;
let clusteroff = false;

let cluster_type = "taxa";

Expand Down Expand Up @@ -1353,6 +1417,37 @@ function updateHeatmap() {
shape = null;
});

document.addEventListener('addReferencePoint', e => {
try {
var iconImg = new google.maps.MarkerImage( '../../images/google/arrow.png' );
let marker = new google.maps.Marker({
position: new google.maps.LatLng(
parseFloat(e.detail.lat),
parseFloat(e.detail.lng)
),
icon: iconImg,
zIndex: google.maps.Marker.MAX_ZINDEX
});

if(e.detail.title) {
const infoWin = new google.maps.InfoWindow({
content:`<div>${e.detail.title}</div>`
});

google.maps.event.addListener(marker, 'mouseover', () => {
infoWin.open(map.mapLayer, marker);
})

google.maps.event.addListener(marker, 'mouseout', () => {
infoWin.close();
})
}
marker.setMap(map.mapLayer);
} catch(e) {
console.log('failed to add point because: ' + e)
}
});

document.addEventListener('occur_click', function(e) {
for (let i = 0; i < recordArr.length; i++) {
if(recordArr[i]['occid'] === e.detail.occid) {
Expand Down Expand Up @@ -1676,6 +1771,8 @@ function initialize() {
collArr = JSON.parse(data.getAttribute('data-coll-map'));
recordArr = JSON.parse(data.getAttribute('data-records'));

clusteroff = data.getAttribute('data-cluster-off') ==='y'? true: false;

externalPortalHosts = JSON.parse(data.getAttribute('data-external-portal-hosts'));

searchVar = data.getAttribute('data-search-var');
Expand Down Expand Up @@ -1749,6 +1846,7 @@ function initialize() {
data-taxa-map="<?=htmlspecialchars(json_encode($taxaArr))?>"
data-coll-map="<?=htmlspecialchars(json_encode($collArr))?>"
data-records="<?=htmlspecialchars(json_encode($recordArr))?>"
data-cluster-off="<?=htmlspecialchars($clusterOff)?>"
data-external-portal-hosts="<?=htmlspecialchars(json_encode($EXTERNAL_PORTAL_HOSTS))?>"
class="service-container"
>
Expand All @@ -1757,7 +1855,7 @@ class="service-container"
<button onclick="document.getElementById('defaultpanel').style.width='380px'; " style="position:absolute;top:0;left:0;margin:0px;z-index:10;font-size: 14px;">&#9776; <b>Open Search Panel</b></button>
</div>
<div id='map' style='width:100vw;height:100vh;z-index:1'></div>
<div id="defaultpanel" class="sidepanel" style="width:390px">
<div id="defaultpanel" class="sidepanel" style="width: <?= $menuClosed? '0': '390px'?>">
<div class="panel-content">
<span style="position:absolute; top:0.7rem; right:0.7rem; z-index:1">
<a href="<?php echo htmlspecialchars($CLIENT_ROOT, ENT_COMPAT | ENT_HTML401 | ENT_SUBSTITUTE); ?>/index.php">
Expand Down Expand Up @@ -2000,6 +2098,71 @@ class="service-container"
<input style="margin: 0 1rem; width: 5rem;"value="3" id="heat-max-density" name="heat-max-density">
<br/>
</fieldset>
<br/>
<fieldset>
<legend>
<?= $LANG['ADD_REFERENCE_POINT'] ?>
</legend>
<div>
<div>
<?= $LANG['MARKER_NAME'] ?>:
<input name='title' id='title' size='15' type='text' />
</div>
<div class="latlongdiv">
<div>
<div style="float:left;margin-right:5px">
<?= $LANG['LATITUDE'] ?>
(<?= $LANG['DECIMAL'] ?>):
<input name='lat' id='lat' size='10' type='text' /> </div>
<div style="float:left;">eg: 34.57</div>
</div>
<div style="margin-top:5px;clear:both">
<div style="float:left;margin-right:5px">
<?= $LANG['LONGITUDE'] ?>
(<?= $LANG['DECIMAL'] ?>):
<input name='lng' id='lng' size='10' type='text' /> </div>
<div style="float:left;">eg: -112.38</div>
</div>
<div style='font-size:80%;margin-top:5px;clear:both'>
<a href='#' onclick='toggleLatLongDivs();'>
<?= $LANG['ENTER_IN_DMS']?>
</a>
</div>
</div>
<div id="useLLDecimal" class='latlongdiv' style='display:none;clear:both'>
<div>
<?= $LANG['LATITUDE'] ?>:
<input name='latdeg' id='latdeg' size='2' type='text' />&deg;
<input name='latmin' id='latmin' size='4' type='text' />&prime;
<input name='latsec' id='latsec' size='4' type='text' />&Prime;
<select name='latns' id='latns'>
<option value='N'><?= $LANG['NORTH']; ?></option>
<option value='S'><?= $LANG['SOUTH']; ?></option>
</select>
</div>
<div style="margin-top:5px;">
<?= $LANG['LONGITUDE'] ?>:
<input name='longdeg' id='longdeg' size='2' type='text' />&deg;
<input name='longmin' id='longmin' size='4' type='text' />&prime;
<input name='longsec' id='longsec' size='4' type='text' />&Prime;
<select name='longew' id='longew'>
<option value='E'><?= $LANG['EAST']; ?></option>
<option value='W' selected><?= $LANG['WEST']; ?></option>
</select>
</div>
<div style='font-size:80%;margin-top:5px;'>
<a href='#' onclick='toggleLatLongDivs();'>
<?= $LANG['ENTER_IN_DECIMAL'] ?>
</a>
</div>
</div>
<div style="margin-top:10px;">
<button onclick='addRefPoint();'>
<?= $LANG['ADD_MARKER'] ?>
</button>
</div>
</div>
</fieldset>
</div>
<form style="display:none;" name="csvcontrolform" id="csvcontrolform" action="csvdownloadhandler.php" method="post" onsubmit="">
<input data-role="none" name="selectionscsv" id="selectionscsv" type="hidden" value="" />
Expand Down
17 changes: 17 additions & 0 deletions content/lang/collections/map/index.en.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
------------------
*/
include_once($SERVER_ROOT.'/content/lang/collections/harvestparams.en.php');
include_once('mapshared.en.php');

$LANG['SEARCH_CRITERIA'] = 'Search Criteria and Options';
$LANG['CRITERIA'] = 'Criteria';
Expand Down Expand Up @@ -46,4 +47,20 @@

$LANG['MORE_INFO'] = 'more info...';

$LANG['MARKER_NAME'] = 'Marker Name';
$LANG['ADD_MARKER'] = 'Add Marker';
$LANG['ADD_REFERENCE_POINT'] = 'Add Point of Reference';
$LANG['ENTER_IN_DMS'] = 'Enter in D:M:S format';
$LANG['ENTER_IN_DECIMAL'] = 'Enter in decimal format';
$LANG['ENTER_VALUES_IN_LAT_LONG'] = 'Enter values in the latitude and longitude fields';
$LANG['LAT_LONG_MUST_BE_BETWEEN_VALUES'] = 'Latitude and Longitude must be of values between -180 and 180';
$LANG['LONGITUDE_IS_POSITIVE'] = 'Longitude is positive, which will put the marker in the eastern hemisphere (e.g. Asia).\nIs this what you want';
$LANG['QUERY_DOES_NOT_CONTAIN_RECORDS'] = 'Your query apparently does not contain any records with coordinates that can be mapped';
$LANG['EITHER_REC_NOT_GEOREF'] = 'Either the records in the query are not georeferenced (no lat/long)';
$LANG['OR'] = 'or';
$LANG['RARE_STATUS_REQUIRES'] = 'Rare/threatened status requires the locality coordinates be hidden';
$LANG['NORTH'] = 'N';
$LANG['SOUTH'] = 'S';
$LANG['EAST'] = 'E';
$LANG['WEST'] = 'W';
?>
20 changes: 19 additions & 1 deletion content/lang/collections/map/index.es.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
Date Translated: 2021-06-23
------------------
*/

include_once($SERVER_ROOT.'/content/lang/collections/harvestparams.es.php');
include_once('mapshared.es.php');

$LANG['SEARCH_CRITERIA'] = 'Criterios y opciones de búsqueda';
$LANG['CRITERIA'] = 'Criterios';
Expand Down Expand Up @@ -49,4 +49,22 @@
$LANG['CLICK_TO_EXPAND'] = 'Haga clic para ampliar';

$LANG['MORE_INFO'] = 'Más información...';

$LANG['MARKER_NAME'] = 'Nombre del Marcador';
$LANG['ADD_MARKER'] = 'Agregar Marcador';
$LANG['ADD_REFERENCE_POINT'] = 'Agregar punto de referencia';
$LANG['ENTER_IN_DMS'] = 'Ingrese en formato D:M:S';
$LANG['ENTER_IN_DECIMAL'] = 'Ingrese en formato decimal';
$LANG['FAILED_TO_LOAD_OCCR_DATA'] = 'Error al cargar los datos de ocurrencia';
$LANG['ENTER_VALUES_IN_LAT_LONG'] = 'Ingrese valores en los campos de latitud y longitud';
$LANG['LAT_LONG_MUST_BE_BETWEEN_VALUES'] = 'Latitud y Longitud deben tener valores entre -180 y 180';
$LANG['LONGITUDE_IS_POSITIVE'] = 'La Longitud es positiva, lo que colocará el marcador en el hemisferio oriental (por ejemplo, Asia).\n¿Es esto lo que quieres?';
$LANG['QUERY_DOES_NOT_CONTAIN_RECORDS'] = 'Su consulta aparentemente no contiene ningún registro con coordenadas que puedan mapearse';
$LANG['EITHER_REC_NOT_GEOREF'] = 'O los registros en la consulta no están georreferenciados (sin latitud/longitud)';
$LANG['OR'] = 'o';
$LANG['RARE_STATUS_REQUIRES'] = 'El estado raro/amenazado requiere que las coordenadas de la localidad estén ocultas';
$LANG['NORTH'] = 'N';
$LANG['SOUTH'] = 'S';
$LANG['EAST'] = 'E';
$LANG['WEST'] = 'W';
?>
19 changes: 19 additions & 0 deletions content/lang/collections/map/index.fr.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@
------------------
*/
include_once($SERVER_ROOT.'/content/lang/collections/harvestparams.fr.php');
include_once('mapshared.fr.php');

$LANG['SEARCH_CRITERIA'] = 'Critères et Options de Recherche';
$LANG['CRITERIA'] = 'Critères';
Expand Down Expand Up @@ -46,4 +47,22 @@

$LANG['MORE_INFO'] = "Plus d'informations...";

$LANG['MARKER_NAME'] = 'Nom de Marqueur';
$LANG['ADD_MARKER'] = 'Ajouter un Marqueur';
$LANG['ADD_REFERENCE_POINT'] = 'Ajouter un Point de Référence';
$LANG['ENTER_IN_DMS'] = 'Entrez au format D:M:S';
$LANG['ENTER_IN_DECIMAL'] = 'Entrez au format décimal';
$LANG['FAILED_TO_LOAD_OCCR_DATA'] = 'Échec du chargement des données d\'occurrence';
$LANG['ENTER_VALUES_IN_LAT_LONG'] = 'Entrez les valeurs dans les champs de latitude et de longitude';
$LANG['LAT_LONG_MUST_BE_BETWEEN_VALUES'] = 'Latitude et Longitude doivent avoir des valeurs comprises entre -180 et 180';
$LANG['LONGITUDE_IS_POSITIVE'] = 'La Longitude est positive, ce qui placera le marqueur dans l\'hémisphère oriental (par exemple l\'Asie).\nEst-ce ce que vous voulez';
$LANG['QUERY_DOES_NOT_CONTAIN_RECORDS'] = 'Votre requête ne contient apparemment aucun enregistrement avec des coordonnées pouvant être cartographiées';
$LANG['EITHER_REC_NOT_GEOREF'] = 'Soit les enregistrements de la requête ne sont pas géoréférencés (pas de latitude/longitude)';
$LANG['OR'] = 'ou';
$LANG['RARE_STATUS_REQUIRES'] = 'Le statut rare/menacé nécessite que les coordonnées de la localité soient masquées';
$LANG['NORTH'] = 'N';
$LANG['SOUTH'] = 'S';
$LANG['EAST'] = 'E';
$LANG['WEST'] = 'W';

?>
Loading