<p>East European hiking trails are usually colour-coded according to trail importance, e.g. blue for long distance, red for intermediate, yellow for local etc. What's more, each trail usually has a special icon that characterizes it, shown prominently on signs on the ground. Due to popular demand by users at Outdooractive, who were used to regional web maps showing coloured trail lines separately, I was tasked with making a style amendment to our system to accommodate the use case.</p>
<p>I developed a routine using SQL Postgres preprocessing and Mapbox GL-JS layers to take the existing solutions one step further. The original OpenStreetMap hiking layer was cleaned, aggregated and ordered according to colour and trail type properties. Different front-end layers combine to create the final metro-map style, where colours overlap and automatically buffer, improving clarity. The width of the highlights changes according to trail type and rank on each hiking segment.</p>
<p>The icons were treated in a similar aggregating manner, but using Mapbox's late formatted string expression to show icon clusters with or without labels according to zoom level.</p>
<table style="border-collapse: collapse; width: 99.2278%; height: 29px; background-color: #fbeeb8;" cellpadding="10" border="1">
<tbody>
<tr style="height: 12px;">
<td style="width: 99.5553%; height: 12px;"><span style="color: #000000;">DISCLAIMER</span></td>
</tr>
<tr style="height: 17px;">
<td style="width: 99.5553%; height: 17px;"><span style="color: #000000;">This work was based on infrastructure provided by the cartography team at Outdooractive, including icons and basemap.</span></td>
</tr>
</tbody>
</table>

Print like trail visualizations for the web

cartography

Metro-style hiking trails

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>This project responded to the need for the automatic generation of minimaps showing the service coverage of outdooractive's raster topo layer from different providers. It is a process that was carried out manually with any changes to the status quo, with no standardised style or underlying data.</p>
<p>I created a new QGIS project drawing basemap data from suitable custom-processed Natural Earth and OpenStreetMap tables in a shared PostGIS database. The new layer styles made sure to follow the visual identity of our primary hiking map, prioritising information shown, adding graphic features unavailable to webmapping, tuning down the basemap intensity and highlighting the coverage polygons. The polygons come from a new coverage layer with one feature per provider or map type, that serves as the reference layer for a map atlas cycling though the features and generating predesigned print layouts for every feature.</p>
<p>To account for the reduction in scale, because the coverage polygons are very detailed and lead to artifacts when rendered densely, a PostGIS materialized view was created, simplifying, merging and inflating polygons where needed to aid visualisation. This processing happens on the database server automatically whenever anyone changes the base polygon layer. The print layouts and map symbology were designed for three different image sizes to be used in the outdooractive web knowledge pages.</p>
<p>The overall time to refresh all minimaps dropped from days to a matter of minutes (essentially manipulating the polygons and exporting the print atlas layouts) and the results are currently being introduced into the platform.</p>
</div>

Automatic minimaps

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>Visual artist Marina Maniadaki is working on her project <a href="https://www.recreatingtheevidence.co.uk/Lost-Relative-Trail" target="_blank" rel="noopener">Lost Relative Trail</a>, for which she hid ten old family pictures in niches around Venice, and then observed what they meant to the people who found them. She will be registering this experience into a new booklet, and wanted to accompany her descriptions and letters by some hand drawn illustrations of the lost hiding spots in the form of a map.</p>
<p>After settling on the area of interest and map style, we decided that the best format to support the drawing would be fixed backdrops for Marina's lightbox device, providing a geographical base as well as some contextual information from the city. I made four A1 backdrops of the same area out of OpenStreetMap data and Google Satellite Imagery, showing points of interest to the project, a bird's eye view and a blue-red wireframe (both 2D and 3D) to support pencil drawing.</p>
</div>

Lost relative trail

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>I was hired by UK location intelligence geocoding provider <a href="https://addresscloud.com/" target="_blank" rel="noopener">Addresscloud</a> to enhance their platform's print report functionality. The company's web app consists of a map-based panel with a list of selected property information on exposure to different types of risk and related metrics.</p>
<p>I developed a javascript utility that generates a printable A4 PDF report of the current map view and related fetched statistics into the layout requested by the client. The code resizes the map canvas into the calculated print resolution size, and builds the PDF layout using jsPDF client-side, importing data like user email from application state.</p>
<p>The original code was optimised with 200kb reduction in bundle size and the user experience was enhanced, including a buffering modal while the generation works, and a responsive two column consistent visual design in the final print.</p>
</div>

Tourism regions

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>In the process of working to optimise the QGIS cartographic templates over at Outdooractive, I have been developing custom geometry manipulation functions to aid better automatic map labelling. Inflexibility in the QGIS labelling engine when it comes to complex data-dependent symbology and interactions between layers means sometimes the best available solution is to just export all the labels and do the work manually. Looking for alternatives with the aim to minimise post-processing in Illustrator, I tried bypassing the default labelling QGIS engine options. Instead, I opted for resolving difficult label collision situations using Python in the QGIS geometry generator. Here are two example layers where this was used.</p>
<p>In mountain peak symbology, labels and symbols are inseparable and the priority depends on the prominence of mountains. At the same time, when mountains are isolated, they are usually shown irrespective of height. This makes it hard to use both symbology and labelling interdependently, as well as setting more complex priority criteria. This is why I went for a pure symbology approach that creates a buffer (paper units at scale) around each mountain and tests for intersections with surrounding features. On collision, the lower mountain is hidden. This leads to local chains the end at the tallest mountain that remains visible. This function is run at each render, so the prioritisation is completely responsive. Labels are rendered as Font Markers in the layer symbology, so they act concurrently with the mountain peak symbols.</p>
<p>Another interesting case is contours. As of early 2021, QGIS had no capability to label contours in sensible cartographic ladders (like is found in Maplex). This is a fairly complex computational problem because contour features often do not share as much as it looks, and it becomes hard to assosciate labelling lines with them. This is a good use case for using the geometry generator to transform features before they are labelled. My function uses the current map view to create four global focal points. Each contour linestring is cropped to four segments that are closest to these points. This forms candidate labelling positions for each contour that preserve the original linestring orientation and align nicely with each other. When two segments intersect, they merge to avoid double labels. The images show a default QGIS label placement versus the function results (cropped segments in light green). This is not the perfect laddered labelling solution, but it takes a lot of weight off the cartographer's shoulders.</p>
</div>

