Artwork front end - Map

Artwork front end - Map locations

ABOVE: In app map at max zoom showing placement of artworks

ABOVE: Build example demonstrating auto translation

ABOVE: Build example demonstrating auto translation

ABOVE: Build example demonstrating auto translation

This code snippet is intended to be viewed on chrome browser, with optimal viewing on an andriod device.This code is designed to work ONLY on mobile devices and tablets with geolocation enabled.

Rationale

This is the front end portion of the final artwork, users are presented with a map, which zooms to allow participants to view the location of the closest venue of the artwork. Once the participant has reached a location, this map is then disabled (set to visibility: none) and the walking portion of the artwork is enabled. The map takes advantage of google translation which enables the work to be viewed anywhere in the world without the need to specific build versions for each language.

List of assets:

Theory of the code

To realise this aspect of the art project a rebuild of the original geolocation app  used in Masters of Interactive Media was required. Auto population of the map locations was added along with checking of gps point collision. This method is the same relative position code method used for collision detection in most modern games. (tested on andriod and windows devices only on chrome browser). An important aspect of this code was for it to utilise googles auto translation as this is the only aspect of the artwork that uses text.

The code for this project was written for mobile web based platforms. Code languages used for this application were HTML, javascript, css and jquery. NOTE: As of 2017 security limitations to accessing gelocation of devices was established. Purchase of an SSL certificate for the host server were required.

Build versions: excluding base code development

NOTE: Code is reference in individual files and annotated throughout the code files. Please download and refer to individual files for more detail. This code is designed to work ONLY on mobile devices and tablets with gelocation. This project required direct editing on the server as it is a mobile web application, this process of debugging is difficult as developer tools can not be used for errors.

1. Creation of a map that uses satelite feed, default zoom is set to maximum.

2. The 20 map locations were added to an array which is then used to populate the maps markers

3.Auto updater for userlocation was added to the map

4.Collision detection based on userlocation and map markers with a 100m bound box was added

5.The map now centers to the users location

6. Zoom is based on the distance of the user to the nearest location to allow for both markers to be visible.