gwty-leaflet

a JsInterop wrapper for the Leaflet js library

License

License

Categories

Categories

GWT (Google Web Toolkit) User Interface Web Frameworks Leaf Data Databases
GroupId

GroupId

com.thamtech.gwt
ArtifactId

ArtifactId

gwty-leaflet
Last Version

Last Version

1.1.0
Release Date

Release Date

Type

Type

gwt-lib
Description

Description

gwty-leaflet
a JsInterop wrapper for the Leaflet js library
Project URL

Project URL

https://github.com/thamtech/gwty-leaflet
Project Organization

Project Organization

Thamtech
Source Code Management

Source Code Management

https://github.com/thamtech/gwty-leaflet

Download gwty-leaflet

Dependencies

compile (3)

Group / Artifact Type Version
com.google.elemental2 : elemental2-core jar 1.0.0-RC1
com.google.elemental2 : elemental2-dom jar 1.0.0-RC1
com.google.elemental2 : elemental2-svg jar 1.0.0-RC1

provided (1)

Group / Artifact Type Version
com.google.gwt : gwt-user jar 2.8.2

test (2)

Group / Artifact Type Version
com.google.gwt : gwt-dev jar 2.8.2
junit : junit jar 4.12

Project Modules

There are no modules declared in this project.

Forked from gwidgets/gwty-leaflet for continued maintenance and development due to the parent project being archived.

Build Status

Maven Central

Overview

gwty-leaflet is wrapper for the famous maps javascript library Leaflet. gwty-leaflet is based on JsInterop and allows using Leaflet from your GWT application exactly the same way as from a javascript script with a slight advantage: static typing. It was partially generated automatically from Leaflet docs.

Dependency

                     <dependency>
                        <groupId>com.thamtech.gwt</groupId>
                        <artifactId>gwty-leaflet</artifactId>
                        <version>{version}</version>
                     </dependency>

If you are using a snaphost version, then you need to include the snapshot repository:

<repositories>
		<repository>
			<id>snapshots</id>
			<url>https://oss.sonatype.org/content/repositories/snapshots/</url>
			<releases>
				<enabled>false</enabled>
			</releases>
			<snapshots>
				<enabled>true</enabled>
			</snapshots>
		</repository>
	</repositories>

Also, do not forget to include gwty-leaflet in your .gwt.xml module definition file:

 <inherits name='com.gwidgets.api.GwtyLeaflet' />
                  

Versions

  • 1.0: latest stable version, compatible with leaflet 1.0 and 1.0.1, uses Elemental 2
  • 0.5: compatible with leaflet 1.0
  • 0.4: compatible with leaflet 0.7

Leaflet javascript files:

As in any JsInterop wrapper, you need to refer to the Javascript files from your .html app file. You can either download the Js files from Leaflet website, or refer to them directly using their cdn (there are performance implications off course!).

<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>

Starting from the version 0.5, a new feature has been added to allow adding leaflet resource files dynamically from the code instead of including them manually in the .html:

LeafletResources.whenReady(false, 
        e -> 
                 {
      MapOptions options = new MapOptions.Builder(L.latLng(52.51, 13.40), 12.0, 12.0).dragging(false).build();
    final Map map = L.map("map", options);
    GWT.log(options.getZoom()+"");
    L.tileLayer(MAP_URL, null).addTo(map);
     return null;
    });

If the debug flag is set to false, Leaflet minified .js file will be injected, if set to true the unminified version will injected(leaflet-src.js).

This will automatically inject the leaflet .js and .css, and execute the code inside when they are loaded.

Initializing objects

All objects initializations are done through the L class. gwty-leaflet provides all factory methods of Leaflet. For example:

//equivalent to new Map(...)
Map map = L.map("map", new MapOptions.Builder().build());

//equivalent to new Circle(...)
Circle circle = L.circle(L.latLng(51.508, 11), 200, options);

For more information about Leaflet objects creational patterns, you can refer to Leaflet's official documentation.

Options

As specified by Leaflet documentation, the creation of some objects requires a set of options. gwty-leaflet provides all the options with their respective default values as Objects annotated with @JsType. As of version 0.4, options builders were introduced to help in the creation of option Objects and enforce fields validations. Several options have required fields, and using builders help the developer distinguish between required and optional fields.

