Geo-Infographics created dynamically from PostGIS using ST_AsSVG
This is a modal window.
The media could not be loaded, either because the server or network failed or because the format is not supported.
Formal Metadata
Title |
| |
Title of Series | ||
Number of Parts | 351 | |
Author | ||
License | CC Attribution 3.0 Unported: 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 | 10.5446/69062 (DOI) | |
Publisher | ||
Release Date | ||
Language | ||
Production Year | 2022 |
Content Metadata
Subject Area | ||
Genre | ||
Abstract |
| |
Keywords |
FOSS4G Firenze 2022182 / 351
1
7
13
22
25
31
33
36
39
41
43
44
46
52
53
55
58
59
60
76
80
93
98
104
108
127
128
133
135
141
142
143
150
151
168
173
176
178
190
196
200
201
202
204
211
219
225
226
236
242
251
258
263
270
284
285
292
00:00
Service (economics)Functional (mathematics)Presentation of a groupComputer animation
00:15
AreaWeb browserLibrary (computing)Table (information)InformationSVGSource codeCircleClique-widthFile formatInformationWeb browserState of matterMereologyPixelCoordinate systemMappingGUI widgetLibrary (computing)Functional (mathematics)Web 2.0RectangleAttribute grammarGeometryLevel (video gaming)Process (computing)Web applicationDebuggerAuthorizationWeb pageAdditionStaff (military)Software developerCircleSoftwareCuboidView (database)Front and back endsComputer animation
02:02
Clique-widthCartesian coordinate systemComputer animation
02:53
Source codeInformationTemplate (C++)Projective planeRepository (publishing)Web applicationWeb 2.0Endliche ModelltheorieInterface (computing)DatabaseComputer animation
03:28
View (database)BlogComputer animation
Transcript: English(auto-generated)
00:00
So, my name is Stefan Vant, I work for EoX, based in Vienna, Austria. A very warm welcome to my presentation, GEO Infographics, created dynamically from PostGIS using the function STSSVG. We are building a web app for agriculture,
00:20
and we have all the agricultural parcels in a map widget. The authority staff from Member State of the European Union also collects in situ data, and we wanted to visualize this data to the agricultural parcels. But we thought it would be overwhelming to put all the information in the map widget itself,
00:45
because it can be information that only covers part of the agricultural parcel. So we wanted to display this information in a tabular format, and we found the function STSSVG of PostGIS, to send the geometries to the front-end in SVG format.
01:07
And the advantage is that we don't need any additional mapping library inside the browser, because SVG is natively supported by the browser. There is no extra JavaScript involved.
01:20
I want to shortly show how SVG looks. The Mozilla Developer Network, MDN, says that SVG is to graphics what HTML is to text. And as you can see, it looks very similar to a web page. It's an XML-based format, and the SVG tag has some children, which are the geometries.
01:41
For example, a circle, or a rectangle, or a more complex path, which we use for the geometries that are exported from PostGIS. And one particularity is the view box attribute, which defines which part of the SVG is actually visible. So it defines where to zoom to in the coordinate system.
02:02
I will now show the iterative process it took to get it correct. So this is something that might be, or that will be familiar to you. And on the left side, there is the whole world, and the iterative approach to actually get it on the same canvas.
02:21
And on the right side, I zoomed to Europe. And when you look on the top, there is the min x, which is minus 10, which we can find out easily, because that's the border of Ireland. But then the min y is minus 70. You would assume that the lower left corner is 35,
02:40
because that's the lower border of Europe. But SVG has its y-axis flipped, so you have to go to the upper corner and take the negative, so minus 70. I put all of this together in a GitHub repository to generalize the idea, so that you can go to GitHub, clone the repository,
03:04
and fire up a web app, which is based on a PostGIS database, and a Python web app with SQL model and a fast API interface, and the changer template is very basic, and I wanted to generalize it so that you can go there,
03:22
have a look at it, and maybe use it for your own projects. And I hope it is helpful to you. Thank you for your interest.