Generated maps with Ruby on Rails

It’s all about the map in this sites header today. The header background shows a dynamically generated map of the coordinates shown in the right top corner, or my last recorded place. I can select my current location (latitude and longitude) and the header background map is updated accordingly. So how exactly does this work?!

No Google or Yahoo! maps?

I integrated Yahoo! Maps first. The Yahoo! Maps look nice, the API is easy to use and well documented but the problem is that you are only allowed to play with these maps within limits placed on you by the APIs terms and conditions. Below are some extracts from the Yahoo! Maps API Terms of Use:

I would break these terms as I convert the original image to a grayscale version and store the map on the server for performance reasons so the Yahoo! Maps are out of the question. Google or Yahoo! Maps are great for out of the box functionalities but if you want more freedom you will probably have to look elsewhere (or pay for licenses if possible).


Luckily for us there are other solutions: OpenStreetMap for example. OpenStreetMap is a “wiki style” editable map, made by people like you and me. The content is available under the Creative Commons Attribution-ShareAlike 2.0 license which means anyone can use (and remix) the data as long as you share it with a similar license.

This ‘Wikipedia-like’ approach has some drawbacks as well: the map is incomplete and the data is not 100% reliable. On the other side you can correct or complete the map where needed. This may or may not be important for your project but I only needed a nice background image for this website so a general overview of the area is more than sufficient.

OpenStreetMap has a RESTfull way to build a map image with a given latitude, longitude, zoom level and image size:<lat>&long=<long>&z=<zoom>&w=<width>&h=<height>&skip_attr=1

The skip_attr defines if you want to include an OSM attirbution image in your map or not.

Start coding

The process flow:

  1. The current location is updated on the website,
  2. a map of this new location is downloaded from a map server,
  3. the downloaded map image is converted to grayscale and
  4. the generated image is saved to disk.
Map flow

We’ll use RMagick and Ruby on Rails to convert the downloaded image to something else so make sure you have this installed first.

  # Writes an image with a map of the location, the zoom ranges from 4 to 17
  require 'RMagick'
  require 'open-uri'
  def map(latitude, longitude, width = 500, height = 500, zoom = 7)
    map_request_url = ""
    map_request_url += "lat=#{latitude}&amp;long=#{longitude}&amp;z=#{zoom}&amp;w=#{width}&amp;h=#{height}"
    uri = URI.parse(map_request_url)
    map =
    map = map.quantize(256, Magick::GRAYColorspace)
    map.write(RAILS_ROOT + '/public/images/map.png')

That’s it, this method downloads and converts the image and saves it in your images folder so from now on you can use this image in your website:

  <img src="/images/map.png" alt="Map" />

More resources

This post is open source. Did you spot a mistake? Ideas for improvements? Contribute to this post via Github. Thank you!