Embedding a custom Google mashup
Problem: You need to display GIS data on a webpage on top of a familiar basemap with basic zoom and pan tools.
There are many ways to do this. The one I will explain today doesn’t require programming skills, specially configured servers or proprietary software. Note: I borrowed heavily from Havard University’s Google Maps tutorial for this entry. They have an excellent free web-based GIS Technical Training Workshop Series.
The basic map they provide is all you really need to get started. The HTML file is structured and commented in such a user-friendly way that you will be able to start editing it to make common customizations to your map almost immediately. No need to wade through the Google Maps API Documentation until you’re ready to try something more complicated.
Go to http://maps.cga.harvard.edu/samples/basic.html and save the html source document (basic.html) to your harddrive. Then open it in a text editor.
The first thing you will probably want to change is the area of the world that the map is showing. To do that, change this bit of code, which is right now centered and zoomed to show the United States.
//Sets the initial map location and zoom level (latitude, longitude) in decimal degree format (zoom level) 1 - 21
gmap.setCenter(new GLatLng(39.10960, -96.5), 4);
For my example, I’m going to make a map of the recent Haiti earthquake. There’s been a lot of that going on recently as geo-Pros have been banding together to speed information to the relief workers.
I’ve changed my center coordinates to the location of the main quake, and upped my zoom so Hispaniola island fills the screen:
gmap.setCenter(new GLatLng(18.44, -72.54), 7);
Now, I’m going to change the starting style to make it a little less busy, since I’m going to be adding things. Uncomment the second line in the code here.
//Sets the initial map to load. Change between PHYSICAL, SATELLITE, HYBRID, NORMAL. Default is NORMAL
//gmap.setMapType(G_PHYSICAL_MAP);
When commented out, it will default to NORMAL. If you want to change that, you will need to delete the // in front and change it to one of the options above. Like so:
gmap.setMapType(G_HYBRID_MAP);
Note: PHYSICAL is an attractive terrain map that is not available in standard google maps. It’s tempting to use it, but it’s still too bright for the things I’m going to add next to show up well.
My map is centered on the location of the quake, but I also want to add a pointer to show exactly where it happened. To do that, insert the following code after the line where you changed the background map style.
//Adds a marker with window information
function createMarker(point,html) {
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var point = new GLatLng(18.44,-72.54);
var marker = createMarker(point,'Magnitude 7.0 Earthquake Jan 12, 2010');
gmap.addOverlay(marker);
//End of add marker code
The editable areas in red are where you can change the coordinates of the marker and the description in the pop-up box.
I will also plot the locations of a couple aftershocks that occurred over a week after the initial event. I got these locations from the USGS Earthquake Search page at http://neic.usgs.gov/neis/epic/epic_circ.html
var point = new GLatLng(18.38,-72.85);
var marker = createMarker(point,'Magnitude 4.9 Aftershock Jan 21, 2010.');
gmap.addOverlay(marker);
var point = new GLatLng(18.48,-72.45);
var marker = createMarker(point,'Magnitude 4.4 Aftershock Jan 22, 2010.');
gmap.addOverlay(marker);
You can continue adding as many points as you like in this fashion.
You will probably want to change your markers so they don’t all look the same. In my case, I would like to distinguish the earthquake from the aftershocks. You can use any of the icons shown on this page, instead of the default marker. To do that, add this code block right before the //Adds a marker with window information block:
//javascript that sets up variables that enable the map to draw a custom icon.
var baseIcon = new GIcon();
baseIcon.iconSize=new GSize(32,32);
baseIcon.shadowSize=new GSize(56,32);
baseIcon.iconAnchor=new GPoint(16,32);
baseIcon.infoWindowAnchor=new GPoint(16,0);
var custom_icon = new GIcon(baseIcon, "http://maps.google.com/mapfiles/kml/pal3/icon28.png", null, "http://maps.google.com/mapfiles/kml/pal3/icon28s.png");
//end of custom icon code
Change the red pal group number and icon number to match the icon you want to use. Then, add the blue text to the end of these lines:
//Adds a marker with window information
function createMarker(point,html,icon) {
var marker = new GMarker(point,icon);
GEvent.addListener(marker, "click", function() {
marker.openInfoWindowHtml(html);
});
return marker;
}
var point = new GLatLng(18.44,-72.54);
var marker = createMarker(point,'Magnitude 7.0 Earthquake Jan 12, 2010.', custom_icon);
gmap.addOverlay(marker);
Note: if you wanted to use two types of icons, you could define (for example) a custom_icon2 above and assign it below, in the same manner.
It is simple to add KML files, which were developed for use with Google Earth, to these maps. Although shapefile is still the most common format, KML is becoming more and more available. My favorite new data search tool, the Geocommons Finder! offers its entire catalog in KML format (along with SHP and CSV).
To add a KML layer that shows the locations of hospitals in Haiti, you’d insert the following code right before the //Close bracket for the function initialize:
//Adds a kml overlay
var geoXml = new GGeoXml("http://finder.geocommons.com/overlays/20906.kml");
gmap.addOverlay(geoXml);
//End of kml overlay code
You can add as many of these as you like, and change the URL to point to whatever file you’d like. Note: If you, like me, have most of your data in other formats, you can use Havard’s Export to KML: Version 2.4 ArcGIS extension (see list on right side of page) before adding it to a mashup.
Here’s my Haiti map with all the changes I described. View the source to see them in context.
Tags: Google Maps API, javascript, kml, mashup, symbol