README.md

The project was archived: the idea is to use Open Layers 3+ and ol-ext HexBin to get the effect like this. The new variant of HexBin for JsInterop is on the way...

gwt-leaflet-d3

A GWT JsInterop wrapper for Asymmetrik/leaflet-d3.

It brings to GWT a collection of plugins for using d3.js with Leaflet (at the moment HexbinLayer functionality only).
Leaflet D3 Provides a collection of D3.js based visualization plugins for Leaflet (supports D3 v5).

The wrapper is for GWT the same what typings are for TypeScript - like the one provided here.

It is desined to work with gwty-leaflet a GWT wrapper for the Leaflet.

The plugin requires modern GWT >= 2.8 (aka Nextgen GWT) which supports JsInterop.
The gwt-leaflet-d3 is ready to be used with the upcoming J2CL and GWT 3. It has no dependencies to gwt-user.

Usage

Add dependency

Add the JitPack repository to your pom.xml build file:

	<repositories>
		<repository>
		    <id>jitpack.io</id>
		    <url>https://jitpack.io</url>
		</repository>
	</repositories>

Add the dependency:

	<dependency>
	    <groupId>pl.itrack</groupId>
	    <artifactId>gwt-leaflet-d3</artifactId>
	    <version>0.3.2</version>
	</dependency>

Inherit gwt-leaflet-d3 in your .gwt.xml module definition file:

<inherits name='pl.itrack.leafletd3.GwtLeafletD3' />

Initialize

In order to use the gwt-leaflet-d3, a Leaflet map needs to be loaded first. Assume your project already includes leaflet.js and leaflet.css.

Then to use gwt-leaflet-d3 plugin it's enough to initialize it as below.

public class YourGWTApp implements EntryPoint {

    @Override
    public void onModuleLoad() {
        LeafletD3.init(() -> {
            // do your stuff
        });
    }
}

Alternatively you can also include it directly in HTML file like this:

<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://d3js.org/d3-hexbin.v0.2.min.js" charset="utf-8"></script>
<script src="https://rawgit.com/Asymmetrik/leaflet-d3/master/dist/leaflet-d3.js" charset="utf-8">

That's it! Using with Leaflet. A basic example

Assume you have your Leaflet map already defined with gwty-leaflet, e.g.:

final Map map = L.map("map", mapOptions);

Then it's time to use the gwt-leaflet-d3. To add a Hexbin layer, it can be defined this way:

HexbinLayer<Coordinate> hexbinLayer = new HexbinLayer<>(
        HexbinLayer.Config.create().withDuration(500d).withOpacity(0.5).withRadius(12d).build());
        
hexbinLayer.withData(getCoordinates());

hexbinLayer.addTo(map);
                

Please see a complete code with an additional features and options here.

Example output

Please see a live demo here: https://bit.ly/2woO7Ki.

...and after zoom in...