map = { const container = yield htl.html`

`; const map = L.map(container).setView( [43.900365689003664, -72.6773669392869], 8 ); L.tileLayer( "https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png", { maxZoom: 19, attribution: '© OpenStreetMap contributors' } ).addTo(map); // var vt_crop = L.geoJSON(vt_outline); // console.log(vt_crop.getBounds()); // map.fitBounds(vt_crop.getBounds()); var marker_layer = L.layerGroup(); marker_layer.addTo(map); var warning_layer = L.layerGroup(); warning_layer.addTo(map); var vt_towns = L.geoJson(vt_outline, { style: border_style }).addTo(map); var storms = L.geoJson(storm_data, { style: storm_style }).addTo(map); //storm markers for (let index = 0; index < storm_data.length; ++index) { var marker = L.circleMarker( [storm_data[index]["LAT"], storm_data[index]["LON"]], { radius: rain_scale(storm_data[index]["Rainfall in inches"]), color: color_scale(storm_data[index]["Rainfall in inches"]), weight: 1, fillOpacity: 0.5 } ) .bindTooltip( `Town Name: ${storm_data[index]["Location"]}
Recorded Rainfall: ${storm_data[index]["Rainfall in inches"]}"` ) .addTo(marker_layer); } var flood_icon = L.icon({ iconUrl: "blob:https://coreydockser.static.observableusercontent.com/570a9434-997a-42fc-93a3-39fc15396c03", iconSize: [30, 30], iconAnchor: [15, 30] }); // flood warnings for (let index = 0; index < floodwarnings.length; ++index) { var marker = L.marker( [floodwarnings[index]["LAT"], floodwarnings[index]["LON"]], { icon: flood_icon } ) .bindTooltip( `

Flood Warning

Location: ${floodwarnings[index]["ADDRESS / PLACE"]}` ) .addTo(warning_layer); } var overlayMap = { Rainfall: marker_layer, "Flood Warnings": warning_layer }; var layerControl = L.control.layers(null, overlayMap).addTo(map); var legend = L.control({ position: "bottomleft" }); legend.onAdd = function (map) { var div = L.DomUtil.create("div", "legend"); div.innerHTML += `

Legend

`; return div; }; legend.addTo(map); }