This demo page displays a simple Hexbin layer example with using gwt-leaflet-d3 library which lets you use Java to deal with LeafletJs, d3.js and Leaflet D3 extension. For more details please take a look at the Documentation.
<head>
<!-- Leaflet Javascript and Styles - a base map library stuff -->
<script src="./leaflet/leaflet.js" type="text/javascript" language="javascript"></script>
<link href="./leaflet/leaflet.css" rel="stylesheet">
<!-- Simple styles for this demo's map -->
<style>
#map {
height: 280px;
width: 100%;
max-width: 660px;
margin-top: 7%;
}
.hexbin-hexagon {
stroke: #000;
stroke-width: 1px;
}
</style>
</head>
<body>
<div id="map"></div>
</body>
@Override
public void onModuleLoad() {
// the remaining D3 related JS files are injected to HTML document from here
LeafletD3.init(() -> {
createAndAttachMap();
});
}
private void createAndAttachMap() {
MapOptions mapOptions = new MapOptions.Builder(
L.latLng(52.233333, 21.016667), 6.0, 5.0).dragging(true).build();
final com.gwidgets.api.leaflet.Map map = L.map("map", mapOptions);
TileLayerOptions tileLayerOptions =
new TileLayerOptions.Builder().minZoom(3).maxZoom(8).build();
L.tileLayer(MAP_URL, tileLayerOptions).addTo(map);
HexbinLayer<Coordinate> hexbinLayer = new HexbinLayer<>(
HexbinLayer.Config.create()
.withDuration(500d).withOpacity(0.5).withRadius(12d).build());
hexbinLayer
.withColorRange(new String[]{"white", "orange", "red"})
.withColorValue(value -> value.length)
.withRadiusValue(value -> value.length)
.withLng(value -> value.longitude)
.withLat(value -> value.latitude)
.withData(getCoordinates()); // a data have to be set as the last
hexbinLayer.addTo(map);
}
For complete code please see here.