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... |
---|
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
.
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' />
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">
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.
Please see a live demo here: https://bit.ly/2woO7Ki.
...and after zoom in...