Maps galore

I’ve just finished adding mapping features to the VillageRatings site. It turns out that displaying maps is relatively easy, thanks to the wonderful Google Maps API. What is tricky (in the UK at least) is computing the right longitude and latitude values for the things you want to display on the map (in this case villages). Hopefully this will change some time soon when Google starts offering a UK geocoding service. Anyway, it was more of a fight than I’d anticipated, but it’s now up and running.

PeckhamLive

How long could I live in Peckham without creating a Peckham-centric web site? Not very long.

OK, so PeckhamLive is never going to be big. And it’s not the prettiest site to see the light of day. But it could be useful if you happen to live in Peckham and are looking for local information.

Talking of Peckham, I just discovered that it was chosen as Britain’s top “creative hotspot” by communications agency The Fish Can Sing (cute name!) You can read the article here. And that was back in 2005, before mulogy set up here ;-)

And in case you thought Peckham was still the grim urban area of its Only Fools and Horses days, check out the local palm trees.

VillageRatings on Rails

I’ve just re-implemented the VillageRatings site in Rails. The site allows people to read about UK villages and leave their own feedback on them. You can now list villages in order of their ratings for any attribute or overall average rating which wasn’t possible before. And, thanks to Rails, the homepage has been completely overhauled.

During the re-write I also gave the site a new look. It’s an improvement on the previous version, but the navigation is not quite right (not all pages correspond to a tab) and it feels a bit cold. Perhaps a cute animal logo would help. And a bit more time with CSS is in order at some point.

Compared to developing the site first-time-round in raw PHP without any MVC framework, the rewrite in Rails was a breeze; wonderfully quick to do.

Anyway, I’d welcome any comments on the site. And feel free to add reviews of your favourite villages :-)

[Update: the cute animal logo has now been added!]

LondonTwenty

LondonTwenty is designed as a starting page for Londoners. The idea is to provide categorised links to the top twenty (or so) sites for Londoners of which people might not otherwise be aware or of which they might not remember the names. It also has a London-specific search engine.

The next time you’re looking for London information, try it out (especially the search engine – it can be strangely fun) and see what you think.

Sending data from browser to server with javascript and JSON

This is some code I wrote to send data from a javascript object (on a browser) to a Rails application on a server.

[My aim was to use the Google AJAX search API and a Google local search controller to search for and select business locations that I then wanted to store away in a database on my server.]

The approach I used was to encode the object’s data into a string using JSON, stash it inside a hidden form field, then POST the form to the server. The Rails app on the server would then receive this form, grab the hidden form field data out of params[] and decode the JSON string into a hash.

  1. User clicks submit button.
  2. Submit button’s onclick function converts the javascript object data to a string using the toJSONString() function of the json.js library.
  3. The onclick function sets the value of the hidden field to this string.
  4. The browser sends the contents of the form (including the contents of the hidden field) to the server.
  5. The server receives the HTTP POST and sees that it is for controller ‘places’, action ‘add_from_map’ of my Rails app.
  6. The add_from_map action finds the hidden form data in params.
  7. The action parses the data using JSON.parse from the json ruby gem (on Linux use “sudo gem install json” to install the gem).

Let’s step through that in more detail as we look at the code.

First, in the .rhtml file for the page with which my browser constructs the data, I included the json.js file:

<%= javascript_include_tag 'json' %>

I then added a form (note that it should really be written using Rails form helpers – any pointers on how to convert this example would be gratefully received).

<form action=”/place/add_from_map” method=”post”>
<input type=”text” id=”loc-data” name=”loc-data” value=””>
<input type=”submit” id=”save” name=”save” value=”Save” onclick=”SubmitAll()”>
</form>

This form provided:

  • A hidden field called “loc-data”
  • A submit button that calls “SubmitAll()” when clicked.

My page already included placeholders for various Google search objects that ended up populating an object called gLocalSearch.

The data I needed was held in “gLocalSearch.results” (incidentally, these are the results of a Google ‘local search’ executed using a GlocalSearch object as described here).

Here’s the SubmitAll() function:

function SubmitAll() {
document.getElementById(“loc-data”).value = gLocalSearch.results.toJSONString();
return true;
}

When the submit button was pressed, this function used the toJSONString() method added by the json.js library to convert the data to a JSON string.

The return value of “true” resulted in the form being submitted to the server.

On the server, I needed to include the json code in the “place” controller:

require ‘json’

The “add_from_map” action extracted the JSON string and decoded it, putting the result into an easily-accessible hash:

def add_from_map
@place_rows = JSON.parse(params[:loc-data])

for place_row in @place_rows
@place = Place.new(:name => place_row[‘titleNoFormatting’])
end
end

(Ignore the nonsensical loop here. Just notice how you can use [ ] to access a field in the hash that is created by JSON.parse.)

That’s about it. As it happens, the Google map search tool I was planning to use doesn’t currently support UK searches so my little application will have to wait. Or maybe I’ll do a French version :-)

Happy mapping!