Playframework, Twitter Bootstrap and Google Maps API

Posted: January 2, 2012 in Play Framework

So, what did you do over the Christmas break? Presents, plenty of family time, kick back a little? I did all that and wrote a little web application as well. I thought I would share a little insight into how I got on.

Background

A while back, I created a publicly shared google map so that anyone interested in Play framework could add themselves to the map. A decent number of people signed up, but it was a pain to maintain. There was no control over who could put what where. For example, someone could delete someone else’s pinpoint, change someone else’s details, or the most common issue, overwrite the play framework description and URL’s. So, I decided to create a web application that would allow the community to have a developer map, but without the issues of a simple shared google map.

The tools

Obviously, I used the Playframework, but additionally I decided to Bootstrap from Twitter. Bootstrap, if you haven’t used it yet, is a CSS base that offers a way to develop clean designs and neat interfaces. There are plenty of blogs already about how to use bootstrap, and the documentation itself is pretty complete, but suffice to say, it made the job of building the UI significantly easier. As I am not a naturally artistic person, Bootstrap has allowed me to build a UI I am proud of, without having to suffer for the cause. It fits in with the “just-works” approach of Play, it makes what should be simple, simple.

Secondly, I used Google Maps to render the maps and the icons on top of the maps. I have used Google Maps before, but decided to check out Bing Maps before making my final choice. Put simply, I found Google Maps to do everything I needed, with relative ease, and found no reason why Bing maps could be a better choice.

Quite simply, Play, Bootstrap and GoogleMaps work amazingly well together.

Deployment

As most people tend to do, I decided to deploy the code onto Heroku. I have used Heroku a few times previously, and have had good experiences with it. I was tempted to try something else, due to the limit on the database size of the free account, but as I already have hosting elsewhere, I decided to just use the database on my paid-for hosting alongside Heroku as the application server. Even with this separation, the response times for the application are excellent. It has made me wonder whether there is a gap in the market for a low-end Database-as-a-Service facility to bridge the gap between the Heroku Postgres offerings.

I did have one issue with the deployment, which you may want to be aware of. My views were all lowercase HTML files, rather than camelCase, which was the case for my controller actions. On my Macbook Pro this made no difference, but as soon as I deployed to Heroku I started getting errors. It took me a while to figure this out, because the error logging wasn’t working ver well. Unfortunately I had already committed my code to the local git repository on my mac, which did not care about case differences, so I had to fight with a few git mv commands to move the files to uppercase equivalents. Other than that, the whole thing has worked out pretty well.

Next Steps

Well, its still in beta, so if you guys like it, and it starts to take off, expect more features to start appearing. What I am hoping for is for the word to spread, so that more and more people add themselves to the maps (why not start with the play framework map). Additionally, I would hope that people will create maps for other technologies that they are interested in.

If you have any thoughts or comments, please feel free to get in touch!

About these ads
Comments
  1. @Brainztorm says:

    Hello Wayne,

    Thanks for the app ! :) it’s a good idea.

    For the database, i use http://xeround.com/ which i’m very pleased with because the hosting is on amazon like heroku so if you create a db in the same “amazon area” than your heroku server, it’s very responsive :)
    Btw don’t use it with the heroku addon … it’s pricy for nothing. I use it free.

    I would be interested to see the code of your app … do you plan to release the source code of this “play map app” ?

    Have a good day.

  2. opensas says:

    Excellent application, I think it has lot’s of potential…

    You can overcome heroku’s db limitations turning to openshift. They provide you with half GB space (git repo + db included) and if you write a polite mail to them they might even increase it (they are very nice guys). Check this tutorial: https://github.com/opensas/play-demo/wiki/Step-12.5—deploy-to-openshift

  3. Gavin says:

    Wow!

    Which version of Play was used? 1 or 2?

    Is the source available?

    TIA

  4. opensas says:

    I added a link to play map on the play framework spanish translation site at http://playdoces.appspot.com/, in the “colegas de tu ciudad” link and in the random top banner… It might be a good idea to talk to play developers to see if it could also be added to the official play framework site

  5. Moveon says:

    Hi Wayne,

    I am doing some application that will use Google Maps, and I’ve choose Play! as framework for this as well. However I can’t find any samples/library to work with Google Maps API with java (not javascript).
    Did you use javascript in your app, or did you use some library for java?

    Thanks, Dejan

    • codemwnci says:

      I used the javascript API. All the Map rendering was done client side, using Javascript in the browser.

      • Moveon says:

        Thank for reply.
        Did you use javascriptRouter to populate javascript with dynamic data from java model?

      • codemwnci says:

        No. The main data that populates javascript, is the markers. So, I generate the javascript for each marker, based on the people who have added themselves to the specific map. So all is generated using groovy, and when the javascript is executed on page load, the markers appear on the map.
        Equally, I could have done this using a JSON get request and then iterating over the JSON collection to populate the markers, but I didn’t see the point in having two requests, when I could generate serverside anyway. A slight page-size overhead, but should appear more responsive to the users than if it was split over two requests.

      • Moveon says:

        Well I cannot find out how to fill the variables that are in javascript within view page. Can you paste snipet of this code?

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s