Skip to content
Branch: master
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
79 lines (57 sloc) 4.55 KB
layout: post
title: Generated maps with Ruby on Rails
date: 2008-04-15 18:14:57
updated: 2010-09-23 21:48:21
<div class="narrow-col">
<p>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?!</p>
<h2>No Google or Yahoo! maps?</h2>
<p>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 API's terms and conditions. Below are some extracts from the <a href="" title="Yahoo! Terms Center">Yahoo! Maps API Terms of Use</a>:</p>
<li>You understand and agree that you must retain the attribution text and links contained within all Yahoo! Maps and Yahoo! Map images without alteration.</li>
<li>Your will not store or allow end users to store map imagery, map data or geocoded location information from the Yahoo! Maps APIs for any future use.</li>
<p>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).</p>
<p>Luckily for us there are other solutions out there. Let's take a look at <a href="">OpenStreetMap</a> for example. OpenStreetMap is a &lsquo;wiki style&rsquo; 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.</p>
<p>This &lsquo;Wikipedia-like&rsquo; 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.</p>
<p>OpenStreetMap has a RESTfull way to build a map image with a given latitude, longitude, zoom level and image size:</p>
<p>The <code>skip_attr</code> defines if you want to include an <abbr title="OpenStreetMap">OSM</abbr> attirbution image in your map or not.</p>
<h2>Start coding</h2>
<p>The process flow:</p>
<li>The current location is updated on the website,</li>
<li>a map of this new location is downloaded from a map server,</li>
<li>the downloaded map image is converted to grayscale and</li>
<li>the generated image is saved to disk.</li>
<figure class="extended-col">
<img src="../../assets/map_flow.gif" alt="Map flow" />
<div class="narrow-col">
<p>We'll use <a href="" title="Graphics Processing for Ruby and Ruby on Rails">RMagick</a> and Ruby on Rails to convert the downloaded image to something else so make sure you have this installed first.</p>
{% highlight ruby %}
# 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 = "{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')
{% endhighlight %}
<p>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:</p>
{% highlight html %}
<img src="/images/map.png" alt="Map" />
{% endhighlight %}
<h2>More resources</h2>
<li><a href="" title="Take Control of Your Maps">Take Control of Your Maps</a> explains how to build you own map stack.</li>
You can’t perform that action at this time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session.