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

Geo-Infographics created dynamically from PostGIS using ST_AsSVG

00:00

Formal Metadata

Title
Geo-Infographics created dynamically from PostGIS using ST_AsSVG
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
Publisher
Release Date
Language
Production Year2022

Content Metadata

Subject Area
Genre
Abstract
## The Problem Let's assume you have an attribute-focused table, but you would still like to see a thumbnail of the associated geometry. Or more generally: How to dynamically render polygon geometries in a HTML page without any mapping library. *Enter ST_AsSVG (PostGIS function)!* ## Context Last year I showed how we display geo data in our webapps using vector tiles (ST_AsMVT) (YouTube: watch?v=s_dWBOiuFiY&t=139s). This year I will explain how we apply ST_AsSVG of PostGIS on database records to *create beautiful geo-infographics* in pure HTML. The result is a geo-visualization similar to this one: Comparison maps of Australian Cities (Size, Population) (imgur.com/OQClpbc). The trickiest part will be the sizing of the SVG objects (viewport vs. viewBox (webdesign.tutsplus.com/tutorials/svg-viewport-and-viewbox-for-beginners--cms-30844)). ## Content The talk will contain some theory on SVG. It will then show basic setups for FastAPI, SQLModel, Jinja2 and, of course, PostGIS. All code will be made available via GitHub. ## Aim After the talk you will master sizing of SVG and be capable of creating your own dynamic geo-infographics directly from data stored in your PostGIS database.
Keywords
202
Thumbnail
1:16:05
226
242
Service (economics)Functional (mathematics)Presentation of a groupComputer animation
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
Clique-widthCartesian coordinate systemComputer animation
Source codeInformationTemplate (C++)Projective planeRepository (publishing)Web applicationWeb 2.0Endliche ModelltheorieInterface (computing)DatabaseComputer animation
View (database)BlogComputer animation
Transcript: English(auto-generated)
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,
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,
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.
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.
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.
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.
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.
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,
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,
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,
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.