Seminars and Conferences
viewof year_filter = Inputs.form({
beg: Inputs.number([2022, Infinity], {step: 1, label: 'From', placeholder: new Date().getFullYear(), value: new Date().getFullYear()}),
end: Inputs.number([2022, Infinity], {step: 1, label: 'to', placeholder: new Date().getFullYear(), value: new Date().getFullYear()}),
},
{
template: (inputs) => htl.html`<div class="row justify-content-between no-gutters">
<div class="col">${inputs.beg}</div>
<div class="col">${inputs.end}</div>
</div>`
});
filtered = transpose(data).filter(function(presentation) {
return year_filter.beg <= new Date(presentation.date).getFullYear() && new Date(presentation.date).getFullYear() <= year_filter.end;
})
width = '100%';
height = '500px';
presentationMap = {
// You'll often see Leaflet examples initializing a map like L.map('map'),
// which tells the library to look for a div with the id 'map' on the page.
// In Observable, we instead create a div from scratch in this cell, so it's
// completely self-contained.
let container = DOM.element('div', { style: `width:${width};height:${height}` });
// Note that I'm yielding the container pretty early here: this allows the
// div to be placed on the page. This is important, because Leaflet uses
// the div's .offsetWidth and .offsetHeight to size the map. If I were
// to only return the container at the end of this method, Leaflet might
// get the wrong idea about the map's size.
yield container;
// Now we create a map object and add a layer to it.
let map = L.map(container);
let osmLayer = L.tileLayer('https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var presentations = L.featureGroup();
for (var i = 0; i < filtered.length; i++) {
let presentation = L.marker([filtered[i].lat, filtered[i].lon]);
presentation.bindPopup(filtered[i].linked_name);
presentations.addLayer(presentation);
}
map.addLayer(presentations);
map.fitBounds(presentations.getBounds(), {maxZoom: 7});
}