Unsure what the ranges are for values

[davidascher]

Hi. Lovely react component, thank you, especially if I can get it to work.

I've got some minimal code which looks like:

    <Map styleName="map" center={position} zoom={1}>
      <TileLayer
        url='http://{s}.tile.osm.org/{z}/{x}/{y}.png'
        attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
      />
      <Choropleth
        data={geojson}
        valueProperty={mapCountries}
        scale={['#011f4b', '#b3cde0']}
        onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.name)}
        steps={2}
        mode='e'
        style={style}
      />
    </Map>

where

function mapCountries(feature) {
  if (feature.properties.name[0] == 'A') {
    return 0;
  }
  return 1;
}

and

const style = {
    fillColor: '#F28F3B',
    weight: 1,
    opacity: 1,
    color: 'grey',
    dashArray: '3',
    fillOpacity: 0.2
}

I'm expecting to see countries which start w/ an A to show up in a different color.

My geoJSON file starts like:

{
    "features": [
        {
            "geometry": {
                "coordinates": [
                    [
                        [
                            61.210817,
                            35.650072
                        ],
 ...
                        [
                            61.210817,
                            35.650072
                        ]
                    ]
                ],
                "type": "Polygon"
            },
            "id": "AFG",
            "properties": {
                "name": "Afghanistan"
            },
            "type": "Feature"
        },
...

The data seems to loaded correctly, in that boundaries are drawn on the leaflet, but they all seem to pick up the color of the style block, and none of the feature-based color.

What am I missing?

[davidascher]

What I was missing is the visible attribute needs to be true for the value to matter.
Closing.

[jgimbel]

First off, this component will handle this kind of styling for you, but maybe this is overkill for what you want. I noticed react-leaflet styling does not allow functional styling, but with that this would be as simple as...

const style = (feature) => ({
    fillColor: (feature.properties.name[0] ==='A') ? '#011f4b' : '#b3cde0',
    weight: 1,
    opacity: 1,
    color: 'grey',
    dashArray: '3',
    fillOpacity: 0.2
})
<Map ... >
  {/*TileLayer and markers and stuff */}
  {
  countries.map(geojson => (
    <GeoJson
      data={geojson}
      style={style}
    >
      <PopUp>
        {geojson.properties.name}
      </PopUp>
    </GeoJson>
  )
</Map >

In your actual problem... You bring up a good point. visible is not optional, and must be something like visible={() => true} if everything should be styled via the choropleth. That should be a quick fix though. The larger problem I see is the name of that option. I feel that the name visible is confusing, as it decides whether to apply the choropleth, NOT of whether to render that shape.

[davidascher]

I'm not 100% sure I understand your last point. What do you mean by 'apply the choropleth'?

[jgimbel]

The visible function determines whether to skip setting the fillColor.

An example of how it works would be...

if(!visible(feature)) return userStyle // do not set the fillColor, use the one provided.
//else
return Obect.assign({}, userStyle, { fillColor: determinedColor })