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:mapcenter="42.120000,-72.540000" />

Specifying all possible parameters:

<leaf:mapcenter="42.120000,-72.540000" marker="42.120000,-72.540000"
popupMsg="Krusty Burger&lt;br&gt; Phone: 555-5555" 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:mapAdvancedmap="#{testBean.springfieldMap}" />

testBean.java:

importcom.jsf2leaf.model.Circle;
importcom.jsf2leaf.model.LatLong;
importcom.jsf2leaf.model.Layer;
importcom.jsf2leaf.model.Map;
importcom.jsf2leaf.model.Marker;
importcom.jsf2leaf.model.Polyline;
...
privateMapspringfieldMap = newMap();
...
LayerplacesLayer = (newLayer()).setLabel("Places");
placesLayer.addMarker(newMarker(newLatLong("42.120000","-72.540000"),"<b>Krusty Burger</b><br>Phone: 555-5555"));
placesLayer.addMarker(newMarker(newLatLong("42.114556","-72.526309"),"<b>Elementary School</b><br>Skinner&#39;s Phone: 555-5555"));
placesLayer.addMarker(newMarker(newLatLong("42.120286","-72.547488"),"<b>Hospital</b><br>Dr. Hibbert lol"));
LayerriversLayer = (newLayer()).setLabel("Rivers");
riversLayer.addMarker(newMarker(newLatLong("42.104702","-72.530923"))).addMarker(newMarker(newLatLong("42.111707","-72.541008")));
LayerpolycircleLayer = (newLayer()).setLabel("Polyline/Circle");
polycircleLayer.addPolyline((newPolyline()).addPoint(newLatLong("42.114556","-72.526309")).addPoint(newLatLong("42.120000","-72.540000")));
polycircleLayer.addCircle((newCircle()).setPosition(newLatLong("42.111707","-72.541008")));
springfieldMap.setWidth("350px").setHeight("250px").setCenter(newLatLong("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(newMarker(newLatLong("47.084461"," 2.400046"),"The center of France", newPulse(true, 10, "#ff0000")));

License

GPLv2 License, details HERE.