Buy London
Brief
The brief was simple; build an interactive map of London where users could choose individual squares of London to buy whilst allowing them to upload images onto squares that they had bought. After doing some maths, it was decided that from the initial map of London, there were to be 4 zoom levels, the first 3 offering up a choice of 16 squares to zoom in with, before making a final choice of each square broken up into a 5x5 choice. This roughly translated to around a user purchasing 200 square metres of London, theoretically allowing The Passage to raise ?1 million for their charity.
Challenges
The core challenge of the whole site was under-pinned by a complex Google Maps integration. Working from a set of coordinates for London, that needed to be shown exactly and precisely no-matter the users resolution or device, involved some very heavy lifting of Google's mapping tile code and working through some non-documented aspects of the library.
Once the maths had been done, more and more google map challenges kept on throwing themselves up as I realised the host of individual facets that needed to be taken care off over mobile and desktop, showing a host of map tiles at a host of zoom levels while loading up individual bought square overlays. A well documented z-level CSS and JS library was wrote to deal with all this.
The on-site payment processing element almost seemed like a break after the complex mapping functionality, before we finally had the challenge of allowing user uploads of images, that could be zoomed and scaled to fit squares that the user had bought, and dynamically creating images server side to give users a personalised certificate of ownership. Complex, challenging and thought provoking yes - but one that really pushed me to my limits and made me write some of the best code I've wrote to date.
Build notes
The whole site was to essentially be a 'one-page site' with no redirects or page refreshes, which meant a lot of bespoke JS code and ajax requests that could bring in potentially a lot of data and show it on screen in a very quick and efficient way. After writing the initial set of ajax libraries, page refresh code, and various function calls, I then tied in the google mapping functionality and tiling mechanisms that were to be used on the site.
A complex overlay system was added, where up to 400 individual squares could be shown on a single map view, essentially running two loops to account for rows and columns of a 16 square map tile grid.
I then tied in a bespoke lightbox approach for final stages of mapping and purchasing on desktop, yet showing them as new screens on mobile, before finally adding in the file upload mechanisms that allowed the user to upload photos onto bought squares. The final challenge was server side creation of images and the ability for the user to manipulate their uploaded photos to cover their bought squares.
Technology used
The core technology on this build was of course done with Google Maps, where we delved deep into its libraries and tiling mechanisms. To aid with the complex and heavily interactive javascript, I implemented ES6 classes that ran through Babel to ensure browser compatibility. This was all ran through the pre-processor GULP, minifying any bespoke JS, and allowing the use of SASS for the CSS, whilst also ensuring JS code consistency using jscs and jshint files at the root domain level.
I used the PHP ImageGD library for server side creation of images, along with dynamic placement of text based on font size and length on the said images.
For the payment processing I used Stripe and their JS library, whilst doing all the actual charging of card data with their PHP library.
Buy London
A great fun build that really took me out of my usual build methods and processes. I learnt?a lot about google map tile management and organisation, and the?build?produced something that only taught me a host of new techniques and tools, but also ultimately helps a really great cause.
I love the final site,?a really enjoyable experience and a great fun build.