Arndt's Blog

Jakarta Server Faces 4 und OpenLayers

Openlayers (https://openlayers.org/) ist wohl DIE Bibliothek, wenn es um Kartendarstellungen im Web geht (gerne auch in Verbindung mit dem Geo-Server – https://geoserver.org/). Sie lässt sich auch wunderbar im Kontext von Jakarta 10 verwenden.

In der xhtml Seite muss hierfür ein Element mit der id=map eingefügt werden (die CSS Klassen machen hier das, was ihre Namen vermuten lassen 🙂 ). Wichtig ist, dass der umschließende Block auch eine Höhe von 100 % hat, dass andernfalls die Karte nur als einzelner Strich dargestellt werden kann.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="jakarta.faces.facelets"
                xmlns:h="jakarta.faces.html"
                xmlns:f="jakarta.faces.core"
                xmlns:p="http://primefaces.org/ui"
                >
...
            <!-- Kartenobjekt einbinden -->
            <h:panelGrid columns="1" columnClasses="left top height100" styleClass="height100 width100"  >
                <div id="map" class="height100" />
            </h:panelGrid

Von der Seite https://openlayers.org/download/ werden die Dateien ol.js, ol.css und bei Bedarf auch ol.js.map benötigt. Die ersten beiden werden in die xhtml Seite eingebunden. Die Orte in den Ressourcen müsst ihr natürlich anpassen.

...
<script type="text/javascript" language="JavaScript" src="#{resource['/resBase/jscript/openLayers/7/openLayers/ol.js']}" ></script>
...
<h:outputStylesheet name="/resBase/jscript/openLayers/7/openLayers/ol.css" />
...

Wenn die map Datei verwendet / genutzt werden soll, muss in ol.js der Verweis von

//# sourceMappingURL=ol.js.map.

in

//# sourceMappingURL=ol.js.map.xhtml

geändert werden, damit kein 404 vom Servlet geliefert wird.

Jetzt muss die Karte noch initialisiert werden. Ich mache dies im onload des <h:body Elements. Dort definiere ich die Tiles und Parameter für die Darstellung, die in eine @ApplicationScoped Bean liegen.

var tileServOpt = '#{optionsAB.options.optionsOsm.osmServerUrlSelcted}';
var tileServParamOpt = '#{optionsAB.options.optionsOsm.osmServerUrlParamSelcted}';
var maxZoomOpt = '#{optionsAB.options.optionsOsm.osmServerType.maxZoom}';
initMap(tileServOpt, tileServParamOpt, maxZoomOpt);

In einer JavaScript Datei, die natürlich auch in die Seite eingebunden werden muss, wird dann die Map initialisiert. Das folgende Beispiel wird nicht 1:1 bei euch laufen, soll aber auch nur Ideen liefern.

function initMap(osmServerUrlVal, osmServerUrlExtensionVal, maxZoomLevelVal) {
    maxZoomLevel = maxZoomLevelVal;
    // URL bestimmen
    var osmServerUrl;
    if (osmServerUrlExtensionVal) {
        osmServerUrl = osmServerUrlVal + osmServerUrlExtensionVal;
    } else {
        osmServerUrl = osmServerUrlVal;
    }
    var osmSourceOptions = {
        url : osmServerUrl,
        maxZoom : maxZoomLevel, // dies muss zusätzlich zu den View Options gesetzt werden!
        wrapX: false  // nicht die Welt umbrechen ;-) 
       // crossOrigin: null,  // dies muss null sein, wenn der Server nicht header("Access-Control-Allow-Origin: *"); sendet (CORS enabled image)
    };
    var osmSource = new ol.source.OSM(osmSourceOptions);

    var osmLayerOptions = {
        title : "OpenStreetMap",
        source : osmSource,
        visible : true,
        type : 'base' 
    };
    var osmLayer = new ol.layer.Tile(osmLayerOptions);
    // Position für Zentireung bestimmen
    var centerPos = transformCoordinate4326To3857(initialLong, initialLat);
    var osmViewOptions = {
        minZoom : minZoomLevel,
        maxZoom : maxZoomLevel,
        center : centerPos,
        zoom : initialZoomLevel
    }
    var osmView = new ol.View(osmViewOptions);

    var mapOptions = {
        target : 'map',
        layers : [ osmLayer ],
        view : osmView
    }

    map = new ol.Map(mapOptions);
    map.addControl(new ol.control.ZoomSlider());
    map.addControl(new ol.control.ScaleLine());
    map.addControl(new ol.control.FullScreen());
}

Die sehr gute Doku der API findet ihr unter https://openlayers.org/en/latest/apidoc/ … also lesen und schöne GIS Abwendungen realisieren. Viel Spaß!

Du hast Fragen oder Anmerkungen? Kontakt: arndt@schoenb.de

arndt

,