Without further ado, here's instructions on 1) how add human-readable geotagging and GeoRSS to your blog and 2) consume that RSS feed to display on a map interface in your blog. This will require you to edit your blog templates, so if you're afraid you might hose your blog (I make no guarantees about my code) try it out on a test blog first. Some basic understanding of HTML will help, although you basically just have to paste the right code in the right places.
I'm using Yahoo! Maps and nonstandard RSS elements because Yahoo! allows me to enter human-readable locations. The objective here was to come up with a very simple-to-implement and easy-to-use solution. I could've gone with Google Maps and technically valid "GeoRSS" (as defined here: http://georss.org/) but the solution would be a bit more involved. The purist in me says I should've gone in that direction, but my final solution worked and it's easy, so screw it.
To create a Yahoo! Maps-compatible GeoRSS feed:
(anything in code that's bolded indicates something you might want to customize)
1. Create a new Custom Field
- Navigate to: Preferences > Custom Fields > New Field
- Choose options:
- System Object: Entry
- Type: Single-Line Text
- Template Tag: location
- Click 'Save Changes'
2. Enable the new Custom Field
- Navigate to: Preferences > Entry > Default Editor Fields
- Click the checkbox to enable your new field ('location').
- Click 'Save Changes'
3. Modify your RSS template to include location information from your new field
- Navigate to: Design > Templates > RSS
- Paste this right before the </item> tag:
<ymaps:Address><mt:entrydatalocation></ymaps:Address>
NOTE: <mt:entrydatalocation> is based on whatever you named your custom field. It could be <mt:entrydatasomethingelse>..
4. Add location information to your posts
- Create a new blog entries or edit an old one.
- There should be a new location field under your body field. Anything that Yahoo! Maps accepts as an address will work here. Even incomplete or poorly formed address usually work. For instance: "penn state university park"
- Submit your entry.
To add a Yahoo! Map to your blog to consume GeoRSS feed:
1. Edit your Header template to initialize your Yahoo! Map
- Navigate to: Design > Templates > Header
- Paste this before the </head> tag:
<script type="text/javascript" src="http://api.maps.yahoo.com/ajaxymap?v=3.8&appid=cjgfW3LV34EVWbeNK.zXpLqYBL7Lkt.BwDBLkZmYoCqdFnWAVLb0L3GvJJGL.yefCyi4">
</script>- Click 'Save Changes'
NOTE: The "appid" is something I requested from Yahoo!. I believe you can just use mine, since we're all at PSU and the usage is the same, but if you're having problems, you may want to request your own appid at: http://developer.yahoo.com/
2. Post map embed code in a blog/page
- Create a new blog entry or page
- If you're using the Rich Text editor, click on the '<A>' button to go to HTML view, and paste in this code where you want the map to show up (edit width and height as you need to):
<div style="width: 573px; height: 400px;" id="geomap"></div>
- ..and paste in this (edit the "YGeoRSS" to be the URL of your own blog, and drawZoomandCenter to center and zoom by default on whatever location and zoom-level you want):
<script type="text/javascript" language="JavaScript">
var map = new YMap(document.getElementById('geomap'));
map.addPanControl();
map.addZoomShort();
map.drawZoomAndCenter("University Park, PA",4);
function doStart(eventObj) {
var defaultEventObject = eventObj;
}
function doEnd(eventObj) {
var defaultEventObject = eventObj;
map.smoothMoveByXY(new YCoordPoint(10,50));
}
YEvent.Capture(map,EventsList.onStartGeoRSS, function(eventObj) { doStart(eventObj); });
YEvent.Capture(map,EventsList.onEndGeoRSS, function(eventObj) { doEnd(eventObj); });
map.addOverlay(new YGeoRSS('http://www.personal.psu.edu/cxm470/blogs/educational_technology/georss.xml'));
</script></div>
- Save and Publish your entry.
- You should see a map and marks for your geotagged blog posts.
Some other tidbits:
- You may want to go to Preferences > Publishing and change "Excerpt Length" to something around 100. This will prevent very long blog posts from trying to display in their entirety in your map bubbles.
- If you're afraid that this will render your RSS feed incompatible with some feed readers (it shouldn't) you can duplicate your RSS template and make your edits there, so your site has a separate geo-enabled feed. As you can see, my feed is called 'georss.xml'.
Please let me know if any part of my directions don't work...
Enjoy!
You might want to add that these directions are for the Professional Blog, not classic.