Java wrapper for Leaflet, JavaScript library for mobile-friendly interactive maps.
- Current version: v1.9.4
- Previous version: v1..6.0
Project Source Code: https://github.com/makbn/java_leaflet
Leaflet is the leading open-source JavaScript library for mobile-friendly interactive maps. Weighing just about 38 KB of JS, it has all the mapping features most > developers ever need. Leaflet is designed with simplicity, performance and usability in mind. It works efficiently across all major desktop and mobile platforms, can be extended with > lots of plugins, has a beautiful, easy to use and well-documented API and a simple, readable source code that is a joy to contribute to.
Since you are working on JavaFX application you know you need to have the JavaFX runtime. Read more about installing JavaFx:
To run the Leaflet example class you need to set the module path as VM options:
--module-path [PATH_TO_JAVA_FX_LIB_FOLDER]
--add-exports javafx.web/com.sun.javafx.webkit=ALL-UNNAMED
--add-modules=javafx.graphics,javafx.webThere is an issue with JavaFX v17.X javafx.web engine and OSM tiles, I tried JavaFX v19.0.2.1 and it works fine!
First, you need to initialize an instance of JLMapView:
final JLMapView map = JLMapView
.builder()
.mapType(JLProperties.MapType.OSM_MAPNIK)
.showZoomController(true)
.startCoordinate(JLLatLng.builder()
.lat(51.044)
.lng(114.07)
.build())
.build();Based on Leaflet JS, you can interact with map in different layers. in this project, you can access different functions with this layer:
mapfor direct changes on mapmap.getUiLayer()for changes on UI layer like markers.map.getVectorLayer()represents the Vector layer on Leaflet map.map.getControlLayer()represents the control layer for setting the zoom level.map.getGeoJsonLayer()represents the GeoJson layer.
Some map view functionalities are available in map layer like setView or setMapListener as a callback for map events:
- Change the current coordinate of map center:
map.setView(JLLatLng.builder()
.lng(10)
.lat(10)
.build());- Add a listener for map events:
map.setMapListener(new OnJLMapViewListener() {
@Override
public void mapLoadedSuccessfully(JLMapView mapView) {
}
@Override
public void mapFailed() {
log.error("map failed!");
}
@Override
public void onAction(Event event) {
if (event instanceof MoveEvent moveEvent) {
log.info("move event: " + moveEvent.action() + " c:" + moveEvent.center()
+ " \t bounds:" + moveEvent.bounds() + "\t z:" + moveEvent.zoomLevel());
} else if (event instanceof ClickEvent clickEvent) {
log.info("click event: " + clickEvent.center());
map.getUiLayer().addPopup(clickEvent.center(), "New Click Event!", JLOptions.builder()
.closeButton(false)
.autoClose(false).build());
} else if (event instanceof ZoomEvent zoomEvent) {
log.info("zoom event: " + zoomEvent.zoomLevel());
}
}
}Read more about map events from OnJLMapViewListener.Action.
Layer for adding/removing markers and popup. you can access UI layer from map.getUiLayer(). As an example:
map.getUiLayer()
.addMarker(JLLatLng.builder()
.lat(35.63)
.lng(51.45)
.build(), "Tehran", true)
.setOnActionListener(getListener());Controlling map's zoom level:
// map zoom functionalities
map.getControlLayer().setZoom(5);
map.getControlLayer().zoomIn(2);
map.getControlLayer().zoomOut(1);you can add a listener for some Objects on the map:
marker.setOnActionListener(new OnJLObjectActionListener<JLMarker>() {
@Override
public void click(JLMarker object, Action action) {
System.out.println("object click listener for marker:" + object);
}
@Override
public void move(JLMarker object, Action action) {
System.out.println("object move listener for marker:" + object);
}
});Represents the Vector layer for Leaflet map. Poly lines, Polygons, and shapes are available in this layer.
map.getVectorLayer()
.addCircleMarker(JLLatLng.builder()
.lat(35.63)
.lng(40.45)
.build()
);Represents the GeoJson layer for Leaflet map and defines methods for adding and managing GeoJSON data layers in a Leaflet map.
JLGeoJsonObject geoJsonObject = map.getGeoJsonLayer()
.addFromUrl("https://pkgstore.datahub.io/examples/geojson-tutorial/example/data/db696b3bf628d9a273ca9907adcea5c9/example.geojson");You can add GeoJson data from three different sources:
- From a file using
map.getGeoJsonLayer().addFromFile([FILE]) - From a URL using
map.getGeoJsonLayer().addFromUrl([URL]) - From a GeoJson content
map.getGeoJsonLayer().addFromContent([CONTENT])
You can pass JLOptions to each method for changing the default style!
map.getVectorLayer()
.addCircle(JLLatLng.builder()
.lat(35.63)
.lng(51.45)
.build(), 30000,
JLOptions.builder()
.color(Color.BLACK)
.build()
);For the map itself, you can choose between themes available in JLProperties.MapType class. The JLProperties.MapType.OSM_MAPNIK is available to be used without any access key but for the rest of them, you need to define your own map using JLProperties.MapType and passing proper list of key-values containing all the necessary access keys.
JLProperties.MapType myMapType = new JLProperties.MapType("HEREv3.terrainDay",
Set.of(new JLMapOption.Parameter("apiKey", "<insert apiKey here>")));
JLMapView map = JLMapView
.builder()
.mapType(myMapType)
.showZoomController(true)
.startCoordinate(JLLatLng.builder()
.lat(51.044)
.lng(114.07)
.build())
.build();Read more:
- Adding GeoJson Support
- Adding better support for Map providers
- Adding SVG support
- Adding animation support
- Separating JS and HTML
- Publishing package on GitHub
Disclaimer: I've implemented this project for one of my academic paper in the area of geo-visualization. So, im not contributing actively! One more thing, I'm not a Javascript developer!
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent