map = { let container = DOM.element("div", { style: `width:${width}px;height:${(width * 3) / 4}px` }); yield container; let map = L.map(container).setView([42.932616, -78.853392], 13); let osmLayer = L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { attribution: 'Data Source: AirDNA | © OpenStreetMap contributors' } ).addTo(map); let zips = L.geoJson(zipcodes, { style: style_zips }).addTo(map); let nbhds = L.geoJson(neighborhood_maps, { style: style_nbhds, onEachFeature: addPopUp }).addTo(map); // an invisible layer of zipcodes on the top so you can click on them without being obstructed by the bottom let invis_zips = L.geoJson(zipcodes, { onEachFeature: addTooltip, style: style_invis_zips }).addTo(map); function addPopUp(feature, layer) { layer.bindTooltip(feature.properties.nbhdname, { permanent: true, className: "nbhd-label", opacity: 1, direction: "center", offset: [0, 0] }); } function addTooltip(feature, layer) { const f = d3.format(".2f"); let avg = f(averages.get(year).get(parseInt(feature.properties.ZCTA5CE10))) + ""; let zip = feature.properties.ZCTA5CE10; let text = `Zipcode: ${zip}
Average Monthly Listings in ${year}: ${avg}`; if (!L.Browser.mobile) { layer.bindTooltip(text, { className: "zipcode-label", sticky: true, direction: "bottom" }); layer.on("mouseover", function () { this.setStyle({ color: "white", weight: 3, opacity: 1 }); }); layer.on("mouseout", function () { this.setStyle({ fillOpacity: 0, opacity: 0 }); }); } else { layer.bindTooltip(text, { className: "zipcode-label", direction: "bottom" }); } } // legend code from https://leafletjs.com/examples/choropleth/ var legend = L.control({ position: "bottomright" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "info legend"), grades = [0, 20, 40, 60, 80], labels = []; if (!L.Browser.mobile) { console.log("browser is not mobile"); div.innerHTML += `Average Monthly Listings
`; for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + (grades[i] + 1) + (grades[i + 1] ? "–" + grades[i + 1] + "
" : "+"); } } else { console.log("browser is mobile"); div.innerHTML += `Avg. Monthly
Listings
`; grades = [0, 50, 100]; for (var i = 0; i < grades.length; i++) { div.innerHTML += ' ' + grades[i] + (grades[i + 1] ? "–" + grades[i + 1] + "
" : "+"); } } return div; }; legend.addTo(map); }