We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

QWC2 viewer for QGIS server with micro service architecture

00:00

Formal Metadata

Title
QWC2 viewer for QGIS server with micro service architecture
Title of Series
Number of Parts
295
Author
Contributors
License
CC Attribution 3.0 Germany:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
QWC2 is a responsive web mapping client optimized for publishing maps with QGIS Server. A modular architecute based on micro services (running as Docker containers or WSGI modules) allows scaling from basic setups up to highly customized service environments.
Keywords
World Wide Web ConsortiumClient (computing)Source codePole (complex analysis)Core dumpServer (computing)Enterprise architectureVector spaceOptical character recognitionOpen setInterface (computing)Focus (optics)Kolmogorov complexityUsabilityArchitectureModul <Datentyp>CodeState of matterLetterpress printingTemplate (C++)Web browserSoftware developerEndliche ModelltheoriePrototypeClient (computing)Interface (computing)TesselationMaxima and minimaServer (computing)Vector spaceWeb applicationDifferent (Kate Ryan album)Goodness of fitQuantum gravityInformationRevision controlScalabilityCASE <Informatik>Electric generatorComplex (psychology)RepetitionWebsiteMenu (computing)Dependent and independent variablesBookmark (World Wide Web)Service-oriented architectureLine (geometry)JSON
Server (computing)Projective planeClient (computing)Web browserWebsiteOpen setCASE <Informatik>Object (grammar)Computer animationLecture/Conference
Client (computing)Component-based software engineeringBuildingChainServer (computing)Service-oriented architectureOpen setDemo (music)Core dumpModul <Datentyp>Web browserComputer configurationFunction (mathematics)Raster graphicsNetwork topologyInformationMeasurementProbability density functionLetterpress printingPairwise comparisonGroup actionImage registrationTraffic reportingIndependence (probability theory)MappingService-oriented architectureServer (computing)Core dumpLetterpress printingDifferent (Kate Ryan album)Pairwise comparisonWeb browserConnectivity (graph theory)Texture mappingFormal languageModule (mathematics)AdditionTemplate (C++)Computer configurationDemo (music)Probability density functionClassical physicsTraffic reportingClient (computing)Group actionElectric generatorInternet service provider2 (number)File viewerDatabaseNetwork topologyIndependence (probability theory)Software developerInformationDependent and independent variablesProfil (magazine)WebsiteImage registrationMeasurementMetropolitan area networkRange (statistics)ChainDigitizingScripting languageCartesian coordinate system
Wechselseitige InformationScale (map)LaserChemical equationInformationFingerprintMach's principleGamma functionTexture mappingInformationWebsiteElectronic visual displayWeb pageFunctional (mathematics)Right angleTheoryMobile appCoordinate systemMathematics
Computer-generated imageryPlastikkartePairwise comparisonGamma functionState of matterTime zoneComputer networkScale (map)Functional (mathematics)Function (mathematics)Network topologyPairwise comparisonTemplate (C++)Set (mathematics)Server (computing)MathematicsAdditionInformationTime zoneLink (knot theory)1 (number)Texture mappingService-oriented architectureInheritance (object-oriented programming)Letterpress printingImage resolutionStructural load
Dynamic random-access memoryLink (knot theory)Online helpLoginNetwork topologyImage resolutionServer (computing)Computer animation
WordFormal languageCellular automatonProbability density functionMathematicsView (database)Sign (mathematics)Online helpScale (map)Template (C++)AdditionRaster graphicsAreaProfil (magazine)Line (geometry)Letterpress printingBitComputer fontFunctional (mathematics)MeasurementMoving averageLengthShape (magazine)Point (geometry)Different (Kate Ryan album)Element (mathematics)Traffic reporting
Open setMaxima and minimaOnline helpGamma functionLink (knot theory)Level (video gaming)Normed vector spaceWebsiteQuery languageInformationAreaFingerprintTime zoneAddress spaceManufacturing execution systemPairwise comparisonGame theoryCore dumpVideoconferencingGoogolLine (geometry)Operations support systemProbability density functionComputer fileWeb pageView (database)File viewerSource codePole (complex analysis)Sign (mathematics)Server (computing)ArchitectureAddress spaceTime zoneMappingTexture mappingRaster graphicsOnline helpResultantSubject indexingLoginSearch engine (computing)AlgorithmMultilaterationPresentation of a groupCategory of beingRankingGoodness of fitState of matterType theoryInstance (computer science)
Server (computing)Pole (complex analysis)Source codeFile viewerArchitectureClient (computing)Core dumpEnterprise architectureVector spaceOpen setComponent-based software engineeringImage registrationGroup actionTraffic reportingInformationIndependence (probability theory)DisintegrationService-oriented architectureWeb browserGateway (telecommunications)Graphical user interfaceLetterpress printingZugriffskontrolleProbability density functionControl flowE-textAuthenticationData managementType theoryTemplate (C++)Attribute grammarTask (computing)Kerberos <Kryptologie>Token ringDatabaseActive DirectoryHTTP cookieModul <Datentyp>Latent heatConfiguration spaceSanitary sewerJava appletScripting languageDecimalFunction (mathematics)TelecommunicationProcess (computing)Thread (computing)Default (computer science)Formal languageBuildingWindows RegistryComputer-generated imageryDistribution (mathematics)Physical systemVisualization (computer graphics)Software maintenanceNumberOperations researchScaling (geometry)Flow separationMixed realityHuman migrationAuthorizationArchitectureEndliche ModelltheorieService-oriented architectureImplementationDifferent (Kate Ryan album)Price indexUniform resource locatorRight angleComputer fileGateway (telecommunications)Maxima and minimaAuthorizationSoftware frameworkSoftware testingConnected spaceGroup actionProcess (computing)Single-precision floating-point formatMultiplication signMoving averageSoftwareRepetitionMappingSet (mathematics)Integrated development environmentLevel (video gaming)Reading (process)Self-organizationDressing (medical)Traffic reportingVideo gameToken ringBit rateTexture mappingInheritance (object-oriented programming)User interfaceType theoryMereologyTask (computing)ConcentricFile viewerProjective planeInterface (computing)Configuration spaceWorkstation <Musikinstrument>System administratorCartesian coordinate systemHeegaard splittingServer (computing)AuthenticationRevision controlArchaeological field surveyDatabaseWordOperator (mathematics)CASE <Informatik>Game controllerConnectivity (graph theory)Physical systemDemo (music)State of matterData managementLetterpress printingInformation securityCodeFront and back endsWeb 2.0Classical physicsWeb browserKerberos <Kryptologie>Module (mathematics)PasswordModule (mathematics)Complex (psychology)Address spaceSource codeJSON
Client (computing)Source codeDemo (music)Service-oriented architectureSource codeLink (knot theory)Source codeJSONXML
Computer fileClient (computing)Moving averageSystem callSheaf (mathematics)Texture mappingDirection (geometry)Vector spaceStructural loadCuboidLecture/Conference
Client (computing)Demo (music)Server (computing)Computer fileOverlay-NetzRight angleInstance (computer science)Uniform resource locatorLetterpress printingNeuroinformatikComputer animationEngineering drawing
Line (geometry)Server (computing)Service-oriented architectureAttribute grammarProjective planeFront and back endsNetwork topologyClient (computing)Multiplication signDatabaseTask (computing)CASE <Informatik>Letterpress printingPoint (geometry)Computer wormField (computer science)Interface (computing)Texture mappingWebsiteForm (programming)System administratorRootComputer fileControl flowSimilarity (geometry)Right angleGeometryLecture/Conference
Transcript: English(auto-generated)
Thank you for the introduction. My name is Benjamin Kalbrer. I work for a Swiss company of developers. We are doing QJS development on client side and desktop and on server. We provide services.
We do WebJS with QJS, QG server, and also with vector tiles and some other things. And what I show now is QJS Web Client 2, which has rather long history. And the second generation had certain goals, which
were a modern responsive interface. We wanted to have less complexity than in the first version of QG's Web Client. Scalable infrastructure, model base code, and new technology. That's always a topic in web applications.
We favorized ReactJS and newer OpenLayers versions. That was the prototype. It should be responsive and have a good UI on different sizes.
So this was the basic, the start screen. And with menu, we do some little things. We have the logo on top left, which has less information in a small size and more details.
And this QG Web Client should work from a minimal use case to a big installation. And the minimal use cases, we have just QG server on server side as a WMS server with some metadata. And we feed in QG as projects.
And we have to Web Client on client side. So that should be everything we need. And that's the first use case. And we use this technology for achieving that. We have ReactJS with Redux, OpenLayers, as I said.
And we have this whole JavaScript tool chain, which is NodeJS. We use Yarn and Webpack. And we provide a demo application, which is targeted to developers to customize the viewer. On server side, as I said, QG server.
And we have optional additional services on server side. The core modules are a browser for different themes, we call it, or topics, maps in the end. We have layer tree feature info. We have different search providers.
We have tools like measurements, sketching, redlining. We have a permalink generation. And we have PDF print, which is a strength of QG server. We can use the QG server print templates for PDF printing. We have screenshots, raster, exports.
We have client side, WMS, WFS import, also KML. And we have tools like for map comparison. I will show you that in a few seconds. The additional features listed here, they need additional server components. So for database search, classical SQL search,
we need a search service on server side. For permalink, we need a service on server side. For reporting, we have Jasper reports and service on server side. We support editing, digitizing, and also a map service,
which is layer independent. We have printing of legends, hate profiles, and self-registration for groups. And all this is currently translated into seven languages. User contribute translations, and more languages are welcome.
So I show you, before I continue with the technical details, so you know what I'm talking about. So this is the start page of one site using QWMS app QWC2.
This is the WMTS you see here. And when I zoom in, here you have all the background. On the background map, I choose a topic.
It's the one I like. And then I can click on a map for getting information. So that's the left click, which queries all visible layers. We can have additional information for the layers. We can highlight certain features.
We have also right click information. This is this map info, which can be like an elevation or coordinates. We have zoom, and we can change switch background map,
and some display, and changing scales, and so on. So that's usual functionality you would expect. So I loaded one map, which has multiple layers. So here I can go into the layer tree
and change settings if I want. I have additional information about layers. I have also a legend button, which shows me a printable output for all visible layers.
And I can import layers, as I said before. I try that.
I filter. That's a VMSW with many layers. All right, take this zones here.
And so that's a good example to show changing transparency. I can make that transparent. And what I can also do is use this map comparison feature. I have this comparison slider, which
compares with the top layer. Ones on the left side with the top layer, and on the right side without this layer. So that's about the layer and legends. I can share a short link with a QR code, if I like.
And I can print the whole thing. I can select the templates. These are QGIS server templates, which are QGIS desktop, made with QGIS desktop.
OK, I can also rotate. Doesn't make sense here. But just to show, I can add a note. And then, I don't know how quick it is,
because now we have a WMTS background, which is kind of slow for printing, because we have to change that to a WMS on server side to get full resolution. I let that load.
It's not so fast here. So here it comes. Yeah, here it is. So it's a simple template with a logo and my text.
And yeah, with some additional things on it. So that's the PF print. I go to the measurement tools. We have different measurement tools.
We can measure areas quite easily. And we can also measure lengths, which has an additional functionality that it shows the height profile. And we can move here on the height profile and see it on the measurement line.
We have the redlining tools, where I can add shapes. And I would like to fill it a little bit like that
and put the label on it. And that's also printable. So I have lines, points. I can edit this redlining. I can add more drawing elements. I can add text only.
I can delete. I can adjust the size of fonts and line thickness, quite a few things. And the last one is the raster export, which I don't show here. It's JPEG and PNG.
So I can, oh, I did show it. So that was raster export. OK, help. And login is for other maps which are protected. I will say more about that later.
So now I want to show a different installation, which has the latest search engine built in. This is a solar-based search. I can search, for instance, for something like that.
We chose immediate results, as you saw, as I type. And it shows different categories. So on one side are features by themselves. And there are also maps. So I can add a map layer.
And so that's another approach. You start with an empty map or with a background map, and you add your layers as you type. You can also type in addresses. Here, this refined search shows you
that it has found addresses with zone and maps with zone. And if I click on that, I refine the search just for addresses. So yeah, and the results are really good. It's a full-text search, which has a good index and a good
ranking algorithm. So it's really state-of-the-art search engine behind it. And when I click on address, it locates there and zooms into. And everything is printable.
Yeah, I think that's the most important thing to show. Oh, now I lost the presentation.
So now I go to the back end for these additional services. We have a GitHub organization called QWC Services, which
is a collection of back-end services. They are modular, microservice-oriented. Most of them are Python Flask application, which is a minimal web framework. It has integrated OpenAPI, Swagger documentation.
And you can deploy them as Docker containers. There is a Docker Compose file and all the containers. So you have easily start a test environment. And you can also deploy this WSGI.
So this is the GitHub address for the services. I have many services there. And that's a picture of the architecture. We have the front-end side. Oh, it's a little bit dark. On the left is the browser.
Then we have API Gateway, which distributes the different URLs to the services. So we have these front-end services, like authorization, map services, and so on. And we have, on the right, internal services,
like QG Server, in this case, because now it is protected by other services. Not everything is public. We have just reporting service in the background. And we have a configuration service in the background. And we have also data. It's one database for geodata.
And we have a configuration database with administration GUI. So what is available? We have a map viewer component. It's which is a front-end for QG Server, but has access control for viewers and parts of viewers,
like tools you can have only for certain user groups. We have the OTC service front-end, which can deliver WMS, WFS, and the print service, which can also have certain print templates
only available for certain users. We have a search service, the classical DB search, and the new search I just showed. This is so new that it isn't available on GitHub yet. This went live yesterday. We have a data service for editing data, map info,
and the permalink service and elevation service. You saw all that in the demo. And administration GUI is for configuration of the configuration DB, of user group management, and role-based permissions for certain resource types, like maps, print and place
layer attributes, and for data sets with different levels, create, read, update, delete for certain viewers, your tasks, and you can also define custom resources.
The authentication services, we have one interface, but different implementations. And so all these implementations, they issue internally, they do JWT tokens and pass that to the other services. But in front, you can have different authentication
services. We have one for DB authentication, means user passwords are stored in the database. We have also LDAP and even more, like Kerberos or XAML. The internal services is we have a shared module
for all services. We have configuration service, QT server, and a JSP reporting service for complex reports. And this is another illustration what possibilities I have for configuration. I can add custom modules into the viewer on top left.
I built the JavaScript from that. I have these green components are for configuration. So you can add QT projects or JSP reports. That's the main thing. And the red things are custom codes.
And you can configure the config DB, obviously. So a few words about microservices. What are microservices? This kind of application was usually built monolithic. But in microservice world, you split it up
in little processes, which are as loosely coupled as possible. They should be isolated and modular. And they communicate by HTTP. That's how a Swagger API looks or the user interface
for the API these services have. And you put that into Docker container. That was mentioned a few times. Goal would be one single service per container. And then you have to run these containers or orchestrate them. Kubernetes is the most common software
for doing that, which controls all these containers. So what are the advantages and disadvantages? We have quite some effort for operations because we have many services floating around. We have many services to run. All of these have DB connections.
We have to organize logging. That's a disadvantage. But we can scale with fine granularity. We can scale just one service if we need. What is complicated is this authentication of an authorization organization.
It's more complicated with microservices than in a monolithic architecture. But you can have different models. That is an advantage. You can mix technologies. You can have one service with Java-based application and one service which is Python. And that's really a great thing.
You can migrate these services in these modules. And they don't interfere. Here are a few links. There is the source code, issue tracker, and documentation, and examples I showed right now.
OK, thank you. OK, thank you, Permin. Any questions for Permin? Actually, I have two questions.
Those in your application, you can maybe rack and load geosysn file or things like that to add. GeoJSON. Yeah. Jet files, I don't know. We support KML only, not JSON. But you can add vector data on client side, yes.
Yeah, OK, so you can drag and drop or maybe drag and drop. I think it's drag and drop to this entry box where I typed in. So there is a file section there. And there you can drop it, not on the map directly.
OK. Yeah, someone in the instance wants to, if we, Permin can show it. What I did show is this URL thing. And here, we can switch to file. And here, I can select the file. But I don't have a demo file at hand on these computers.
Right now, it's just KML. That was the custom request. But geochasen would be easy because everything here is geochasen. When we do this redlining, all of that is geochasen. We also sent that to QG server because QG server supports printing overlays with geochasen.
Save, how do you mean? You can print it, but you cannot save it on server side. It's just on client side. And send it to the server for printing.
That you can edit data, yeah. I can't show that here, but we have. You can have editable layers where you get a similar interface like for redlining. And then you add points, lines, and so on in a separate layer.
And you store that with a geochasen interface on server side. How custom, whatever, of adding fields in those layers
that you're talking about? These layers, the fields are already defined. That's how they are sorted in the database. And you get entry form with these attributes. And then you can fill in the attributes to the added geometries. Or you can delete geometries and edit geometries.
So you can't add any other attributes? You can't add additional attributes, user-defined attributes. They are defined on server side. OK, got the idea.
Is it possible to upload a QGIS project file which defines the themes in this UI, as I understood, through the client? Not through the client, but through the backend. Right now, the normal way is to copy the map file somehow
to the server of the QGIS project file. There is an experimental backend available in German only, where you can directly upload the QGIS project file in the backend. But this is not published yet, because it was written for a certain use case.
But the user cannot upload project files. This is an administration task. OK, thank you. Another one question, maybe? No? OK, thank you, Permin. Thank you. I think it's time for the coffee break.
Thank you.