awesomemap.tools


awesome

map

tools

consulting and development

maps, GIS and geospatial software

Map-Story about Urban Development

vg-cover-01

It has been a while since I last wrote anything on my blog – for a very good reason: I landed two jobs in the beginning of May, and I have been very busy since then. The biggest of the two jobs was the one I will write about here – VISION GRAM.

The project ended up as a full-blown map-based web app using e.g. LeafletJS, AngularJS, Bootstrap just to mention a few.

The app is live here:
http://anbefaling.visiongram.dk/
The code is in a private repo on GitLab — feel free to request access.

How it started

It all started when my brother’s childhood friend (Thomas) contacted me from the town I grew up in – Gram. He is a self-employed small business owner and is involved in a group called VISION GRAM that makes plans for the future development of the town. Their work was meant to lead to a fund application in the form of a PDF and / or printed document – which was to be submitted to a committee.

The group had contacted some large consultancy companies for help with the document – according to Thomas, their offers were pricey and traditional, so he suggested to try something completely different and had me make an offer on the job in which I mentioned that a dynamic website would be an option in the future. Also, I offered a rather low rate since I was hungry to get some experience as self-employed.

After reviewing my offer, they decided to skip the traditional PDF and go straight for a web app. Great that I got the chance to do what I do best! The process has been very creative – the client gave me hardly any specifications.

Developing the idea

In fact, I started out developing a prototype without having any content or requirements at all. I thought of a PDF or printed document – you flip pages and each page tells a story which progresses in a logical way. With that in mind, I created the illusion of “pages” using the forward and backward buttons you see in the upper left corner of the image below – as you move forward, the map zooms to new places and geometries and it shows related text and images. The first prototype contained only about 5 pages with dummy content.

The people in VISION GRAM loved the idea and asked me keep going + they gave me a lot of content to put in the app. As the amount of content grew, I decided to create a traditional drop-down menu for quicker navigation – and a base layer control for the map.

vg-torvet-01

Eventually the client asked me to add an overview map at the start page. I decided to use clusters for easy overview – see below. There is now three ways of navigating to specific topics in the app – either by “flipping” pages, by using the menu or by clicking objects in the overview map. Oh, and one more – by following a unique URL to each page – such as this:
http://anbefaling.visiongram.dk/#/info/TorvetGramsNyeTorv

Although the original idea of “flipping pages” is not so apparent any-more, I like the result just as much. What do you think?

vg-overview-01