How to create a Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS
2021-03-02 i started tracking my current location with OwnTracks and Strapi (How i constantly track my location and display a web-map with all the locations) and created a /map which shows all the locations i have ever been to. Recently i reached one million datasets and unfortunately that means every user had to download about 50MB of location data before the map could be rendered. So i definitely needed a much faster solution and decided to render and serve server side some tiles which will be used to display the locations. In the end i built a tile-server following Manually building a tile server (20.04 LTS) with a custom Mapnik stylesheet.
In this article i want to show you how you can build your own Mapnik stylesheet for displaying any data from PostgreSQL/PostGIS.
The Mapnik stylesheet XML is not very handy but fortunately there are some tools which will help you to create one. After some research i decided to go with TileMill which is an open source map design studio to design maps. It offers a simple UI and (more important) the possibility to export the created map-style as Mapnik stylesheet.
Actually i couldn't get the latest version running so i decided to go with TileMill v0.10.1 which offers anything you will need to create a stylesheet. At https://tilemill-project.github.io/tilemill/docs/win-install/ you can download and install TileMill.
After you have installed TileMill you can create a new project and uncheck 'default data'. Otherwise TileMill will create some kind of basemap with a default style.
Now you will have to add some data to the project. Therefore you click on the layer button and add a new layer.
Switch to the PostGIS tab and fill out ID, Connection, Unique key field, Geometry field and SRS. It's actually pretty straight forward. Keep in mind that TileMill doesn't like large datasets so i would recommend you to set some extent.
In SRS you have to specify the PROJ.4 projection string. If you don't it know a look at https://epsg.io/{epsg-code} where you will replace {epsg-code} with the epsg code of your coordinate system and scroll down to PROJ.4 where you can copy the projection string.
#locations {
[vel >= 0] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
[vel >= 50] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
[vel >= 100] { marker-width:6; marker-fill: #f45; marker-line-color: #813; marker-allow-overlap: true; }
}
With CartoCSS you can also dynamically style your features depending on some attribute values. For more information about CartoCSS have a look at Styling data from TileMill.
When you are happy with your style you can export if as Mapnik-XML and use if for example for your tile-server.
At /map you can see my current stylesheet in 'action'.
Updated 26 January 2022 at 01:00 GMT+1
About The Author
Geospatial Developer
Hi, I'm Max (he/him). I am a geospatial developer, author and cyclist from Rosenheim, Germany.
Have you published a response to this? Send me a webmention by letting me know the URL.
Found no Webmentions yet. Be the first!
Newsletter
Continue Reading
How i constantly track my location and display a web-map with all the locations
Inspired by Aaron Parecki and who he has been tracking his location since 2008 with an iPhone app and a server side tracking API i decided to go for a similar approach. I wanted to track my position constantly with my Android smartphone and use the data to display a map with all locations i have ever been to.Continue reading...
Fetching and storing activities from Garmin Connect with Strapi and visualizing them with NextJS
Step-by-step guide explaining how to fetch data from Garmin Connect, store it in Strapi and visualize it with NextJS and React-Leaflet.Continue reading...
How to create a web-map with OpenLayers
OpenLayers is a JavaScript library which allows you to visualize easily geodata in web applications (Web GIS).Continue reading...