A leaflet plugin for dividing the area into parts in different ways such as voronoi and hexagonal tiling.
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
dist update readme Jan 19, 2019
examples adjust struture of codebase Jan 19, 2019
src adjust struture of codebase Jan 19, 2019
.gitignore initial commit Jan 9, 2019
LICENSE initial commit Jan 9, 2019
README.md update readme Jan 19, 2019
index.html update readme Jan 19, 2019
package-lock.json initial commit Jan 9, 2019
package.json adjust struture of codebase Jan 19, 2019
yarn.lock adjust struture of codebase Jan 19, 2019

README.md

leaflet-partition GitHub license

leaflet-partition is a leaflet plugin for dividing the area into parts.

  • Different ways:such as triangulation and hexagonal tiling.

  • Data binding:leaflet-partition allows you to bind arbitrary data to partition, and then apply data-driven transformations to the partition.

  • Simple and Flexible:leaflet-partition takes charge of path calculating ,data binding,rendering and updating,But you still have full control(DOM operations,style settings) of each partition.

  • Suitable for data visualization

View the basic demo here

Requirements

  • leaflet 1.x
  • if you use trigulation for partition,d3-voronoiis required

Basic Usage

Include the dependency libraries in the dist folder

<script src="leaflet-partition.min.js"></script>

**(optional)**If you use trigulation for partition,add the following:

<script src="https://d3js.org/d3-voronoi.v1.min.js"></script>

This plugin is a UMD module,so you can also use it in commonJS or AMD environment.

Then:

const partition = L.partition();
partition.setData(data);
const layerGroup = partition.addTo(map);

layerGroup is just a leafelt LayerGroup Object,which you can take full control of each partition.

Set type and style option:

const options = {
  type: "voronoi",
  pathStyleOption: {
    color: "blue"
  }
};

//initialize option
const partition = L.partition(options);

//update option
partition.setOption(options)

Where type is a string value represents partition method,options:'voronoi','hexagon'

If type is voronoi,data should be an array of L.Latlngs

if type is hexagon,data should be L.LatLngBounds

pathStyleOption property is a leaflet Path Options Object

Set data and Update:

partition.setData(data);

Then the view updates itself.

License

leaflet-partition is MIT licensed