Before version 0.4:

              PathOptions options = new PathOptions();
                options.fillColor = "#fff";
                options.opacity = 1;

                //...

                L.circle(L.latLng(51.508, 11), 200, options).addTo(map);

After version 0.4:

              PathOptions options = new PathOptions.Builder()
                                     .fillColor("#fff")
                                     .opacity(1)
                                      .build();

                //...

                L.circle(L.latLng(51.508, 11), 200, options).addTo(map);

For more informations about the available options for each objects, and their utility. You can refer to the original leaflet documentation.

Example

To create a map in a div with an id="map", we can do something like:

                
                L.map("map", new MapOptions.Builder().build()).setView(L.latLng(51.505, -0.09), 12.0, new ZoomPanOptions.Builder().build());

Events

Events are available only in some objects. Events can be handled throught the following methods: clearAllEventListeners(), on(String type, Function fn), once(String type, Function fn), off(String type, Function fn), fire(String type).

For defining actions, events needs to be supplied with an abstract callback function that needs to be implemented by the developer. The below example will dipslay a pop up on each map click:

map.on(EventTypes.MapEvents.CLICK, new EventCallback<MouseEvent>() {
			@Override
			public void call(MouseEvent event) {
                                
                                map.openPopup("hello", msEvent.getLatlng(), new PopupOptions.Builder().build());
                                return null;
                        }
                        
                });

Event Objects are:

  • DragEndEvent
  • ErrorEvent
  • GeoJSONEvent
  • KeyboardEvent
  • LayersControlEvent
  • LayerEvent
  • LocationEvent
  • MouseEvent
  • PopupEvent
  • ResizeEvent
  • TileErrorEvent
  • TileEvent
  • TooltipEvent

Events are executed following the order of registration.

Events are explained in details in Leaflet's documentation.

Events types constants

There is a long list of available events for some objects, and the developer may not know what events are available for the object they are using. The EventType class contains a list of subclasses which contains the available events types constants. The event type can be accessed in static a way like: EventTypes.{object name}Events.{event type name}. For example, to register the loading event on a TileLayer :

tile.on(EventTypes.TileLayer.LOADING, new EventCallback<TileEvent>() {
			@Override
			public void call(TileEvent event) {
                        //do something
                        }
                        
                });

Here is a list of the events that can be registred for objects that can handle events:

Object Available Events
DivOverlayEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
RendererEvents update, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
InteractiveLayerEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
LayerEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
PosAnimationEvents start, step, end
DivIconEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
IconEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
GridLayerEvents loading, tileunload, tileloadstart, tileerror, tileload, load, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
GeoJsonEvents layeradd, layerremove, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
FeatureGroupEvents layeradd, layerremove, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
LayerGroupEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
CanvasEvents update, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
SVGEvents update, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
CircleMakerEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
CircleEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
RectangleEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
PolygonEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
PolylineEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
PathEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
ImageOverlayEvents click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
TileLayerWMSEvents loading, tileunload, tileloadstart, tileerror, tileload, load, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
TileLayerEvents loading, tileunload, tileloadstart, tileerror, tileload, load, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
TooltipEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
PopupEvents add, remove, popupopen, popupclose, tooltipopen, tooltipclose
MarkerEvents move, dragstart, movestart, drag, dragend, moveend, click, dblclick, mousedown, mouseover, mouseout, contextmenu, add, remove, popupopen, popupclose, tooltipopen, tooltipclose
MapEvents baselayerchange, overlayadd, overlayremove, layeradd, layerremove, zoomlevelschange, resize, unload, viewreset, load, zoomstart, movestart, zoom, move, zoomend, moveend, popupopen, popupclose, autopanstart, tooltipopen, tooltipclose, click, dblclick, mousedown, mouseup, mouseover, mouseout, mousemove, contextmenu, keypress, preclick, zoomanim, locationerror, locationfound

Javadoc :

Elemental 2:

The 1.0 version makes use of Elemental 2, instead of local javascript wrapped Elements(under .elemental package). The .elemental package has been removed as it is not needed anymore.

GWT version:

the 0.5 version is compiled using GWT 2.8.0. the 1.0 version is compiled using GWT 2.8.2.

com.thamtech.gwt

Thamtech

Versions

Version
1.1.0
1.0.0