Dash Leaflet Marker Size - how to change scale factor?


I am using Dash Leaflet to build scatter maps and I am having some issues with setting appropriate marker size scaling. I get a lot better results when using go.Scattermapbox, see the below two images, but I need to use Dash Leaflet because for one of my map options I need to use clustering. The top map is what is rendered using Dash Leaflet and the bottom is rendered using go.Scattermapbox.

For the go.Scattermapbox I apply the below parameters which gives a good marker sizing range.

Is there something similar that I can use in Dash Leaflet? I current use point to layer to determine the marker size as per the below code, is there something that I could add here to adjust the scale factor? My Javascript is very limited.

point_to_layer_dynamic_production = assign(“”“function(feature, latlng, context){
const {min, max, colorscale, circleOptions} = context.props.hideout;
const csc = chroma.scale(colorscale).domain([min, max]); // chroma lib to construct colorscale
circleOptions.fillColor = csc(feature.properties.annual_production_tonnes); // set color based on color prop.
circleOptions.radius = feature.properties.annual_production_tonnes/100000;
return L.circleMarker(latlng, circleOptions); // sender a simple circle marker.

Thank you in advance!!

If you want area scaling as in the scatter mapbox case, you should scale the radius with the sqrt of the value, not the value itself (since the the area depends on r^2), i.e. something like

circleOptions.radius = Math.sqrt(feature.properties.annual_production_tonnes)/100000;

where the fixed scaling number (i.e. 100000) might need some adjustment depending on your needs.

Thank you very much - this solved the problem :slight_smile: