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;
    }
}