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: '&copy; <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});
}