Commit da79db0f authored by Amon's avatar Amon
Browse files

Clustering working

parent f4b6c028
.leaflet-control-playback{position:relative;background-color:#7cbdf5;padding:10px;}
.leaflet-control-playback .optionsContainer{position:relative;}
.leaflet-control-playback .optionsContainer > div {
display: inline-block;
}
.leaflet-control-playback .buttonContainer {}
.leaflet-control-playback .buttonContainer a {
display: inline-block;
width: 32px;
height: 32px;
text-decoration: none;
}
.leaflet-control-playback .buttonContainer .btn-stop {
background: url(./images/icon-play.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-start {
background: url(./images/icon-stop.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-restart {
background: url(./images/icon-restart.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-slow {
background: url(./images/icon-slow.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-quick {
background: url(./images/icon-quick.png) no-repeat center;
}
.leaflet-control-playback .buttonContainer .btn-close {
background: url(./images/icon-close.png) no-repeat center;
}
.leaflet-control-playback .infoContainer {}
.leaflet-control-playback .sliderContainer {}
\ No newline at end of file
.marker-cluster div {
background: #088A08 !important
}
.marker-cluster-small, .marker-cluster-medium, .marker-cluster-large {
background: rgba(207, 214, 199, 0.6) !important
}
.marker-cluster-small {
background-color: rgba(181, 226, 140, 0.6);
}
.marker-cluster-small div {
background-color: rgba(110, 204, 57, 0.6);
}
.marker-cluster-medium {
background-color: rgba(241, 211, 87, 0.6);
}
.marker-cluster-medium div {
background-color: rgba(240, 194, 12, 0.6);
}
.marker-cluster-large {
background-color: rgba(253, 156, 115, 0.6);
}
.marker-cluster-large div {
background-color: rgba(241, 128, 23, 0.6);
}
/* IE 6-8 fallback colors */
.leaflet-oldie .marker-cluster-small {
background-color: rgb(181, 226, 140);
}
.leaflet-oldie .marker-cluster-small div {
background-color: rgb(110, 204, 57);
}
.leaflet-oldie .marker-cluster-medium {
background-color: rgb(241, 211, 87);
}
.leaflet-oldie .marker-cluster-medium div {
background-color: rgb(240, 194, 12);
}
.leaflet-oldie .marker-cluster-large {
background-color: rgb(253, 156, 115);
}
.leaflet-oldie .marker-cluster-large div {
background-color: rgb(241, 128, 23);
}
.marker-cluster {
background-clip: padding-box;
border-radius: 20px;
}
.marker-cluster div {
width: 30px;
height: 30px;
margin-left: 5px;
margin-top: 5px;
text-align: center;
border-radius: 15px;
font: 12px "Helvetica Neue", Arial, Helvetica, sans-serif;
}
.marker-cluster span {
line-height: 30px;
}
.leaflet-cluster-anim .leaflet-marker-icon, .leaflet-cluster-anim .leaflet-marker-shadow {
-webkit-transition: -webkit-transform 0.3s ease-out, opacity 0.3s ease-in;
-moz-transition: -moz-transform 0.3s ease-out, opacity 0.3s ease-in;
-o-transition: -o-transform 0.3s ease-out, opacity 0.3s ease-in;
transition: transform 0.3s ease-out, opacity 0.3s ease-in;
}
.leaflet-cluster-spider-leg {
/* stroke-dashoffset (duration and function) should match with leaflet-marker-icon transform in order to track it exactly */
-webkit-transition: -webkit-stroke-dashoffset 0.3s ease-out, -webkit-stroke-opacity 0.3s ease-in;
-moz-transition: -moz-stroke-dashoffset 0.3s ease-out, -moz-stroke-opacity 0.3s ease-in;
-o-transition: -o-stroke-dashoffset 0.3s ease-out, -o-stroke-opacity 0.3s ease-in;
transition: stroke-dashoffset 0.3s ease-out, stroke-opacity 0.3s ease-in;
}
function loadAllMaps() {
mapDivs = ['map-study-categories']
mapDivs = ['map-study-categories']
for (i = 0; i < mapDivs.length; i++) {
initMap(mapDivs[i])
}
for (i = 0; i < mapDivs.length; i++) {
initMap(mapDivs[i])
}
}
function initMap(mapDiv) {
......@@ -18,30 +18,32 @@ function initMap(mapDiv) {
center: [0.0, 0.0],
timeDimension: true,
timeDimensionOptions: {
timeInterval: "2020-01-20/".concat(currentDate),
period: "P1D"
timeInterval: "2020-01-20/".concat(currentDate),
period: "P1D"
},
timeDimensionControl: false,
timeDimensionControlOptions: {
position: "topright",
position: "topright",
}
});
L.tileLayer( 'https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}.png', {
attribution: 'Map tiles by <a href="https://carto.com/">Carto</a>, under <a href="https://creativecommons.org/licenses/by/3.0/">CC BY 3.0.</a> Data by <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>, under ODbL.',
subdomains: ['a','b','c']
}).addTo( map );
subdomains: ['a', 'b', 'c']
}).addTo(map);
// load geojson file
projectCentroidsUrl = 'assets/data/covid-19_clinical_trials_points.geojson';
setTimeout(function(){ map.invalidateSize()}, 400);
setTimeout(function () {
map.invalidateSize()
}, 400);
var plotDiv = mapDiv.replace('map', 'plot');
var plotCumDiv = mapDiv.replace('map', 'cumplot');
addGeojsonLayer(map, projectCentroidsUrl, mapDiv, plotDiv, plotCumDiv);
// add custom date format to the time dimension control
// add custom date format to the time dimension control
L.Control.TimeDimensionCustom = L.Control.TimeDimension.extend({
_getDisplayDateFormat: function(date){
return date.toISOString().split('T')[0];
_getDisplayDateFormat: function (date) {
return date.toISOString().split('T')[0];
}
});
var timeDimensionControl = new L.Control.TimeDimensionCustom({
......@@ -57,19 +59,19 @@ function initMap(mapDiv) {
}
// add scale bar
var scale = L.control.scale(
{
'imperial': false,
'updateWhenIdle': true
}
);
scale.addTo(map);
var scale = L.control.scale({
'imperial': false,
'updateWhenIdle': true
});
scale.addTo(map);
// add HeiGIT logo
var logo = L.control({position: 'bottomleft'});
logo.onAdd = function(map){
var logo = L.control({
position: 'bottomleft'
});
logo.onAdd = function (map) {
var div = L.DomUtil.create('div', 'logoContainer');
div.innerHTML= "<img src='assets/img/logos/heigit_logo.png' width='7%' height='7%'/>";
div.innerHTML = "<img src='assets/img/logos/heigit_logo.png' width='7%' height='7%'/>";
return div;
}
logo.addTo(map);
......@@ -77,106 +79,137 @@ function initMap(mapDiv) {
}
function addLegend_studyType(map) {
legend = L.control({position: 'bottomleft'});
legend = L.control({
position: 'bottomleft'
});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend')
div.innerHTML += '<i style="background:orange"></i>Observational Study<br>'
div.innerHTML += '<i style="background:blue"></i>Interventional Study<br>'
div.innerHTML += '<i style="background:grey"></i>Other<br>'
return div;
var div = L.DomUtil.create('div', 'info legend')
div.innerHTML += '<i style="background:orange"></i>Observational Study<br>'
div.innerHTML += '<i style="background:blue"></i>Interventional Study<br>'
div.innerHTML += '<i style="background:grey"></i>Other<br>'
return div;
};
legend.addTo(map);
}
function addLegend_studyCategory(map) {
legend = L.control({position: 'bottomleft'});
legend = L.control({
position: 'bottomleft'
});
legend.onAdd = function (map) {
var div = L.DomUtil.create('div', 'info legend')
div.innerHTML += '<i style="background:#1B9E77"></i>Diagnosis<br>'
div.innerHTML += '<i style="background:#BF5B17"></i>Disease understanding<br>'
div.innerHTML += '<i style="background:#386CB0"></i>Therapeutic stategies<br>'
div.innerHTML += '<i style="background:#7FC97F"></i>Drugs<br>'
div.innerHTML += '<i style="background:#FDC086"></i>Advanced therapy medicinal products<br>'
div.innerHTML += '<i style="background:#BEAED4"></i>Vaccines<br>'
div.innerHTML += '<i style="background:#F0027F"></i>Traditional Chinese medicine<br>'
div.innerHTML += '<i style="background:#FFFF99"></i>Impact on helpers<br>'
//div.innerHTML += '<i style="background:brown"></i>Epidemiological Study<br>'
div.innerHTML += '<i style="background:#666666"></i>Other<br>'
return div;
var div = L.DomUtil.create('div', 'info legend')
div.innerHTML += '<i style="background:#0B610B"></i>Cluster of studies - click to expand<br>'
div.innerHTML += '<i style="background:#1B9E77"></i>Diagnosis<br>'
div.innerHTML += '<i style="background:#BF5B17"></i>Disease understanding<br>'
div.innerHTML += '<i style="background:#386CB0"></i>Therapeutic strategies<br>'
div.innerHTML += '<i style="background:#7FC97F"></i>Drugs<br>'
div.innerHTML += '<i style="background:#FDC086"></i>Advanced therapy medicinal products<br>'
div.innerHTML += '<i style="background:#BEAED4"></i>Vaccines<br>'
div.innerHTML += '<i style="background:#F0027F"></i>Traditional Chinese medicine<br>'
div.innerHTML += '<i style="background:#FFFF99"></i>Impact on helpers<br>'
div.innerHTML += '<i style="background:#666666"></i>Other<br>'
return div;
};
legend.addTo(map);
}
function set_style_studyType(feature) {
if (feature.properties.study_type == "Observational study") {
return {
fillColor: 'orange', color:'black', radius: 7,
fillOpacity: 0.5}
} else if (feature.properties.study_type == "Interventional study") {
return {
fillColor: 'blue',
radius: 7}
} else {
return {
fillColor: 'grey',
radius: 7}
}
function get_style_studyType(feature) {
if (feature.properties.study_type == "Observational study") {
return {
fillColor: 'orange',
color: 'black',
radius: 7,
fillOpacity: 0.5
}
} else if (feature.properties.study_type == "Interventional study") {
return {
fillColor: 'blue',
radius: 7
}
} else {
return {
fillColor: 'grey',
radius: 7
}
}
}
function set_style_studyCategory(feature) {
varStrokeOpacity= .7
if (feature.properties.classification == "drugs") {
return {
fillColor: '#7FC97F', color:'grey', radius: 7, opacity: varStrokeOpacity,
fillOpacity: 0.5}
} else if (feature.properties.classification == "vaccine") {
return {
fillColor: '#BEAED4',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "ATMP") {
return {
fillColor: '#FDC086', color:'grey',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "impact on the helpers") {
return {
fillColor: '#FFFF99', color:'grey',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "management") {
return {
fillColor: '#386CB0',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "traditional chinese medicine") {
return {
fillColor: '#F0027F',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "diagnosis") {
return {
fillColor: '#1B9E77',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else if (feature.properties.classification == "understanding") {
return {
fillColor: '#BF5B17',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
} else {
return {
fillColor: '#666666',
fillOpacity: 0.5, opacity: varStrokeOpacity,
radius: 7}
}
function get_style_studyCategory(feature) {
varStrokeOpacity = .7
if (feature.properties.classification == "drugs") {
return {
fillColor: '#7FC97F',
color: 'grey',
radius: 7,
opacity: varStrokeOpacity,
fillOpacity: 0.5
}
} else if (feature.properties.classification == "vaccine") {
return {
fillColor: '#BEAED4',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "ATMP") {
return {
fillColor: '#FDC086',
color: 'grey',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "impact on the helpers") {
return {
fillColor: '#FFFF99',
color: 'grey',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "management") {
return {
fillColor: '#386CB0',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "traditional chinese medicine") {
return {
fillColor: '#F0027F',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "diagnosis") {
return {
fillColor: '#1B9E77',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else if (feature.properties.classification == "understanding") {
return {
fillColor: '#BF5B17',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
} else {
return {
fillColor: '#666666',
fillOpacity: 0.5,
opacity: varStrokeOpacity,
radius: 7
}
}
}
function addGeojsonLayer (map, url, mapDiv, plotDiv, cumPlotDiv) {
function addGeojsonLayer(map, url, mapDiv, plotDiv, cumPlotDiv) {
var geojsonData = $.ajax({
url:url,
url: url,
dataType: "json",
success: console.log("clinical trials data successfully loaded."),
/*error: function (xhr) {
......@@ -184,70 +217,82 @@ function addGeojsonLayer (map, url, mapDiv, plotDiv, cumPlotDiv) {
}*/
})
// Specify that this code should run once the county data request is complete
$.when(geojsonData).done(function() {
$.when(geojsonData).done(function () {
// define default point style
var geojsonMarker = {
radius: 6,
fillColor: "grey",
color: "white",
weight: 1,
opacity: 1,
fillOpacity: 0.8
radius: 6,
fillColor: "grey",
color: "white",
weight: 1,
opacity: 1,
fillOpacity: 0.8
};
// create geojson layer
// Old layers building
if (mapDiv == "map-study-categories") {
// classification layer
layer = L.geoJSON(geojsonData.responseJSON, {
pointToLayer: function (feature, latlng) {
let marker = L.circleMarker(latlng, geojsonMarker);
marker.on("click", function(data) {
circleMarkerClick(data, map)
});
return marker;
},
style: set_style_studyCategory
// classification layer
geoJsonLayer = L.geoJSON(geojsonData.responseJSON, {
pointToLayer: function (feature, latlng) {
let marker = L.circleMarker(latlng, geojsonMarker);
marker.on("click", function (data) {
circleMarkerClick(data, map)
});
return marker;
},
style: get_style_studyCategory
})
} else if (mapDiv == "map-study-types") {
layer = L.geoJSON(geojsonData.responseJSON, {
geoJsonLayer = L.geoJSON(geojsonData.responseJSON, {
pointToLayer: function (feature, latlng) {
let marker = L.circleMarker(latlng, geojsonMarker);
marker.on("click", function(data) {
circleMarkerClick(data, map)
});
return marker;
let marker = L.circleMarker(latlng, geojsonMarker);
marker.on("click", function (data) {
circleMarkerClick(data, map)
});
return marker;
},
style: set_style_studyType
style: get_style_studyType
})
}
timeDimension_layer = L.timeDimension.layer.geoJson(layer)
// timeDimension_layer = L.timeDimension.layer.geoJson(markersLayer)
timeDimension_layer = L.timeDimension.layer.geoJsonCluster(geoJsonLayer)
timeDimension_layer.bindPopup(function (timeDimension_layer) {
// popup with a link to the project page with detailed information
popup = '<p>'+layer.feature.properties.name+'</p>'
return popup;
// popup with a link to the project page with detailed information
popup = '<p>' + layer.feature.properties.name + '</p>'
return popup;
});
timeDimension_layer.addTo(map)
// fit to layer extent
map.fitBounds(layer.getBounds());
map.fitBounds(geoJsonLayer.getBounds());
// add plot only for first map
//if (mapDiv == "map-study-categories") {
makePlot(geojsonData.responseJSON, plotDiv)
makeCumPlot(geojsonData.responseJSON, cumPlotDiv)
// populate table
var tableDivID = 'clinicalTrialsTable'
populateDataTable(geojsonData.responseJSON, tableDivID)
//}
})
}
function circleMarkerClick (event, map) {
function getMarkerStyle (section, feature) {
if (section == "map-study-categories") {
return get_style_studyCategory(feature)
}
return get_style_studyType(feature)
}
function circleMarkerClick(event, map) {
let properties = event.target.feature.properties
let geometry = event.target.feature.geometry
var popup = new L.Popup();
var center = {lat: geometry.coordinates[1], lng: geometry.coordinates[0]}
var center = {
lat: geometry.coordinates[1],
lng: geometry.coordinates[0]
}
var popupContent = `
Name: <b><a href=${properties.weburl}>${properties.name}</a></b></br>
Description: <b>${properties.description}</b></br>
......@@ -262,41 +307,41 @@ function circleMarkerClick (event, map) {
}
function populateDataTable(geojsonData, tableDivID) {
var tableRef = document.getElementById(tableDivID).getElementsByTagName('tbody')[0];
var tableRef = document.getElementById(tableDivID).getElementsByTagName('tbody')[0];
geojsonData.features.forEach(function(element) {
geojsonData.features.forEach(function (element) {
tr = tableRef.insertRow();
td = document.createElement('td')
td.innerHTML = '<p><a href="'+element.properties.weburl+'">'+element.properties.name+'</></p>'
td.innerHTML = '<p><a href="' + element.properties.weburl + '">' + element.properties.name + '</></p>'
tr.appendChild(td)
td = document.createElement('td')
td.innerHTML = '<p>'+element.properties.description+'</p>'
td.innerHTML = '<p>' + element.properties.description + '</p>'
tr.appendChild(td)
td = document.createElement('td')
td.innerHTML = '<p>'+element.properties.study_type+'</p>'
td.innerHTML = '<p>' + element.properties.study_type + '</p>'
tr.appendChild(td)
td = document.createElement('td')
td.innerHTML = '<p>'+element.properties.classification+'</p>'
td.innerHTML = '<p>' + element.properties.classification + '</p>'
tr.appendChild(td)
td = document.createElement('td')
td.innerHTML = '<p>'+element.properties.time+'</p>'
td.innerHTML = '<p>' + element.properties.time + '</p>'
tr.appendChild(td)
td = document.createElement('td')
td.innerHTML = '<p>'+element.properties.dateEnrollment+'</p>'
td.innerHTML = '<p>' + element.properties.dateEnrollment +