leaflet-choropleth

Choropleth plugin for Leaflet (color scale based on value)

Github星跟蹤圖

Leaflet Choropleth Build Status js-standard-style

NPM

Choropleth plugin for Leaflet (color scale based on value) - Demo

screenshot

This plugin extends L.geoJson, giving each feature a style.fillColor that corresponds to a specified value
in its properties object. For information on how to use L.geoJson, see the Leaflet
tutorial and documentation.

While Leaflet provides a choropleth tutorial, that approach requires you to
specify exact breakpoints and colors. This plugin uses chroma.js to abstract that for you.
Just tell it which property in the GeoJSON to use and some idea of the color scale you want.

Usage

L.choropleth(geojsonData, {
	valueProperty: 'incidents', // which property in the features to use
	scale: ['white', 'red'], // chroma.js scale - include as many as you like
	steps: 5, // number of breaks or steps in range
	mode: 'q', // q for quantile, e for equidistant, k for k-means
	style: {
		color: '#fff', // border color
		weight: 2,
		fillOpacity: 0.8
	},
	onEachFeature: function(feature, layer) {
		layer.bindPopup(feature.properties.value)
	}
}).addTo(map)

Advanced

  • colors: If you prefer to specify your own exact colors, use colors: ['#fff', '#777', ...] instead of scale.
    Just make sure the number of colors is the same as the number of steps specified.
  • valueProperty: To use computed values (such as standardizing),
    you can use a function for valueProperty that is passed (feature) and returns a number (example).

Installation

  • via NPM: npm install leaflet-choropleth
  • via Bower: bower install leaflet-choropleth

Include dist/choropleth.js from this repository on your page after Leaflet:

<script src="path/to/leaflet.js"></script>
<script src="path/to/choropleth.js"></script>

Or, if using via CommonJS (Browserify, Webpack, etc.):

var L = require('leaflet')
require('leaflet-choropleth')

Examples

Development

This project uses webpack to build the JavaScript and
standard for code style linting.

  • While developing, use npm run watch to automatically rebuild when files are saved
  • Use npm test to run unit tests and code style linter
  • Before committing dist/, use npm run build to optimize and minify for production use

主要指標

概覽
名稱與所有者timwis/leaflet-choropleth
主編程語言JavaScript
編程語言JavaScript (語言數: 1)
平台
許可證MIT License
所有者活动
創建於2015-11-09 12:40:23
推送於2019-06-13 08:11:22
最后一次提交
發布數6
最新版本名稱v1.1.4 (發布於 2017-05-30 06:05:55)
第一版名稱v1.0.0 (發布於 )
用户参与
星數183
關注者數9
派生數233
提交數77
已啟用問題?
問題數22
打開的問題數12
拉請求數7
打開的拉請求數2
關閉的拉請求數2
项目设置
已啟用Wiki?
已存檔?
是復刻?
已鎖定?
是鏡像?
是私有?