Add data random generator to the demo project (#8)

* Add data random generator to the demo project
* Rebuild demo project in gh-pages folder

README.md

@@ -33,7 +33,7 @@ Add the dependency:
 	<dependency>
 	    <groupId>pl.itrack</groupId>
 	    <artifactId>gwt-leaflet-d3</artifactId>
-	    <version>0.2.0</version>
+	    <version>0.2.1</version>
 	</dependency>
 ```
 

docs/demos/simple-hexbinlayer-demo/compilation-mappings.txt

@@ -1,16 +1,16 @@
-1528713D7407FF13820C8F50520D85A2.cache.js
+232191D8E66FED5F01011B2E300163D8.cache.js
+user.agent ie8
+
+42651C5509F904C2E001E8ABBC3342CF.cache.js
+user.agent ie10
+
+54FF3BFC4D9EDCBC344F95EAE556EA69.cache.js
 user.agent safari
 
-4DE01F3CE42C8756A13A68194A001D30.cache.js
+73904F0A3D64960DA7B41CA0CD41001A.cache.js
 user.agent ie9
 
-64291DDFF50D6FA97222882E09D6E3BE.cache.js
+91713A0D428598BBCDC3015D9FFF8323.cache.js
 user.agent gecko1_8
 
-6CD98EF82D73C964F00189C66B6ACC8D.cache.js
-user.agent ie8
-
-D254F627D8BB96446B19E3E929E44274.cache.js
-user.agent ie10
-
 Devmode:devmode.js

docs/demos/simple-hexbinlayer-demo/index.html

@@ -45,9 +45,9 @@
     <div class="nav-wrapper orange darken-3">
         <a class="brand-logo" style="padding-left: 1rem;">Leaflet Hexbin layer</a>
         <ul id="nav-mobile" class="right hide-on-med-and-down">
-            <li><a href="https://github.com/baldram/gwt-leaflet-d3">
-                <svg version="1.1" aria-hidden="true" viewBox="0 0 16 16" style="vertical-align: middle; margin-right: 0.2rem" width="22" height="22"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
-                View on Github</a></li>
+            <li>
+                <iframe src="https://ghbtns.com/github-btn.html?user=baldram&repo=gwt-leaflet-d3&type=star&count=true" frameborder="0" scrolling="0" width="170px" height="20px"></iframe>
+            </li>
         </ul>
     </div>
 </nav>
@@ -66,9 +66,13 @@
     </div>
     <div class="row">
         <div class="col s12">
-            <p class="description" style="margin-top: 0px;">
-                <div id="map"></div>
-                The full source code for above example is available <a href="https://github.com/baldram/gwt-leaflet-d3/tree/master/examples/simple-hexbinlayer-demo/" target="_blank">here</a>.
+            <p class="description" style="margin-top: 0;">
+
+            <div id="map"></div>
+            <button id="generateData" class="waves-effect waves-light btn blue"><i class="material-icons left">perm_data_setting</i>Generate new data</button>
+
+            <div style="text-align: right">The full source code for above example is available <a href="https://github.com/baldram/gwt-leaflet-d3/tree/master/examples/simple-hexbinlayer-demo/" target="_blank">here</a>.</div>
+
             </p>
         </div>
         <div class="col s12 center">

examples/pom.xml

@@ -8,7 +8,7 @@
     <parent>
         <groupId>pl.itrack</groupId>
         <artifactId>gwt-leaflet-d3-demos-parent</artifactId>
-        <version>0.2.0</version>
+        <version>1.0.0-SNAPSHOT</version>
     </parent>
 
     <artifactId>gwt-leaflet-d3-demos</artifactId>

examples/simple-hexbinlayer-demo/src/main/java/pl/itrack/leafletd3demo/client/DataGenerator.java

@@ -0,0 +1,71 @@
+package pl.itrack.leafletd3demo.client;
+
+import jsinterop.annotations.JsFunction;
+import jsinterop.annotations.JsPackage;
+import jsinterop.annotations.JsType;
+
+import java.util.stream.IntStream;
+
+/**
+ * A simple data generator using D3 JavaScript library.
+ * The JsInterop was used to map required suff to be accessible from Java.
+ * (JsInterop technique description:
+ * http://www.gwtproject.org/doc/latest/DevGuideCodingBasicsJsInterop.html
+ * https://docs.google.com/document/d/10fmlEYIHcyead_4R1S5wKGs1t2I7Fnp_PaNaa7XTEk0/edit#)
+ * <p>
+ * The mapping implementation way inspired from:
+ * https://github.com/gwtd3/gwt-d3/blob/master/gwt-d3-api/src/main/java/com/github/gwtd3/api/core/Random.java
+ * and https://npm.runkit.com/d3-random
+ * <p>
+ * Alternatively I could simply use the `gwt-d3` library, but just a very small piece was needed.
+ */
+@JsType
+class DataGenerator {
+
+    private static final int NUMBER_OF_ITEMS = 1000;
+    private static final int DEFAULT_DEVIATION = 1;
+
+    static double[][] generateCoordinates(double centerLatitude, double centerLongitude) {
+        return IntStream.range(0, NUMBER_OF_ITEMS)
+                .mapToObj(i -> new double[]{
+                        D3.randomNormal(centerLongitude, DEFAULT_DEVIATION).generate(),
+                        D3.randomNormal(centerLatitude, DEFAULT_DEVIATION).generate()})
+                .toArray(double[][]::new);
+    }
+
+    /*
+      Below is the mapping to enable possibility of calling the native JavaScript stuff like below:
+
+           var d3 = require("d3-random");
+           var latFn = d3.randomNormal(52.233333, 1);
+           latFn();
+
+      PS: It's kind of a stub for D3 wrapper library, but the one already exists: https://github.com/gwtd3/gwt-d3.
+      The `gwt-d3` is a bit old-fashioned and doesn't use JsInterop. It is at least GWT 2.8 compatible,
+      what is good and beneficial, so still an option to be considered.
+     */
+
+    /**
+     * The mapping to access d3.randomNormal() JavaScript function
+     */
+    @JsType(isNative = true, namespace = JsPackage.GLOBAL, name = "d3")
+    public static class D3 {
+
+        @JsFunction
+        @FunctionalInterface
+        public interface Random {
+            double generate();
+        }
+
+        /**
+         * Returns a function for generating random number with a
+         * <a href="http://en.wikipedia.org/wiki/Normal_distribution">normal (Gaussian) distribution</a>,
+         * with the given mean, and the given deviation.
+         *
+         * @param expectation the mean of the distribution
+         * @param deviation   the standard deviation
+         * @return the generator
+         */
+        public static native Random randomNormal(double expectation, double deviation);
+    }
+}

examples/simple-hexbinlayer-demo/src/main/java/pl/itrack/leafletd3demo/public/index.html

@@ -66,9 +66,13 @@
     </div>
     <div class="row">
         <div class="col s12">
-            <p class="description" style="margin-top: 0px;">
-                <div id="map"></div>
-                The full source code for above example is available <a href="https://github.com/baldram/gwt-leaflet-d3/tree/master/examples/simple-hexbinlayer-demo/" target="_blank">here</a>.
+            <p class="description" style="margin-top: 0;">
+
+            <div id="map"></div>
+            <button id="generateData" class="waves-effect waves-light btn blue"><i class="material-icons left">perm_data_setting</i>Generate new data</button>
+
+            <div style="text-align: right">The full source code for above example is available <a href="https://github.com/baldram/gwt-leaflet-d3/tree/master/examples/simple-hexbinlayer-demo/" target="_blank">here</a>.</div>
+
             </p>
         </div>
         <div class="col s12 center">

pom.xml

@@ -3,7 +3,7 @@
     <modelVersion>4.0.0</modelVersion>
     <groupId>pl.itrack</groupId>
     <artifactId>gwt-leaflet-d3</artifactId>
-    <version>0.2.0</version>
+    <version>0.2.1</version>
     <packaging>gwt-lib</packaging>
     <name>GWT Leaflet plugin that allows integration with d3.js library</name>
     <description>A GWT JsInterop wrapper for collection of plugins for using d3.js with Leaflet</description>

src/main/java/pl/itrack/leafletd3/client/wrapper/HexbinLayer.java

@@ -50,6 +50,11 @@ public HexbinLayer(Config config) {
     @JsMethod(name = "data")
     public native HexbinLayer<T> withData(T[] data);
 
+    @JsOverlay
+    public void setData(T[] data) {
+        withData(data);
+    }
+
     @JsMethod
     public native HexbinLayer<T> addTo(Map map);