I have a leaflet map set up with two layers and I want them to use different colorization functions to color the choropleth shapes.
My shapes are set up in layers like this:
var povertyLayer = L.geoJson(statesData, { style: getStyle, onEachFeature: onEachFeature }); var raceLayer = L.geoJson(statesData, { style: getStyle2, onEachFeature: onEachFeature }); var rLayer = L.layerGroup([raceLayer]); var povLayer = L.layerGroup([povertyLayer]);They're styled by different functions:
function getStyle(feature) { return { weight: 2, opacity: 0.2, color: '#333', fillOpacity: 0.7, fillColor: getColor(feature.properties.inpoverty) }; } function getStyle2(feature) { return { weight: 2, opacity: 0.2, color: '#333', fillOpacity: 0.7, fillColor: getColor(feature.properties.ratio) }; }But they use the same accessor function to apply colorization to geojson features:
function getColor(d) { if (regionalDataset == 'inpoverty') { return d > 25 ? '#f4bd33' : d > 15 ? '#fac961' : d > 10 ? '#ffd78a' : d > 5 ? '#ffe5b3' : d > 0 ? '#fff2d9' : '#fff'; } else { return d > 200 ? '#5E5989' : d > 150 ? 'rgb(110, 106, 150)' : d > 100 ? 'rgb(152, 149, 184)' : d > 50 ? 'rgb(189, 187, 215)' : d > 0 ? 'rgb(233, 232, 251)' : '#fff'; } }The layers are added and removed from an external button:
$('#regional-map-poverty') .on('click', function() { console.log('test1'); d3.select(this).classed('select-regional-style-active',true); d3.select('#regional-map-race').classed('select-regional-style-active',false); regionalDataset = 'inpoverty'; regionalDatasetTipText = '% live below the poverty line.' map.removeLayer(rLayer); map.addLayer(povLayer); });When mousing over the shapes, the colorization on mouseover is different than the actual shapes are colored.
أكثر...
My shapes are set up in layers like this:
var povertyLayer = L.geoJson(statesData, { style: getStyle, onEachFeature: onEachFeature }); var raceLayer = L.geoJson(statesData, { style: getStyle2, onEachFeature: onEachFeature }); var rLayer = L.layerGroup([raceLayer]); var povLayer = L.layerGroup([povertyLayer]);They're styled by different functions:
function getStyle(feature) { return { weight: 2, opacity: 0.2, color: '#333', fillOpacity: 0.7, fillColor: getColor(feature.properties.inpoverty) }; } function getStyle2(feature) { return { weight: 2, opacity: 0.2, color: '#333', fillOpacity: 0.7, fillColor: getColor(feature.properties.ratio) }; }But they use the same accessor function to apply colorization to geojson features:
function getColor(d) { if (regionalDataset == 'inpoverty') { return d > 25 ? '#f4bd33' : d > 15 ? '#fac961' : d > 10 ? '#ffd78a' : d > 5 ? '#ffe5b3' : d > 0 ? '#fff2d9' : '#fff'; } else { return d > 200 ? '#5E5989' : d > 150 ? 'rgb(110, 106, 150)' : d > 100 ? 'rgb(152, 149, 184)' : d > 50 ? 'rgb(189, 187, 215)' : d > 0 ? 'rgb(233, 232, 251)' : '#fff'; } }The layers are added and removed from an external button:
$('#regional-map-poverty') .on('click', function() { console.log('test1'); d3.select(this).classed('select-regional-style-active',true); d3.select('#regional-map-race').classed('select-regional-style-active',false); regionalDataset = 'inpoverty'; regionalDatasetTipText = '% live below the poverty line.' map.removeLayer(rLayer); map.addLayer(povLayer); });When mousing over the shapes, the colorization on mouseover is different than the actual shapes are colored.
أكثر...