Printing maps in the browser with InkMap
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 237 | |
| Autor | ||
| Mitwirkende | ||
| Lizenz | CC-Namensnennung 3.0 Unported: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen. | |
| Identifikatoren | 10.5446/57231 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
FOSS4G Argentina 202125 / 237
12
15
16
23
26
36
44
52
53
54
59
72
90
99
114
121
122
123
124
127
129
130
139
154
155
166
203
204
219
223
224
230
00:00
VideokonferenzMetropolitan area networkMathematikBitMultiplikationsoperatorTextur-MappingBenutzerbeteiligungDiagrammBesprechung/Interview
01:01
Open SourceTwitter <Softwareplattform>SoftwareentwicklerMaßstabMAPServerAppletDichte <Stochastik>ClientService providerFunktion <Mathematik>Web ServicesKonfiguration <Informatik>BrowserTouchscreenProgrammbibliothekKontrollstrukturHochdruckSpezialrechnerCoxeter-GruppeMAPBenutzerbeteiligungZentrische StreckungBildgebendes VerfahrenTouchscreenLeistung <Physik>Textur-MappingVerkehrsinformationServerGüte der AnpassungElektronische PublikationZentralisatorMapping <Computergraphik>Inverser LimesMultiplikationsoperatorAssemblerHochdruckFitnessfunktionSpielkonsolePlug inDichte <Stochastik>Dienst <Informatik>Projektive EbeneBrowserProgrammbibliothekWeb-ApplikationAbstandZoomFunktion <Mathematik>VektorraumVerzerrungstensorIndexberechnungProzess <Informatik>NeuroinformatikAppletSkalarproduktMereologieMobiles InternetOffene MengeWeb ServicesEinflussgrößeSpannweite <Stochastik>Delisches ProblemOpen SourceSoftwareentwicklerKomplex <Algebra>TemplateFront-End <Software>E-MailGamecontrollerTabellePunktService providerPRINCE2CAN-BusPixelTwitter <Softwareplattform>Rechter WinkelComputerspielCantor-DiskontinuumServiceorientierte ArchitekturFamilie <Mathematik>ParametersystemTopologieWeb SiteWeb-SeiteInformationsspeicherungLastFortsetzung <Mathematik>RuhmasseForcingYouTubeLesen <Datenverarbeitung>JSONXMLUML
10:10
ProgrammbibliothekSpezialrechnerOrtsoperatorMetrisches SystemMaßstabOffene MengeDichte <Stochastik>Elektronische PublikationFunktion <Mathematik>PunktZeitbereichTaskClientWeb ServicesThreadDemoszene <Programmierung>Open SourceMapping <Computergraphik>Dichte <Stochastik>BrowserKalkülEin-AusgabeProgrammbibliothekGüte der AnpassungSchlussregelE-MailKartesische KoordinatenProxy ServerZentrische StreckungUmwandlungsenthalpieTextur-MappingProjektive EbeneOffene MengeVektorraumProzess <Informatik>HochdruckFunktion <Mathematik>ThreadMultiplikationsoperatorBimodulFramework <Informatik>DämpfungBildgebendes VerfahrenPunktDomain <Netzwerk>MereologieDemoszene <Programmierung>Attributierte GrammatikMeterRechenwerkDienst <Informatik>VerkehrsinformationMailing-ListeClientDifferenteMixed RealityTabelleObjekt <Kategorie>SchnittmengeGemeinsamer SpeicherGrenzschichtablösungEntscheidungstheorieKontextbezogenes SystemComputerunterstützte ÜbersetzungBitVorhersagbarkeitMehrschichten-PerzeptronCASE <Informatik>DatenverwaltungMinkowski-MetrikTypentheorieTopologieRechter WinkelMinimalgradLesen <Datenverarbeitung>StrömungsrichtungGreen-FunktionOpen SourceMaßerweiterungRenderingPhysikalischer EffektKlasse <Mathematik>Formation <Mathematik>Familie <Mathematik>Komplex <Algebra>Design by ContractSchreib-Lese-KopfWechselsprungWort <Informatik>Überlagerung <Mathematik>Physikalisches SystemWorkstation <Musikinstrument>InternetworkingComputeranimation
19:16
MagnettrommelspeicherVorhersagbarkeitSkalarproduktHochdruckElement <Gruppentheorie>QR-CodeDemo <Programm>MereologieMaßerweiterungGenerator <Informatik>BitTextur-MappingKartesische KoordinatenPersonal Area NetworkTouchscreenIndexberechnungCodeInjektivitätResultanteAutomatische HandlungsplanungRechter WinkelDruckverlaufComputersicherheitComputeranimation
20:07
MereologieTextur-MappingKartesische KoordinatenDemo <Programm>Bildgebendes VerfahrenVideokonferenzMaßerweiterungQR-CodeResultanteWeb-SeiteRechter WinkelVerschlingungFlächentheorieFlächeninhalt
20:45
StichprobeInstallation <Informatik>Open SourceWeb-SeiteDemo <Programm>VerschlingungFlächeninhaltWeb-SeiteDemo <Programm>FlächentheorieMultiplikationsoperatorOffene MengeLesezeichen <Internet>Open SourcePhysikalischer EffektTextur-MappingGüte der AnpassungDienst <Informatik>CASE <Informatik>Coxeter-GruppeComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:07
Sorry for being a bit late. There are some unexpected changes here. I will, first of all, welcome everybody to this session in the Humahuaca session room.
00:26
We're going to have a session with a couple of web mapping topics today. The first man out will be Oliver Gouyot. And he has sent us a prerecorded video
00:43
that I'm going to play now. And then there will be time for questions about it afterwards. So here's the video.
01:03
Hello everyone, and welcome to this presentation. We're going to talk about InkMap and about printing maps. So my name is Olivier Gouyot, and I'm a developer at Camp2Camp. This presentation was also prepared by my colleague, Toby Atzkor,
01:22
who is also a developer at Camp2Camp. Printing maps is not that simple. Let's see why. So let's talk about a common scenario that you probably have encountered. You have a web application with an interactive map in it.
01:40
And it's great because it's very easy to navigate inside your map. You can zoom in, zoom out, you can pan, and you can also change what's inside the map and how data looks inside it. And maybe after a while, you'll be happy with how the map looks like. And you'll think, well, I'd like to have this map on paper.
02:02
This is called printing, of course. So things can be harder than expected when printing a map. There is first the issue of scale. When you're on an interactive map in your browser,
02:23
you sometimes have a scale indication, but you often have measure tools. And this allows you to measure distances pretty precisely, right? On the paper map, you don't have these, so you need a very precise and accurate scale indication.
02:40
And also on the same topic, using web Mercator projection, which is very common in web maps, isn't a good fit for paper maps because you may have pretty strong distortions from one part of your map to the other. Also, printed maps need to have more dots
03:02
than the maps on the computer screen. So it means on the same zoom level, you need to have more detail on the paper maps. And this means that you need more data. And more data means that you need more time to download it. There is also something called a DPI
03:22
that you probably have seen or have heard of because it shows up every time you want to print something, anything, even text or any images. So DPI means a dot per range. It's just a measure of how many dots you have in one inch, all right?
03:41
So a high DPI means you have a higher dot density. This is simple, but actually the problem is that computer screens, they have a DPI as well, right? Because their dots are pixels, but we don't know their density. And also we know that when we print something,
04:02
anything, we want to have at least 150 DPI and 300 DPI is a good value for a quality print. Also some devices have double DPIs, for example, mobile devices with retina screens. And when we print something,
04:21
we want to maintain the scale. So the scale on the screen has to be pretty much the same as the scale on the paper map. And this introduces kind of complex computations, which can give you headache. And you know, that's okay, don't be afraid
04:40
because there are solutions for this, of course. Here I've listed three backend solutions that have been around for a long time. The first is Mapfish Print, and you probably have heard of it. It's pretty common. So it's a print server in Java and it's open source
05:00
and it has a very powerful PDF layout engine. So you basically prepare templates with Jasper reports and then Mapfish Print will use them to actually print the map, but it will also print the legend of the map and it can also do attribute tables
05:21
and it can also handle large asynchronous jobs by sending an email when it's done, for example. So it's very powerful. It has some limitations. For example, it won't print vector ties. I think it won't. I'm pretty sure it won't. And QGIS also has, of course, strong PDF output and reports functionalities.
05:43
So these are available in QGIS server. So it means that you can make QGIS a powerful print service because you have access to all these features through the web and you can do Atlas, multi-page layout. So it's very rich,
06:02
but it needs a QGIS file to work on, right? This is QGIS, so it needs a project to work on. The last is the ArcGIS printing services. So in the ArcGIS suite, you have pretty powerful printing services. And what's interesting is also that you have a client-side connector in JavaScript.
06:21
So it's made to make your life easy. It supports custom layouts and it also has limited rendering capabilities. And it's not open source, of course. Okay, so you may think, I don't have a server, all right, and that's fine. I don't have a server either.
06:41
And maybe that's a good thing because servers can be expensive over time, especially if you want a centralized printing service. It can become expensive because you have a lot of requests with a lot of data to store. And you also have a lot of processing power required
07:00
to do all this stuff. Also, when you think of it, a browser, at least a modern browser, can do anything you need to print a map. It has many rendering possibilities. There are several map rendering libraries. It can assemble PDF documents. This is doable. There are several libraries for that.
07:22
A browser, of course, is capable of handling asynchronous jobs because it does all the time. And you can load a large amount of data in the browser. There are no real limit. The only limit is how much data you're willing to download and how much time you have.
07:45
So there are already some client-side printing tools around. I've found a few, and there are probably more that I haven't found. Most of these have limitations, and here I've listed the three more common limitations.
08:03
The first one is the tools that rely on just making a snapshot of the map and transforming it into an image, and then you can print the image. And this is very limited because, for example, so the DPI of your image will be too low. That's for sure, because the map on the screen is usually
08:22
around 70 or 90 DPI. Also, you may have problems with aspects because your map on the screen may not have the aspect that you want when you print the document. So this is a very simple approach. It's pretty cheap, but it's very limited,
08:40
and I think it's not a good fit for what we want to do. There are tools that work with Mapbox as well. So I found a few, and they're very powerful, and they allow you to make very detailed maps. So that's great. The only issue is that Mapbox will only work
09:01
with Web Mercator. And as I said earlier, this is a strong limitation as well. A third problem that I've seen is that many printing tools or libraries are actually tied to a specific library. And here's an example that I think is a good example. This is from a leaflet print plugin
09:24
from GitHub user Aradcliff. And so you can see here that if you want to enable printing on your application, so you need to define a provider, and then you need to define a console that use this provider, and then you need to add the control to your leaflet map.
09:42
And obviously this is not going to work if you're not using leaflets. So these are some of the reasons why InkMap is born. So InkMap, what is InkMap? It's a JavaScript library, okay? And its goal is to print detailed maps at scale.
10:05
So generating maps that will look good on paper. InkMap is built to work in the background, in the background process, and to give you progress report. So it really embraces the asynchronous aspect
10:22
of the whole topic by, you know, its approach is, you know, maybe a print job will take a long time, so that's okay. I'm going to take the time in the background. I'm going to give you progress reports. You can cancel the job. You can start another job. That's fine. InkMap also only requires as input a JSON document.
10:42
So it's specification for what you want in your map. And it's pretty simple. You have to give it the layers, the center and scale of the map, the size of the final image, and the DPI, of course. So you can see here, this is an example of a JSON document that you can give to InkMap, all right?
11:03
So you see here, layers have a type. It can be XYZ for types, for example. It can be WMS, WMTS. There is a size, which is specified in real world units. So it's millimeters in this case. Center is longitude and latitude. The DPI, of course, the scale.
11:21
You can have a scale bar. You can have custom projections, not the row, and attributions. It's very straightforward. So InkMap internally uses open layers for rendering the layers, right? And this is important because this is very technical consideration,
11:42
but it's worth mentioning because open layers has many, many capabilities for rendering stuff, right? It can handle custom projections without issue. It can re-project ties. So you can mix layers with different native projections,
12:00
and that's gonna work out. You also have decluttering. Open layers will do decluttering on vector data. It has many advanced styling possibilities. It will do Mapbox vector ties, no problem, and also Mapbox ties. You can transform them to open layer styles, and that's gonna work.
12:21
And also, since the 6.7 release, it can actually do geotiff and cloud-optimized geotiff, and that's awesome. So of course, all these items in the list are not available in InkMap right now, not all of them, because they haven't been implemented yet in InkMap,
12:42
but they're possible because the rendering engine that InkMap relies on support this. So it's just a matter of writing an API to use them. InkMap is also made to work with any framework and any mapping library.
13:02
And this is really something that I want to emphasize. You should not think that because your application uses Mapbox, for example, then you won't be able to use InkMap. That's not true. You, InkMap doesn't care, right? It's self-contained. So you can be in any framework, any context,
13:22
even maybe other things as JavaScript, or maybe theoretically, this could even work in Node, for example, in the backend, that's theoretical, right? But you know, the context doesn't matter. InkMap is self-contained, it just wants JSON documents, and then it will give you an image.
13:42
And also it's worth mentioning that it relies on off-screen Canvas API. So it's an API that allows rendering stuff on the separate thread. It means it will not impact the experience of the user and the experience of the browser.
14:03
This is not supported in Firefox, but there is a fallback, so it should be pretty seamless. So InkMap has limitations, and what are these? There is a first limitation, is that InkMap will not output a PDF file for you.
14:20
All right, its job is to output an image and it will give you a PNG image, according to what you asked it for. To make a PDF document, you need to use a PDF libraries. And this is really on purpose, because doing all the layout of a PDF document is a completely different topic.
14:42
It's also complex, but it's a really different topic. And we felt that it was really out of scope for InkMap. Besides, you're free to use whatever library you want to do PDF, there are several already. And you know, they're not that hard to use, they're very well documented.
15:00
So it's really something that we let the user decide. Also, InkMap will not output maps with vector data in it. So for example, PDF with separate objects for each feature or SVG, because that would be too hard
15:22
with the current rendering engine, that would need a completely different rendering engine. And, you know, since these maps are supposed to be printed at some point on paper, you know, I don't think it's relevant to have like separate objects in your PDF file, for example, the only thing that you really want
15:41
is a crisp aspect of your features once on the paper. And this you can have with a high DPI value. Another thing that InkMap doesn't do is printing legends. This is not done correctly, but maybe we're considering it and maybe at some point we'll do it. If we consider that it brings value to the library.
16:02
A fourth item is attribute tables and atlas. So this is a pretty advanced functionality. Maybe in the long run we'll do it if there is interest and funding for it. For now, it's really out of scope. Okay, a quick talk about course
16:24
because course is something that you may have heard of, probably actually, and probably also you heard about it because it caused you trouble. So course is short for cross origin resource sharing. It's a big set of rules. It's pretty complex, but the gist of it is
16:43
if you fetching data from another domain, then the data needs to come with course headers in it. Otherwise your browser will block it and you won't be able to use it to print it. So there is really no way around that. You need these headers
17:01
because otherwise your browser will block it. We all know people or projects where there were like proxies that were made to fool the system and add headers along the way. But this is not, I don't think this is a good idea. The course rules are there to protect you. They're here for your own good. Your browser wants your own good.
17:22
So you should instead, if you want to use data from another domain and the data doesn't come with course headers, you need to contact the people there and ask them to do their work and add the headers. Otherwise there's no point in publishing data anyway.
17:42
Okay, so let's close this topic for now. A quick look at how InkMap works behind the scene. I'm not going to spend too much time on this. So I just want to show that InkMap works with two parallel threads. So the main thread will receive the print request and will transmit them to the printed thread.
18:02
And the printed thread will really do all the work and it will generate the layers, fetch the data. When all the layers have been rendered, it will assemble the layers together. And once it's done, it will send back the final image to the main thread. And all the big work and the printing work
18:23
is done in a service worker. Okay, so who made this possible? InkMap was 100% funded by the French Ministry of Ecology. You can see their logo here, it's big. They wanted this because they wanted to,
18:42
they wanted this as part of their Descartes mapping framework, which is a mapping, a very fit to reach mapping framework. It's open source, you can find it at the URL below. So Descartes has had a printing module for a long time that now they wanted to rewrite it from scratch because it was too limited.
19:01
And they went with a client side, a fully client side solution. And that's because they wanted to give a lot of flexibility to the user when defining the layout of the printed document. So you'll see afterwards, there is a demo, a quick demo of how it works in an application.
19:20
This is an application that uses the Descartes framework, right? So here I've opened the print preview. I changed the layout to a portrait aspect. You can see on the preview, the different elements that are going to be printed in the document. And you can see what I'm doing now is I'm panning and zooming in the map
19:42
to select the extent that I want to print. Once I'm happy with the extent, I can actually move the elements around. I can actually choose whether elements will be shown or not. I'm going to move the QR code to be at the top part of the document. I'm going to move the legend a bit.
20:01
And when I'm happy, I'm just going to click on generate. So print. Okay, this is the final result that I got after this demo. So you see here, it's a screenshot of the PDF document, right? So you see the title, you see the QR code exactly like I wanted it to be. And you see the map and the map, it's the extent that I selected
20:22
in the application during the previous video. But you can see that the map is much more detailed. There are much more data because the DPI is high and there is a legion as well. So this is all a very, these are all features that are part of Descartes, right? InkMap was only responsible
20:41
for producing the image that you see. And here, there are some examples that you can try there from the demo app, the demo page of InkMap. I'm going to give you the link afterwards, but I'm just going to skip on this because it's going to be too long otherwise. These are volcano area in France.
21:01
This is the surface of Mars, right? Pretty cool, the landing area of Mars 2020. And this is historical pictures of a town in Southwest France and WMTS service. Okay, so where to get it? You can find the source at camp2camp.inkmap on GitHub.
21:20
It's open source, of course. It's a CCLC license. There is a demo page, which you find the URL here and there's NPM package, which you can use right away. It's at camp2camp.inkmap. Okay, I'm done. Thank you so much for following these presentations. I hope you had a good time. I wish you have a very, very good Phosphorgy.
21:43
Have fun, see you later.