<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>

Print map reports

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p>While researching webmap vector tile styling and rendering I decided to create a webmap printing service called <a href="http://www.maptakeout.com" target="_blank" rel="noopener">MapTakeout</a> that would offer professionally designed maps for home printing, taking advantage of the amazing Mapbox GL JS and Vector Style Specification. I decided to approach the problem by exporting the webmap canvas and its vector data into PDF layouts (using the jsPDF library) and PNG. This involved computations using window DPI, canvas size, map latitude, and tile size.</p>
<p>As for the question "Why print a webmap?", the specific approach leverages the speed and optimised delivery of global vector tiles to create fast printable output, even though webmap renderers are not at the level of a full-fledged GIS as of 2021. (And they may never be - the question is whether they are sufficient for the desired cartography.) Another problem is that Mapbox GL JS does not yet support projections other than Web Mercator, which is bad for printing.</p>
<p>Seeing that the primary aim was to promote my cartography and experiment with automatic map generation, the current website is a good start. I have, however, observed cartographic limitations with Mapbox vector tiles. This made me consider hosting an own geodatabase online focused on visualisation, bringing together different open sources and preprocessing to push towards better cartography. I am also considering ommiting front-end APIs all together and rendering using a cloud GIS solution.</p>
<p>The website itself was created using Next.js and the Material UI framework. No back-end development has been necessary so far. The great geocoding service Photon by Komoot has been used to power the location search bar and the approximate map title in the exported PDF.</p>
</div>

MapTakeout

<div data-v-5fd2d85c="" class="text-body-1 mx-auto">
<p><a href="https://memonomenaperistatika.gr" target="_blank" rel="noopener">Memonomena Peristatika</a> is a website that sprouted as a reaction to a surge of police brutality incidences in Greece in early 2021. It was made to provide a central point of reference for video evidence recorded by victims and bystanders.</p>
<p>I contributed to this Next.js platform on Github by providing a webmap to visualize the long list of reported locations. Because the locations were collected in descriptive form in a spreadsheet, I adapted a Python script for batch geocoding of addresses using the Google Geocoding API by Shane Lynn. I added application-specific configuration globals for relevant spreadsheet column names, filters for the original entries csv (eg. approved), and region bias for geocoding. The script returns the incidences spreadsheet with location coordinates attached.</p>
<p>The map was provided as a react component with a dynamic wrapper to bypass server side rendering. On mount a Leaflet map instance is loaded with the default OpenStreetMap tiles, pulls the enities geojson and creates clustered markers with descriptive popups that link to the relevant video material. The component exposes props for styling its container and manipullating the map object once it is loaded. I added an optional Mapbox Light style which works on input of a valid API-key. The pull-request can be found <a href="https://github.com/balourdos/MemonomenaPeristatika.gr/pull/53" target="_blank" rel="noopener">here</a>.</p>
</div>

Map against violence

<p><span style="font-weight: 400;">Together with tourism specialist Simone Vaccari we are developing a new exploration tool for tourists around Europe.</span></p>
<p><span style="font-weight: 400;">Ptolemy will be a traveler application focused on the cultural, historical and artistic heritage of destinations. By taking advantage of modern web technology and open data, we are aiming to offer a service to people who seek deeper travel experiences.</span></p>
<h2>Go to <a href="https://ptolemy.app" rel="follow noopener" target="_blank">https://ptolemy.app</a> to learn more!</h2>

Nick Lempesis

Maps, GIS and geospatial web

Ptolemy

Go to https://ptolemy.app to learn more!

Similar

Print map reports

MapTakeout

Map against violence