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="36.890257,30.707417"
              zoom="13" model="#{markerSelectionView.simpleModel}">
              <p:ajax event="overlaySelect" listener="#{markerSelectionView.onMarkerSelect}" update="growl"/>
    </pe:osmap>


                @Named
@ViewScoped
public class MarkerSelectionView implements Serializable {

    private MapModel<Long> simpleModel;

    private Marker<Long> marker;

    @PostConstruct
    public void init() {
        simpleModel = new DefaultMapModel<>();

        // Shared coordinates
        LatLng coord1 = new LatLng(36.879466, 30.667648);
        LatLng coord2 = new LatLng(36.883707, 30.689216);
        LatLng coord3 = new LatLng(36.879703, 30.706707);
        LatLng coord4 = new LatLng(36.885233, 30.702323);

        // Basic marker
        simpleModel.addOverlay(new Marker<>(coord1, "Konyaalti", 1L));
        simpleModel.addOverlay(new Marker<>(coord2, "Ataturk Parki", 2L));
        simpleModel.addOverlay(new Marker<>(coord3, "Karaalioglu Parki", 3L));
        simpleModel.addOverlay(new Marker<>(coord4, "Kaleici", 4L));
    }

    public MapModel<Long> getSimpleModel() {
        return simpleModel;
    }

    public void onMarkerSelect(OverlaySelectEvent<Long> event) {
        marker = (Marker) event.getOverlay();

        FacesContext.getCurrentInstance().addMessage(null,
                    new FacesMessage(FacesMessage.SEVERITY_INFO,
                                "Marker " + marker.getData() + " Selected", marker.getTitle()));
    }

    public Marker<Long> getMarker() {
        return marker;
    }
}

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.