liveby / react-leaflet-choropleth Goto Github PK

Hello.
Recently I tried to use react-leaflet-choropleth and I've caught this error.

The code is exactly like in in Example.

import React, { Component } from 'react'
import Choropleth from 'react-leaflet-choropleth'
import { Map } from 'react-leaflet'
import { data } from './data'
import './App.css'

const style = {
fillColor: '#F28F3B',
weight: 2,
opacity: 1,
color: 'white',
dashArray: '3',
fillOpacity: 0.5
}

const App = (data) => (

export default App

TL;DR: tooltips aren't regenerated when state changes.

I have a working (yea!) use of react-leaflet and react-leaflet-choropleth, which uses geoJSON data and creates a cloropleth map based on an elasticsearch query. The elasticsearch query is triggered on the componentWillMount() method of the react component which includes the choropleth.

The render method is simple:

    <Map styleName="map" center={position} zoom={1}>
      <TileLayer
        url={mapURL}
        attribution={attribution}
        maxZoom={maxZoom}
      />
      <Choropleth
        data={geojson}
        valueProperty={this.numCasesPerCountry}
        scale={scale}
        visible={this.isCountryListed}
        onEachFeature={(feature, layer) => layer.bindPopup(this.labelPerCountry(feature))}
        steps={5}
        mode='e'
        style={style}
      />
    </Map>

And I have callbacks defined for all three methods. The problem is that when the component state changes, the feature color is updated, but the label is not, as indicated by this screengrab, which shows that Italy has a high number of cases, is colored appropriately, but its tooltip isn't up to date:

Note that the labelPerCountry is only called once.

Am I right that this is a bug? I suspect that react-leaflet's third technical consideration:

The components exposed are abstractions for Leaflet layers, not DOM elements. Some of them have properties that can be updated directly by calling the setters exposed by Leaflet while others should be completely replaced, by setting an unique value on their key property so that they are properly handled by React's algorithm.

is relevant, but I haven't dug into either codebase to unpack it.

Hi,

I'm using react-leaflet-choropleth together with redux, and I have trouble updating the geojson via data={}
I'm also using HMR.

Now, on initial render, all works fine:

const choropleth = <Choropleth
                                   data={this.props.results}
                                   ...

but when the component receives new results props, they don't get rendered.
When I manually replace this.props.results with [] and save the file, then change it back and save again, the new results props do get rendered.

I hope I explained that in a clear enough way... Thanks in advance!

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?

Breaks with react-leaflet v1.0.0 due to rename of GeoJson to GeoJSON. Do you plan to support the new version?

I don't know if there are any more issues, I couldn't see anything else with a quick look: https://github.com/PaulLeCam/react-leaflet/releases/tag/v1.0.0

The react app get an event that is sent by server side and then updates it to the map.

1st event (Queensbridge)

{
  "type": "FeatureCollection",
  "features": [
    {"type":"Feature","properties":{"boro_code":"1","boro_name":"Queensbridge","shape_area":"636603803.361","shape_leng":"361611.82395","test": 20000
    },"geometry":{"type":"MultiPolygon","coordinates":""}
    
}]

2nd event (Union Sq)

{
  "type": "FeatureCollection",
  "features": [
    {"type":"Feature","properties":{"boro_code":"2","boro_name":"Union Sq","shape_area":"36603803.361","shape_leng":"261611.82395","test": 200
    },"geometry":{"type":"MultiPolygon","coordinates":""}
    
}]

I want to update all events on the map. And if the same boro_name have been occured then updates the value of test.

Any suggestion?