Initial commit

ggolikov · Jan 6, 2019 · abf6ef5 · abf6ef5
commit abf6ef5
Show file tree

Hide file tree

Showing 14 changed files with 15,251 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,4 @@
+/demo/js/bundle.js
+/node_modules
+.log
+.eslintrc.js
diff --git a/README.md b/README.md
@@ -0,0 +1,47 @@
+# Leaflet.Plugin
+
+Description
+
+Example
+[comment]: <Example image>  
+<!-- ![l viewpoint example](https://cloud.githubusercontent.com/assets/17549928/21459122/bb3770bc-c94c-11e6-841f-d1ec4e6073a5.png) -->
+
+## [Demo]()
+
+## Installation
+requires leaflet@1.0.2
+
+browser:
+
+```html
+<script src="path/to/leaflet@1.0.2/dist/leaflet.js"></script>
+<script src="path/to/Leaflet.plugin.js"></script>
+```
+
+browserify:
+
+```
+npm install leaflet-plugin
+```
+
+```javascript
+require('leaflet');
+require('leaflet-plugin');
+```
+
+## Usage
+Comment
+
+```javascript
+some code
+```
+
+## API reference
+### Factory
+Factory|Description
+-------|-----------
+### Methods
+Method|Returns|Description
+------|-------|-----------
+
+## [License](https://opensource.org/licenses/MIT)
diff --git a/demo/css/main.css b/demo/css/main.css
@@ -0,0 +1,62 @@
+@import'../../src/L.Rain.css';
+
+html, body {
+    width: 100%;
+    margin: 0px;
+}
+
+body {
+    background-color: #F3F3F3;
+    background-color: white;
+    font-family: Arial;
+}
+
+#wrap {
+    width: 100%;
+    height: 100%;
+    margin: 0;
+}
+
+#left-panel {
+    /* display: none; */
+    width: 350px;
+    height: 100%;
+    float: left;
+}
+
+#map {
+    height: 100%;
+}
+
+#content {
+    margin: auto;
+}
+
+.header {
+    text-align: center;
+}
+
+.controller-container {
+    margin: 0 40px 0 40px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.controller-container label {
+    width: calc(100% - 90px);
+    text-align: left;
+}
+
+.controller-container input {
+    width: 50px
+}
+
+.controller-container div {
+    width: 40px
+}
+
+.controller {
+    margin: 4px 0;
+    width: 20%;
+}
diff --git a/demo/index.html b/demo/index.html
@@ -0,0 +1,56 @@
+<!-- <!DOCTYPE html> -->
+<html>
+<head>
+    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Leaflet Rain demo</title>
+    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" />
+    <link rel="stylesheet" type="text/css" href="./css/main.css"/>
+    <!-- <script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js"></script> -->
+    <script src="./js/leaflet-src.js"></script>
+</head>
+<body>
+    <div id="wrap">
+        <div id="left-panel">
+            <div class="header">
+                <h2>Leaflet.Rain</h2>
+                <div class="controller-container">
+                    <label>Angle: </label>
+                    <input class="controller angle-controller" type="number" value="70"/>
+                    <div class="unit">deg</div>
+                </div>
+                <div class="controller-container">
+                    <label>Width: </label>
+                    <input class="controller width-controller" type="number" value="1" min="0"/>
+                    <div class="unit">px</div>
+                </div>
+                <div class="controller-container">
+                    <label>Spacing: </label>
+                    <input class="controller spacing-controller" type="number" value="10" min="0"/>
+                    <div class="unit">px</div>
+                </div>
+                <div class="controller-container">
+                    <label>Drop length: </label>
+                    <input class="controller length-controller" type="number" value="5" min="0"/>
+                    <div class="unit">px</div>
+                </div>
+                <div class="controller-container">
+                    <label>Drop interval: </label>
+                    <input class="controller interval-controller" type="number" value="10" min="0"/>
+                    <div class="unit">px</div>
+                </div>
+                <div class="controller-container">
+                    <label>Speed: </label>
+                    <input class="controller speed-controller" type="number" value="0.7" min="0" step="0.1"/>
+                    <div class="unit">x</div>
+                </div>
+            </div>
+            <div id="content">
+            </div>
+        </div>
+        <div id="map">
+        </div>
+    </div>
+    <script src="./js/bundle.js"></script>
+</body>
+</html>
diff --git a/demo/js/app.js b/demo/js/app.js
@@ -0,0 +1,77 @@
+// debugger;
+import { rain } from '../../src/L.Rain';
+import { points } from './points';
+
+var L = global.L || requires('leaflet');
+
+var osm = L.tileLayer('http://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}.png', {
+        maxZoom: 18,
+        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>'
+    }),
+    center = [48, 10],
+    lmap = new L.Map('map', {layers: [osm], center, zoom: 5, maxZoom: 22, zoomAnimation: true}),
+    _points = reverseData(points),
+    root = document.getElementById('content'),
+    angleController = document.getElementsByClassName('angle-controller')[0],
+    widthController = document.getElementsByClassName('width-controller')[0],
+    spacingController = document.getElementsByClassName('spacing-controller')[0],
+    lengthController = document.getElementsByClassName('length-controller')[0],
+    intervalController = document.getElementsByClassName('interval-controller')[0],
+    speedController = document.getElementsByClassName('speed-controller')[0],
+    options = {
+        // color: 0xDD1D36,
+        angle: +angleController.value,          // deg
+        width: +widthController.value,          // px
+        spacing: +spacingController.value,      // px
+        length: +lengthController.value,        // px
+        interval: +intervalController.value,    // px
+        speed: +speedController.value,          // times
+    };
+
+// var polygon = L.polygon(_points, {}).addTo(lmap);
+// window.polygon = polygon;
+window.lmap = lmap;
+console.log(points);
+console.log(_points);
+window.rain = rain(_points, options).addTo(lmap);
+
+angleController.addEventListener('change', function (e) {
+    var angle = Number(e.target.value);
+    window.rain.setAngle(angle);
+});
+
+widthController.addEventListener('change', function (e) {
+    var width = Number(e.target.value);
+    window.rain.setWidth(width);
+});
+
+spacingController.addEventListener('change', function (e) {
+    var spacing = Number(e.target.value);
+    window.rain.setSpacing(spacing);
+});
+
+lengthController.addEventListener('change', function (e) {
+    var length = Number(e.target.value);
+    window.rain.setLength(length);
+});
+
+intervalController.addEventListener('change', function (e) {
+    var interval = Number(e.target.value);
+    window.rain.setInterval(interval);
+});
+
+speedController.addEventListener('change', function (e) {
+    var speed = Number(e.target.value);
+    window.rain.setSpeed(speed);
+});
+
+lmap.on('click', e => {
+    let p = lmap.options.crs.project(e.latlng);
+    console.log(p);
+})
+
+function reverseData(array) {
+    return array.map(coords => {
+        return coords.map(coord => coord.slice().reverse());
+    });
+}