ナビゲーター

マップメーカー登録のプロセス及び、の日本語版を完了いたしました。ようこそグリーンマップへ(日本語でのウェブサイト概要)。 ウェブサイトの翻訳を手伝って頂ける方を募集しています。グリーンマップへコンタクト.

Mapmakers Center

Current Highlight

Preview the Open Green Map

検索

Google Custom Search

Get the Newsletter

オンライン状況

  • 1 Mapmaker
  • ゲストユーザ 304 人

オンラインのユーザ

地球を見つめ、地域を描く!

Create an Online Global GreenMaps View using the Maps List GeoRss Feed

One of the great features of GreenMap.org are the RSS feeds available for most content. One particular feed that's especially useful for online mapmakers is the Maps list feed at http://www.greenmap.org/greenhouse/en/feeds/maps. This feed's XML content includes a special GeoRSS tag that specifies a location using latitude and longitude and looks like this:

<georss:point>40.720461 -73.987083</georss:point>

Having the GeoRSS tag included is useful because many online mapping technologies - including GoogleMaps, Yahoo Maps, and to some extent MS VirtualEarth - support the adding of GeoRss feeds as a map overlay and often this can be done with little or no custom coding. For our needs, we wanted to add a global view of GreenMap projects world-wide to the Lake Washington Watershed GreenMap, but we wanted to do this with a little "pizzazz". So we opted for the very cool 3D FreeEarth API from Poly9 that offers a limited GoogleEarth like experience, but does this without requiring any extra software downloads or installation by the site visitor. I've included their GeoRSS example below:

<!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">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>

<title>FreeEarth Javascript API Example</title>
<script type="text/javascript" src="http://freeearth.poly9.com/api.js"></script>
<script type="text/javascript">

//<![CDATA[

function onMapLoad() {
var rss = new
FE.GeoRSS('http://www.greenmap.org/greenhouse/en/feeds/maps');
this.addOverlay(rss);
this.panTo(new FE.LatLng(40, -100));
}

function load() {
var map = new FE.Map(document.getElementById("map"));
map.onLoad = onMapLoad;
map.load();
}

//]]>
</script>
</head>
<body onload="load()">

<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>

Using this simple javascript example, I was literally able to create an HTML page, edit it by adding the GreenMap maps feed, and view the results online in less than 10 minutes! You can see the results here.

The FreeEarth javascript API also includes several other mapping approaches with examples for creating a custom global map. Apparently even the GeoRSS overlay behavior can be customized further by "overriding the FE.GeoRSS.itemHandler method". I'll be exploring that potential and posting my progress here, so stay tuned.

In the meantime, I hope you find the GreenMap.org's GeoRSS feed feature useful and I look forward to seeing if and how other mapmakers leverage it in their projects.

Happy mapmaking!

Great resource!

Thanks for writing this great tutorial! The Free Earth map is a great tool, and this is a great example of something that can be done using an RSS feed.

Fascinating!

Great to see this, and Kit, thank you for sharing the steps with everyone! We look forward to other creative uses of the RSS, too.

Just to mention, on my Mac, this works more slowly than on Thomas' PC.

FreeEarth on Mac

Thanks Wendy, I'll check that out on my widows version of safari to see if it's a browser thing or an OS thing; cheers