Adding a MapCloud GeoRSS Feed to a Google Map
This tutorial was inspired by the Google Maps Javascript API V3 documentation and the GeoRSS tutorial on the GeoServer website. The following steps will show you how to add MapCloud’s “Museums” GeoRSS service to a Google Map.
- Create an HTML file called HelloMapCloud.html
- Copy and paste the following code into HelloMapCloud.html
——————————————————————————-
<!DOCTYPE html> <html> <head> <meta name=”viewport” content=”initial-scale=1.0, user-scalable=no” /> <meta http-equiv=”content-type” content=”text/html; charset=UTF-8″/> <title>Google Maps JavaScript API v3 Example: KmlLayer GeoRSS</title> <link href=”http://code.google.com/apis/maps/documentation/javascript/examples/default.css” rel=”stylesheet” type=”text/css” /> <script type=”text/javascript” src=”http://maps.google.com/maps/api/js?sensor=false”></script> <script type=”text/javascript”> function initialize() { var myLatlng = new google.maps.LatLng(40.7114,-73.8784); var myOptions = { zoom: 11, center: myLatlng, mapTypeId: google.maps.MapTypeId.ROADMAP } var map = new google.maps.Map(document.getElementById(“map_canvas”), myOptions); var georssLayer = new google.maps.KmlLayer(‘PASTE MAPCLOUD URL HERE‘); georssLayer.setMap(map); } </script> </head> <body onload=”initialize()”> <div id=”map_canvas”></div> </body> </html>——————————————————————————–
- Highlight the “museums” layer on the home page and select the “GeoRSS” link in the bottom pane. This will launch the GeoRSS feed in a new browser window.
- Copy the URL in the browser’s navigation bar (http://ec2-50-16-113-78.compute-1.amazonaws.com:8080/geoserver/wms/reflect?layers=mapcloud:Museums&format=rss)
- Find the text in HelloMapCloud.html that says PASTE MAPCLOUD URL HERE and replace this text with the url copied in the previous step.
- Save HelloMapCloud.html and open it in a web browser.
The resulting map should look similar to the image below.
GeoRSS Map
