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


<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"/>

Components and more

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.

PrimeFaces: 15.0.5,

PrimeFaces Extensions: 15.0.6-SNAPSHOT,

JSF: Apache MyFaces JSF-2.3 Core Impl 2.3.10,

Server: Apache Tomcat (TomEE)/9.0.82 (8.0.16),

Build time: 2025-06-13 20:21