chart = { // Make a container in the Observable DOM to hold the map let parent = DOM.element('div', { style: `width:${width}px;height:${width/2}px` }); // Make sure Observable renders the parent container so Leaflet can figure out it's size yield parent; // Create a map centered on Europe let map = L.map(parent).setView([53, 3], 3); // higher numbers are more zoomed in let osmTileLayer = L.tileLayer( 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', { attribution: '© OpenStreetMap' }).addTo( map ); //set colours of items function getColor(item) { switch (item) { case 'Individual course': return '#984ea3'; case 'Research hub': return '#377eb8'; case 'Master programme': return '#ff7f00'; case 'Bachelor programme': return '#ffff33' } } //attach popup content to each data feature function onEachFeature(feature, layer) { let popupContent = `

${feature.properties.institution}
${feature.properties.name}
${feature.properties.location}, ${feature.properties.country}

` // does this feature have a property named popupContent? if (feature.properties && feature.properties.popupContent) { popupContent += feature.properties.popupContent; } layer.bindPopup(popupContent); } //add geoJSON layer to map L.geoJSON(ecolEconEU, { pointToLayer: function (feature, latlng) { return new L.CircleMarker(latlng, {radius: 10, fillOpacity: 0.7, color: 'black', fillColor: getColor(feature.properties.item), weight: 1,}); }, onEachFeature: onEachFeature }).addTo(map); //add legend var legend = L.control({position: 'bottomleft'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), categories = ['Research hub', 'Master programme', 'Bachelor programme', 'Individual course']; div.innerHTML += '

Ecological Economics

'; // loop through our density intervals and generate a label with a colored square for each interval for (var i = 0; i < categories.length; i++) { div.innerHTML += '' + categories[i] + '
'; } return div; }; legend.addTo(map); }