Coder Social home page Coder Social logo

dakdeniz / react-leaflet-choropleth Goto Github PK

View Code? Open in Web Editor NEW

This project forked from liveby/react-leaflet-choropleth

0.0 1.0 0.0 23 KB

Component for React-Leaflet that adds choropleth functionality

License: ISC License

JavaScript 100.00%

react-leaflet-choropleth's Introduction

react-leaflet-choropleth

This component extends geoJson from react-leaflet and will use chroma to set the color, using a property or function value. This is highly based on leaflet-choropleth by timwis.

Installation

npm install react-leaflet-choropleth

Options

Required

data: geojson data as a FeatureCollection our as an array.

style: Styling to be applied to each geojson object. Can be a function or an object.

valueProperty: The way a value is obtained from each geojson object. Can be a function like function(feature){ return feature.properties.value } or it will use the propert to look up on the value in the properties object on the geojson shape.

scale: An array of the top and bottom colors to use.

steps: A number to determine how many different colors to pick from.

mode: The mode to use from chroma.js. This can be 'e' from equadistant, 'q' for quantile or 'k' for k-means.

Optional

visible:A way to determine whether to use the fillColor provided in styles, or to use the fillColor of the choropleth. Useful for overwriting the choropleth color.

ref: A way to get the leaflet geojson Object. <ref>.leafletElement will be a FeatureGroup containing the leaflet layers created.

identity: A function used to set the key prop for each geojson feature

All other props passed to Choropleth will also be passed to each geojson layer.

Example

import Choropleth from 'react-leaflet-choropleth'
import { Map } from 'react-leaflet'

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

const map = (geojson) => (
  <Map>
    <Choropleth
      data={{type: 'FeatureCollection', features: geojson}}
      valueProperty={(feature) => feature.properties.value}
      visible={(feature) => feature.id !== active.id}
      scale={['#b3cde0', '#011f4b']}
      steps={7}
      mode='e'
      style={style}
      onEachFeature={(feature, layer) => layer.bindPopup(feature.properties.label)}
      ref={(el) => this.choropleth = el.leafletElement}
    />
  </Map>
)

react-leaflet-choropleth's People

Contributors

barberboy avatar davidascher avatar jgimbel avatar malachi-m avatar

Watchers

 avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.