map = { // Container let container = DOM.element('div', { style: `width:${width}px;height:${width/1.6}px` }); yield container; // View let map = L.map(container).setView([44.9990761, -9.3541647], 2); // Map/Base let baseLayer = L.tileLayer(cartoDark, { attribution: cartoAttr, }).addTo(map); // Circle Markers let regionsLayer = L.geoJSON(AIWFCByRegion, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, style(feature, feature.properties.Region, feature.properties.Streams)); }}) // Tooltip .bindPopup(function (Layer) { return 'Country: ' + Layer.feature.properties.Country + '
Region: ' + Layer.feature.properties.Region + '
Streams (Per 10,000 People): ' + Layer.feature.properties.Streams + '
Average Seasonal Rank: ' + Layer.feature.properties.Rank; }) .addTo(map); // LEGENDS var legend = L.control({position: 'bottomright'}); var legend2 = L.control({position: 'topright'}); legend.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), grades = AIWFCRegion, // Grade is the Value labels = []; // Generate legend for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + '
'; } return div; }; legend2.onAdd = function (map) { var div = L.DomUtil.create('div', 'info legend'), //START -- This section of code has been modified from the Stack Exchange reference at the bottom of the notebook to include the additional legend -- grades = [2, 3, 4, 5], //Arbitrary numbers just to define how many nodes to generate labels = ['Streams (Per 10,000 People)'], // Legend title categories = ['0-25','25-200','200-400', '400+']; // What the Grade should be titled // Loop through grades to generate legend for (var i = 0; i < grades.length; i++) { var grade = grades[i]; labels.push( ' ' + categories[i]); } div.innerHTML = labels.join('
'); return div; }; //END -- This section of code has been modified from the Stack Exchange reference at the bottom of the notebook to include the additional legend -- legend.addTo(map); // Region Legend legend2.addTo(map); // Size Legend map.fitBounds(regionsLayer.getBounds()); }