Computed symbology

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>The insight GIS can unlock for client-targeting companies is important, and in this project I researched available open data sources and statistics to deliver value for the Glasgow branch of a security alarm provider. The desirable outcomes were pinpointed in consultation with the branch manager of the client, and were readjusted at a later stage in the project.</p>
<p>The result was an algorithm to rank statistical areas of Glasgow according to selling potential, taking into account data by the Ordnance Survey open data layers, Open Street Map thematic information, the Scottish Index of Multiple Deprivation and an API for calculating time travel zones for police intervention. Main pillars of the metrics included income, crime, and business location density.</p>
<p>The ranked areas served as backdrop to a map of the city and targetable businesses. Major business groups were found using a clustering algorithm and also ranked by their surrounding area average. The map pinpoints businesses of interest, isolated businesses, and police stations, including their closest postcode. Existing company installations and client were incorporated.</p>
<p>The final product was printed in A0 and was used for day-to-day cold-knocking strategy, and market overview. It received positive feedback for providing branch staff with a clear image of their target area. GIS analysis was carried out in QGIS, with map post-processing in Inkscape.</p>
</div>

Evaluating selling potential using open data

Business strategy map

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>This was a project for a professional running a one-person bakery business delivering her delicious goods to cafes, bakeries and restaurants accross Glasgow on demand. I created a very focused, simple webmap providing an overview of the location of hospitality establishments in her area, as well as her HQ and live location. The map was made using Mapbox GL JS, using custom icons and visibility preferences and was served locally.</p>
</div>

Web map for a baker

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>This A3 storytelling map of Europe was the result of an exercise in cartographic presentation. I created a journalistic style layout backed by statistical data and press research, dealing with a big contemporary topic, the refugee crisis resulting from of the Syrian Civil War. I chose this topic as exemplary of the unique clarity of perspective that maps can bring about in dividing societal issues.</p>
<p>The design was meant as an overview of migration that does not isolate the phenomenon from its socio-political context or present it merely in one level. Migrant routes are not symbolised by aggressive arrows, but shown through refugee camp density and hosted populations. A single family journey case study serves to decouple migration from statistical abstraction.</p>
<p>The map features manual shaded relief to avoid cluttering, blending modes, inset information at points of interest, and a double graduated circle/colour symbology to detect "openess" to refugees. The project was completed using QGIS and Inkscape, on a tight deadline in less than a week.</p>
</div>

A storytelling map focused at the Syrian refugee crisis

Immigration map

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>This project delivered an A3 format topographic map design at 1:100k scale presenting the main points of interest on the island of Arran in Scotland. The map is usable in brochure or poster form and is aimed at daily tourism. Basic cultural and physical layers were manually generalised from the Ordnance Survey Strategi dataset, with some additional information vectorised from the 1:250k OS raster map.</p>
<p>The colour scheme attempts a reference to the winter island landscape, with warm coloured cultural features in contrast. Hypsometric layers desaturate past 500m, distinguishing mountainous areas and giving a purple note, also faintly visible in the real landscape. A light texture has been used in woodland.</p>
<p>A supporting map specification on colours and data sources came with the map. Data manipulation and prioritisation was done in QGIS and postprocessing, layout, icon design, typography and colour balancing were carried out in Inkscape.</p>
</div>

Touristic map design for a Scottish island

Arran topography

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>Cartographic design was a big part of my MSc in Geoinformation Technology &amp; Cartography at the University of Glasgow. Several exercises and small projects on layout, label placement, symbology, generalisation, statistical representation, and many hours of personal experimentation helped me build a cartographic skill set.</p>
</div>

Cartographic process

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">Over a one-week surveying field trip with the University of Bristol, I contributed to a team of three in the creation of a hand drawn hypsometric topographic map of a medium sized area in coastal south Wales, using standard survey equipment.</div>

Topographic survey in Wales

<p>I produced maps for print products of public client organizations around Germany, using the proprietary Outdooractive style and data. This included clipping our data to the ordered map sheets, exporting primary maps series in PDF and postprocessing content, labels and marginalia in Adobe Illustrator. Elevation profiles were also prepared using automated Illustrator actions.&nbsp;</p>
<p>Parallel to the various projects I carried out a complete remake of our master QGIS project file, simplifying the symbology, flattening layers and taking advantage of the full software capabilities. My changes led to a 50% decrease in file size and a much easier to handle style file.</p>
<table style="border-collapse: collapse; width: 99.2278%; height: 29px; background-color: #fbeeb8;" cellpadding="10" border="1">
<tbody>
<tr style="height: 12px;">
<td style="width: 99.5553%; height: 12px;"><span style="color: #000000;">DISCLAIMER</span></td>
</tr>
<tr style="height: 17px;">
<td style="width: 99.5553%; height: 17px;"><span style="color: #000000;">This work was based on infrastructure provided by the cartography team at Outdooractive, including icons and basemap.</span></td>
</tr>
</tbody>
</table>

Nick Lempesis

Maps, GIS and geospatial web

Activity maps

Similar