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?!
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 out there. Let's take a look at 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. Here is how (or see an example for my city):http://tah.openstreetmap.org/MapOf?lat=<lat>&long=<long>&z=<zoom>&w=<width>&h=<height>&skip_attr=1
skip_attr defines if you want to include an OSM attirbution image in your map or not.
The process 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.
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:
This post is open source. Did you spot a mistake? Ideas for improvements? Contribute to this post via Github. Thank you!