tsotzolas / jsf2leaf

A JSF Leaflet wrapper component for OpenStreetMap (OSM)

Overview

JSF2Leaf is a JavaServer Faces component that allows a simpler way to insert maps in your webpage using just a tag, like any other JSF component. This is possible because JSF2Leaf wraps the Leaflet map library, using OpenStreetMap as map provider.

Features

• Simple, just a single tag and you have a map!
• Support Markers, Layers, Polylines, Circles and Clusterization
• Easy, no need to know Leaflet, javascript or any other map API !
• Small ~ 63 kb

Article

http://www.l3oc.com/2015/06/jsf2leaf.html

Usage

Just copy jsf2leaf.jar to:

<project_dir>\WebContent\WEB-INF\lib

Then in your .xhtml file insert the library namespace:

xmlns:leaf="http://java.sun.com/jsf/composite/jsf2leaf"

Now you have access to the <leaf:map /> and <leaf:mapAdvanced /> tags !

Simple Map

For a simple map, <leaf:map /> should be used, because all parameters can be set in the tag and a Bean is not really necessary, however, there are some limitations, you can add only a single marker and no layers. Look:

Simplest way to insert a map:

<leaf:map center="42.120000,-72.540000" />

Specifying all possible parameters:

<leaf:map center="42.120000,-72.540000" 
marker="42.120000,-72.540000"
popupMsg="Krusty Burger&lt;br&gt; Phone: [phone]" 
zoomGlobal="false" 
zoom="12"
width="300px" 
height="200px" 
maxZoom="19" 
minZoom="1" 
dragging="false"
zoomControl="false"
miniMap="true"
miniMapWidth="100"
miniMapHeight="66"
miniMapPosition="bottomleft"
urlTemplate="http://tile.stamen.com/toner/{z}/{x}/{y}.png"
attribution="JSF2Leaf" />

The parameters list can be found HERE.

Advanced Map

Advanced map should be used if you want advanced features like multiple markers, layers, polylines etc, as well as build the map from Java Bean. The tag <leaf:mapAdvanced /> have just the map parameter, that receives the Map object built in the Bean. JSF2Leaf supply all the classes needed to build the Map object, they will be available after the lib installation and import in the Bean. Look:

test.xhtml:

<leaf:mapAdvanced map="#{testBean.springfieldMap}" />

testBean.java:

import com.jsf2leaf.model.Circle;
import com.jsf2leaf.model.LatLong;
import com.jsf2leaf.model.Layer;
import com.jsf2leaf.model.Map;
import com.jsf2leaf.model.Marker;
import com.jsf2leaf.model.Polyline;
...
	private Map springfieldMap = new Map();
...
		Layer placesLayer = (new Layer()).setLabel("Places");
		placesLayer.addMarker(new Marker(new LatLong("42.120000","-72.540000"),"<b>Krusty Burger</b><br>Phone: [phone]"));
		placesLayer.addMarker(new Marker(new LatLong("42.114556","-72.526309"),"<b>Elementary School</b><br>Skinner&#39;s Phone: [phone]"));
		placesLayer.addMarker(new Marker(new LatLong("42.120286","-72.547488"),"<b>Hospital</b><br>Dr. Hibbert lol"));
	
		Layer riversLayer = (new Layer()).setLabel("Rivers");
		riversLayer.addMarker(new Marker(new LatLong("42.104702","-72.530923"))).addMarker(new Marker(new LatLong("42.111707","-72.541008")));

		Layer polycircleLayer = (new Layer()).setLabel("Polyline/Circle");
		polycircleLayer.addPolyline((new Polyline()).addPoint(new LatLong("42.114556","-72.526309")).addPoint(new LatLong("42.120000","-72.540000")));
		polycircleLayer.addCircle((new Circle()).setPosition(new LatLong("42.111707","-72.541008")));

		springfieldMap.setWidth("350px").setHeight("250px").setCenter(new LatLong("42.111707","-72.541008")).setZoom(13);
		springfieldMap.addLayer(placesLayer).addLayer(riversLayer).addLayer(polycircleLayer);
...

All classes support concatenation of methods and have a toString() method for debug purposes. Details can be found HERE.

New version (february 2016) :

You can display a minimap by adding the following lines in testBean.java :

springfieldMap.setMiniMap(true);
springfieldMap.setMiniMapWidth(100);
springfieldMap.setMiniMapHeight(66);
springfieldMap.setMiniMapPosition("bottomright");

You can work offline or choose your tile server by adding the following lines in testBean.java :

springfieldMap.setUrlTemplate("http://tile.stamen.com/toner/{z}/{x}/{y}.png");

You can add a pulse animation to yours markers by adding the following lines in testBean.java :

placesLayer.addMarker(new Marker(new LatLong("47.084461"," 2.400046"),"The center of France", new Pulse(true, 10, "#ff0000")));

License

GPLv2 License, details HERE.