{"id":215,"date":"2023-02-22T08:10:15","date_gmt":"2023-02-22T07:10:15","guid":{"rendered":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/?p=215"},"modified":"2023-02-22T16:18:04","modified_gmt":"2023-02-22T15:18:04","slug":"jakarta-server-faces-4-und-openlayers","status":"publish","type":"post","link":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/?p=215","title":{"rendered":"Jakarta Server Faces 4 und OpenLayers"},"content":{"rendered":"\n

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

In der xhtml <\/code>Seite muss hierf\u00fcr ein Element mit der id=map<\/code> eingef\u00fcgt werden (die CSS Klassen machen hier das, was ihre Namen vermuten lassen \ud83d\ude42 ). Wichtig ist, dass der umschlie\u00dfende Block auch eine H\u00f6he von 100\u00a0% hat, dass andernfalls die Karte nur als einzelner Strich dargestellt werden kann.<\/p>\n\n\n\n

<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD XHTML 1.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/xhtml1\/DTD\/xhtml1-transitional.dtd\">\n<ui:composition xmlns=\"http:\/\/www.w3.org\/1999\/xhtml\"\n                xmlns:ui=\"jakarta.faces.facelets\"\n                xmlns:h=\"jakarta.faces.html\"\n                xmlns:f=\"jakarta.faces.core\"\n                xmlns:p=\"http:\/\/primefaces.org\/ui\"\n                >\n...\n            <!-- Kartenobjekt einbinden -->\n            <h:panelGrid columns=\"1\" columnClasses=\"left top height100\" styleClass=\"height100 width100\"  >\n                <div id=\"map\" class=\"height100\" \/>\n            <\/h:panelGrid<\/code><\/pre>\n\n\n\n
Von der Seite https:\/\/openlayers.org\/download\/ werden die Dateien ol.js<\/code>, ol.css<\/code> und bei Bedarf auch ol.js.map<\/code> ben\u00f6tigt. Die ersten beiden werden in die xhtml <\/code>Seite eingebunden. Die Orte in den Ressourcen m\u00fcsst ihr nat\u00fcrlich anpassen.<\/p>\n\n\n\n
...\n<script type=\"text\/javascript\" language=\"JavaScript\" src=\"#{resource['\/resBase\/jscript\/openLayers\/7\/openLayers\/ol.js']}\" ><\/script>\n...\n<h:outputStylesheet name=\"\/resBase\/jscript\/openLayers\/7\/openLayers\/ol.css\" \/>\n...<\/code><\/pre>\n\n\n\n
Wenn die map <\/code>Datei verwendet \/ genutzt werden soll, muss in ol.js<\/code> der Verweis von<\/p>\n\n\n\n
\/\/# sourceMappingURL=ol.js.map.<\/code><\/pre>\n\n\n\n
in<\/p>\n\n\n\n
\/\/# sourceMappingURL=ol.js.map.xhtml<\/code><\/pre>\n\n\n\n
ge\u00e4ndert werden, damit kein 404 vom Servlet geliefert wird. <\/p>\n\n\n\n
Jetzt muss die Karte noch initialisiert werden. Ich mache dies im onload<\/code> des <h:body<\/code> Elements. Dort definiere ich die Tiles und Parameter f\u00fcr die Darstellung, die in eine @ApplicationScoped<\/code> Bean liegen.<\/p>\n\n\n\n
var tileServOpt = '#{optionsAB.options.optionsOsm.osmServerUrlSelcted}';\nvar tileServParamOpt = '#{optionsAB.options.optionsOsm.osmServerUrlParamSelcted}';\nvar maxZoomOpt = '#{optionsAB.options.optionsOsm.osmServerType.maxZoom}';\ninitMap(tileServOpt, tileServParamOpt, maxZoomOpt);<\/code><\/pre>\n\n\n\n
In einer JavaScript Datei, die nat\u00fcrlich 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.<\/p>\n\n\n\n
function initMap(osmServerUrlVal, osmServerUrlExtensionVal, maxZoomLevelVal) {\n    maxZoomLevel = maxZoomLevelVal;\n    \/\/ URL bestimmen\n    var osmServerUrl;\n    if (osmServerUrlExtensionVal) {\n        osmServerUrl = osmServerUrlVal + osmServerUrlExtensionVal;\n    } else {\n        osmServerUrl = osmServerUrlVal;\n    }\n    var osmSourceOptions = {\n        url : osmServerUrl,\n        maxZoom : maxZoomLevel, \/\/ dies muss zus\u00e4tzlich zu den View Options gesetzt werden!\n        wrapX: false  \/\/ nicht die Welt umbrechen ;-) \n       \/\/ crossOrigin: null,  \/\/ dies muss null sein, wenn der Server nicht header(\"Access-Control-Allow-Origin: *\"); sendet (CORS enabled image)\n    };\n    var osmSource = new ol.source.OSM(osmSourceOptions);\n\n    var osmLayerOptions = {\n        title : \"OpenStreetMap\",\n        source : osmSource,\n        visible : true,\n        type : 'base' \n    };\n    var osmLayer = new ol.layer.Tile(osmLayerOptions);\n    \/\/ Position f\u00fcr Zentireung bestimmen\n    var centerPos = transformCoordinate4326To3857(initialLong, initialLat);\n    var osmViewOptions = {\n        minZoom : minZoomLevel,\n        maxZoom : maxZoomLevel,\n        center : centerPos,\n        zoom : initialZoomLevel\n    }\n    var osmView = new ol.View(osmViewOptions);\n\n    var mapOptions = {\n        target : 'map',\n        layers : [ osmLayer ],\n        view : osmView\n    }\n\n    map = new ol.Map(mapOptions);\n    map.addControl(new ol.control.ZoomSlider());\n    map.addControl(new ol.control.ScaleLine());\n    map.addControl(new ol.control.FullScreen());\n}<\/code><\/pre>\n\n\n\n
Die sehr gute Doku der API findet ihr unter https:\/\/openlayers.org\/en\/latest\/apidoc\/ … also lesen und sch\u00f6ne GIS Abwendungen realisieren. Viel Spa\u00df!<\/p>\n","protected":false},"excerpt":{"rendered":"
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\u00e4sst sich auch wunderbar im Kontext von Jakarta 10 verwenden. In der xhtml Seite muss hierf\u00fcr ein Element mit der id=map eingef\u00fcgt werden (die CSS Klassen machen hier das, was ihre Namen […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,7],"tags":[],"class_list":["post-215","post","type-post","status-publish","format-standard","hentry","category-jee","category-wildfly"],"_links":{"self":[{"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/posts\/215","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=215"}],"version-history":[{"count":8,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/posts\/215\/revisions"}],"predecessor-version":[{"id":243,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=\/wp\/v2\/posts\/215\/revisions\/243"}],"wp:attachment":[{"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=215"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=215"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.schoenberg-solutions.de\/arndtblog\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=215"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}