I'm working through trying to plot, style and size cirlceMarker points in Leaflet/JS with a jQuery AJAX request and almost immediately am getting a variable moderateLayer and parameter feature that are declared but never read message. The points draw using the pointToLayer function without styling, but all the subsequent function don't seem to work. No errors display in the console. Any idea what I'm missing here?
const commonStyles = {
weight: 1,
stroke: 1,
fillOpacity: .8
}
// jQuery method using AJAX request for GeoJSON data
// add sviPoint data
$.getJSON("data/cdps_svis_whp_ctr.json", function (sviPoints) {
var moderateLayer = L.geoJson(sviPoints, {
pointToLayer: function (feature, latlng) {
// Draw circle marker based on pointToLayer function
return L.circleMarker(latlng, commonStyles);
},
// filter layer to display only class value of moderate
filter: function (feature) {
if (feature.properties.WHP_CLASS.Moderate) {
return feature;
}
},
// style stroke and fill
style: function (feature) {
return {
color: '#FF4000',
fillColor: '#FF4000',
// call function get radius from overall svi weighted mean
radius: getRadius(feature.properties.OVERALL_WM)
}
},
onEachFeature: function (feature, layer) {
// on mouseover change color to darker shade of orange
layer.on('mouseover', function () {
layer.setStyle({
fillColor: '#401000'
});
});
// return to original fill color when not hovering with mouse
layer.on('mouseout', function () {
layer.setStyle({
fillColor: '#FF4000'
});
});
var popup = `<h4>${feature.properties.CDP_STATE}</h4>
<p><b>Overall SVI:</b> ${feature.properties.OVERALL_WM}<br>
<p><b>Wildfire Hazard Potential:</b> ${feature.properties.WHP_CLASS}<br>`
// Loop through all fuel sources in plants that split atoms
// for (var fuelSource in feature.properties.fuel_source) {
// // View the source
// console.log(fuelSource)
// // Concat all fuel sources
// popup += `<br>${fuelSource}: ${feature.properties.fuel_source[fuelSource]} MW`
// }
layer.bindPopup(popup)
}
}).addTo(map);
});