PrimeFaces Extensions Showcase

OpenStreetMap

OpenStreetMap is straight forward. All you have to know is the GPS coordinate of the center of the map.

Source

XHTML page
Managed bean


<p:growl id="growl" showDetail="true" showSummary="true" globalOnly="false">
        <p:autoUpdate />
    </p:growl>

    <pe:osmap style="width:100%; height:500px;"
              center="42.3402,-3.6972"
              zoom="17">
              <p:ajax event="stateChange" listener="#{eventView.onStateChange}" update="growl"/>
              <p:ajax event="pointSelect" listener="#{eventView.onPointSelect}" update="growl"/>
    </pe:osmap>


                @Named
@RequestScoped
public class EventView implements Serializable {

    private static final long serialVersionUID = 1L;

    public void onStateChange(StateChangeEvent event) {
        LatLngBounds bounds = event.getBounds();
        int zoomLevel = event.getZoomLevel();

        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Zoom Level", String.valueOf(zoomLevel)));
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "Center", event.getCenter().toString()));
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "NorthEast", bounds.getNorthEast().toString()));
        addMessage(new FacesMessage(FacesMessage.SEVERITY_INFO, "SouthWest", bounds.getSouthWest().toString()));
    }

    public void onPointSelect(PointSelectEvent event) {
        LatLng latlng = event.getLatLng();

        FacesContext.getCurrentInstance().addMessage(null, new FacesMessage(FacesMessage.SEVERITY_INFO, "Point Selected",
                    "Lat:" + latlng.getLat() + ", Lng:" + latlng.getLng()));
    }

    public void addMessage(FacesMessage message) {
        FacesContext.getCurrentInstance().addMessage(null, message);
    }
}

Use Cases

Documentation pe:osmap

Attributes (move mouse over the names to see data types)

Name	Description
widgetVar	Name of the client side widget.
model	An org.primefaces.model.MapModel instance.
style	Inline style of the map container.
styleClass	Style class of the map container.
center	Center point of the map. Required.
zoom	Defines the initial zoom level. Default is 8.
zoomControl	Display zoom control on a map. Default is true.
attribution	When using OpenStreetMap data, you are required to provide credit and display copyright notice.
tileUrl	Url of a custom tile provider.
draggable	Defines draggability of map. Default is true.
onPointClick	Javascript callback to execute when a point on map is clicked.
scrollWheel	Controls scrollwheel zooming on the map. Default is true.