Today I added a CloudMade map to my blog. Now, admittedly it's been a while since I last did any coding or scripting, so it took me a bit to get everything worked out, including a brief Skype IM exchange with Jim Brown, our CTO in CloudMade.
Here are the steps that will help you get a map on your blog:
1. Get an API key from CloudMade here. Simply enter your URL (in my case www.juhachristensen.com) and click the button that reads "Register". You will see the API Key listed as a very long number. In the script below replace the text that reads API KEY with that long number.
2. Decide on a name for your project. I named mine juhablog as you can see below. Replace juhablog with your project name below. Note that there are two places where you need to make that change.
3. Decide on what size map you need. I went for 160 pixels wide by 350 pixels long because that size seems to work well with TypePad, which I use. Alter the pixel sizes in the script below, if necessary.
4. Find the latitude and longitude of where you want your map centered. I simply did this: I went to maps.cloudmade.com and navigated my way to a close up of where I want the map centered. Once you've done that, click the button named "Share" and copy the two numbers for lat (latitude) and lng (longitude). Paste them in to replace the numbers in the script below.
5. Decide on the zoom level. I went for zoom level 8 (the number right after lat and lng in the script below). I experimented a bit with it to show the right zoom level.
6. Decide on which custom map style you want to us. I went to maps.cloudmade.com/editor and found a color on the color slider that I liked. Once you've found a style you like, click "Fullscreen" then click "Share." In the first line you will see the words "styleId=". Copy the number right after that into the script below right after the part where it reads "styleID:". In other words, you will replace the number 8 that I put in there. Style 8 was the style I found fit the style on my blog.
You're now done customizing the script. Next comes the steps you need to put this into your blog. Each blogging tool has a different approach. In TypePad you create a new TypeList, select "Notes" and paste the script into the notes area. You then include the TypeList on your blog wherever you want to place it. Now, again, each blogging tools vendor does this differently, so refer to the help section for advice on placing scripts into your blog.
Here's the script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <head> <title>CloudMade JavaScript API example</title> </head> <body> <div id="juhablog" style="width: 160px; height: 350px"></div> <script type="text/javascript" src="http://tile.cloudmade.com/wml/latest/web-maps-lite.js"></script> <script type="text/javascript"> var cloudmade = new CM.Tiles.CloudMade.Web({key: 'API KEY', styleId: 8 }); var map = new CM.Map('juhablog', cloudmade); map.setCenter(new CM.LatLng(37.467137, -122.252034), 8); map.addControl(new CM.SmallMapControl()) </script> </body> </html>
Looks Great!!!
Posted by: Jim Brown | July 26, 2009 at 03:54 AM