Announcing a new app built with Laravel – MyMaplist.com

Last week I have released a new app made with Laravel 4 that I have been working on for almost two weeks.

This app is called Mymaplist.com.

If you ever wanted to make a list of places on a map and share that map with somebody, this web application is for you. It allows users to create a map, search for places in the world using Google Maps API and add them to the map as pins, giving a name and description to each pin. Then when the map is ready the users can share it on facebook, twitter or through email interface included on the website. Only the people with the unique link will be able to see the resulting map.

The shared maps are responsive and adapt to mobile devices, they look like this and are managed through an interface I built :


Some technical details: 

The need to create such app came up a few months before my trip to Europe that I am embarking on this summer. I wanted to share with my friends the places that I will be visiting on a month long trip through 6 European countries. So after making some initial sketches of the user interface and making a Laravel prototype to operate with the data I started making changes how the application worked. At first I was planning to use KML format files to store the list of locations but it proved to be not as flexible to create the maps and to edit them. For now all locations, names and descriptions are just stored in the DB so this allows the website to be fast enough in saving the pins and map details.

Technology stack for Mymaplist.com:

  • Laravel as backend implementing RESTful APIs
  • Backbone.JS for interfaces
  • Google Maps API including the new Maps styling (achieved with google.maps.visualRefresh = true;)
  • Avgrund for popups
  • Hand made parallax effect on the login screen (check it out, it’s incredible)

Login screen obsession:

To be honest, I got obsessed with the login screen for this website. The details needed to be perfect. I started with a simple multi layer background using CSS3 background-image property that allows you to have as many backgrounds as you want and fallback to a single image if CSS3 is not supported by the browser. I came up with super simple javascript that tracks the mouse position and changes position of each background layer applying different coefficients on the distance that the backgrounds need to be moved. Then to make the motion look better I found a simple Tweening library called TweetLite that smoothes out the animation. Overall I am pleased with the end result, here is a demo of the login screen interactivity:

Would you like to test out my mapping app and provide some feedback here?

What would you like to see implemented next in this app?

Do you love or hate the parallax effect on the login form? Feel free to comment here!

Upcoming features : different icons for pins, and more map styles.