initial commit

.gitignore

@@ -0,0 +1,5 @@
+node_modules
+
+tsconfig.json
+
+webpack.config.js

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) [2019-present],Zhiyong Guo.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,102 @@
+# [leaflet-partition](https://github.com/locknono/leaflet-partition)  [![GitHub license](https://camo.githubusercontent.com/890acbdcb87868b382af9a4b1fac507b9659d9bf/68747470733a2f2f696d672e736869656c64732e696f2f62616467652f6c6963656e73652d4d49542d626c75652e737667)](https://github.com/locknono/leaflet-partition/blob/master/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](https://locknono.github.io/leaflet-partition/)
+
+## Requirements
+
+- leaflet 1.x
+- if you use trigulation for partition,`d3-voronoi`is 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](https://leafletjs.com/reference-1.4.0.html#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 a list of L.latlng
+
+if type is `hexagon`,data should be L.bound
+
+**pathStleOption** property is a leaflet [Path Options](https://leafletjs.com/reference-1.4.0.html#path) Object
+
+
+
+
+
+Set data and Update:
+
+```
+partition.setData(data);
+```
+
+Then the view updates itself.
+
+
+
+
+
+
+
+## License
+
+leaflet-partition is [MIT licensed](https://github.com/locknono/leaflet-partition/blob/master/LICENSE)
+
+
+
+
+
+
+
+
+

examples/example.js

@@ -0,0 +1,83 @@
+const map = L.map("map").setView([51.505, -0.09], 13);
+L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
+  attribution:
+    '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
+}).addTo(map);
+
+map.on("click", function(e) {
+  console.log([e.latlng.lat, e.latlng.lng]);
+});
+const pointsForVoronoi = [
+  [51.518783384812714, -0.1436791248938185],
+  [51.525085229881086, -0.12891624497409107],
+  [51.51119865235411, -0.13423774820096493],
+  [51.50478803465899, -0.15432213134758624],
+  [51.51280116584553, -0.16565178337899059],
+  [51.52860961039737, -0.1620468940962683],
+  [51.528396019344, -0.17165993218354106],
+  [51.50681816118516, -0.1833329070037837],
+  [51.49356728322207, -0.17595146704391998],
+  [51.491109035492585, -0.13732765330044974],
+  [51.48629903697415, -0.12462471011371212],
+  [51.48490938737375, -0.16616676756224805],
+  [51.49495633923624, -0.09784495230657832],
+  [51.49944488274714, -0.08617178203100374],
+  [51.505749471102625, -0.09767328803781838],
+  [51.515899094104945, -0.10728648708829391],
+  [51.5150444762002, -0.09063505301872167],
+  [51.50916854403718, -0.09424000266265999],
+  [51.50436039943468, -0.11003311538843265],
+  [51.496773183904956, -0.1163846933324897],
+  [51.491856848839525, -0.11174975807601187],
+  [51.49891055550746, -0.10659983001325425],
+  [51.487795128631106, -0.10059158060671702],
+  [51.515151304315154, -0.12033297151392787],
+  [51.52529883280484, -0.11449638637615059],
+  [51.52529883280484, -0.08085018969948622]
+];
+const boundForHex = [
+  [51.53213371811051, -0.07364127597232263],
+  [51.485016285000434, 0.001889737570466288]
+];
+
+const voronoiOptions = {
+  type: "voronoi",
+  pathStyleOption: {
+    color: "red"
+  }
+};
+
+const hexOption = {
+  type: "hexagon",
+  pathStyleOption: {
+    color: "blue"
+  }
+};
+
+const partition = L.partition(hexOption);
+partition.setData(boundForHex);
+const layerGroup = partition.addTo(map);
+
+const partition2 = L.partition(voronoiOptions);
+partition2.setData(pointsForVoronoi);
+const layerGroup2 = partition2.addTo(map);
+
+function testVoronoiUpdate() {
+  setInterval(function() {
+    const points2 = pointsForVoronoi.map(e => [
+      e[0] + Math.random(),
+      e[1] - Math.random()
+    ]);
+    p.setData(points2);
+  }, 1000);
+}
+
+function testHexUpdate() {
+  setInterval(function() {
+    const bound2 = boundForHex.map(e => [
+      e[0] + Math.random(),
+      e[1] - Math.random()
+    ]);
+    p.setData(bound2);
+  }, 1000);
+}

examples/index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>partition example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
+      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
+      integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
+      crossorigin=""
+    ></script>
+    <script src="https://d3js.org/d3-voronoi.v1.min.js"></script>
+    <style>
+      #map {
+        height: 700px;
+        width: 1200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="../dist/Leaflet.Partition.js"></script>
+    <script src="./example.js"></script>
+  </body>
+</html>

index.html

@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <title>partition example</title>
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link
+      rel="stylesheet"
+      href="https://unpkg.com/leaflet@1.4.0/dist/leaflet.css"
+      integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA=="
+      crossorigin=""
+    />
+    <script
+      src="https://unpkg.com/leaflet@1.4.0/dist/leaflet.js"
+      integrity="sha512-QVftwZFqvtRNi0ZyCtsznlKSWOStnDORoefr1enyq5mVL4tmKB3S/EnC3rRJcxCPavG10IcrVGSmPh6Qw5lwrg=="
+      crossorigin=""
+    ></script>
+    <script src="https://d3js.org/d3-voronoi.v1.min.js"></script>
+    <style>
+      #map {
+        height: 700px;
+        width: 1200px;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="map"></div>
+    <script src="./dist/Leaflet.Partition.js"></script>
+    <script src="./examples/example.js"></script>
+  </body>
+</html>