Project Details:

Ruby on Rails app that utilizes the Google Static Image Map API. Users can draw on maps with JavaScript, then add details about their drawings, and save the information as well as an image of their map into the database. The biggest hurdle I had for this project was figuring out how to convert the dynamic drawing on the HTML5 canvas, along with the Google map background, to something that could be stored in the database. Initially I added a file upload with CarrierWave and AWS, although that required the user to save their digital drawing and then upload it to the app, which seemed like a clunky experience. My solution was encoding the dynamic image and populating a hidden input field with the value of the encoded image, so that on submitting a form to create a new drawing, the image data could still be retained.

View the project

Technology Used:

  • Ruby on Rails
  • JavaScript
  • jQuery
  • HTML5 Canvas
  • psql
  • Heroku