Using IBM Notes data as a source for Google Maps API
Mat Newman May 23 2013 13:12:22
During the past couple of weeks I've been consulting for a customer who required some heavy integration between IBM Notes data and Google Maps. That project is in it's final stages and is close to coming online. What that experience has shown me is how (relatively) simple it is to take source data from a Notes application and present that information using the Google Maps API on the web for public consumption.To begin with, the complete Google Maps API (v3) is available here for your reference.
Using the Google Maps API is fairly straight forward:
1. Create a HTML page,
2. Call the Google Maps source script, and Include a target <div> to inject the Map into,
3. Declare your source data,
4. Write a script to create the map and add elements to the map,
5. Open the page, and present the map.
So here are the steps to put this all together
1. Create a HTML page
For those of us in Notes land, this is one of the easiest things to do, you could XPage it, or go old school and use a Form or Page design element. To keep this really simple - and to demonstrate that this can be done in all versions of Notes back to r6 - I'm going to just use a couple of Page's that are included in the sample database that can be downloaded at the end of this post.
a. Create the Page,
b. Change the Page properties so that it's contents are HTML
c. Insert the following HTML code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Displaying Notes based data on Google Maps</title>
<style>
body{
font: normal 10px Helvetica, Arial sans-serif;
margin: 0;
}
h1 {
font-size: 12px;
background: yellow;
padding: 4px;
}
#mymap {
width: 600px;
height: 600px;
}
</style>
<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
</head>
<body>
<div id="mymap"></div>
<script> refer later in this post (step 4 above) </script>
</body>
</html>
2. Call the Google Maps source script, and Include a target <div> to inject the Map into,
The Script reference for maps.googleapis... is the source script that is required for Google Maps integration.
Note in the above HTML code, the <div> in line 24 has an "id" of "mymap". This is the div element that our map will be injected into.
3. Declare your source data
This is where it gets really interesting; you can create individual Locations (a place on the map, known as a "Marker"), Lines (a line on a map joining one or more locations, known as a "PolyLine") and even Areas (a shape drawn on the map to represent an area, known as a "PolyGon").
You can declare these elements any way you like. In my example, I'm going to create an array of JavaScript Objects, and use the Object's properties as the properties of the google maps elements in my script, eg:
var vMatsPlaces = ({"name":"Notes Induction", "icon":"matnewman.jpeg","posn":[-33.867487,151.20699], "category":"Training", "location":"Sydney, Australia", "date":"Dec 2009"},{"name":"IBM Connect 2013", "icon":"matnewman.jpeg","posn":[28.367481,-81.56059], "category":"Conference, Attendee, Speaker", "location":"Walt Disney World Resort, Florida, USA", "date":"Jan 2013"});
So you can see that the first object in the array has the following properties:
name : IBM Connect 2013
icon : matnewman.jpeg
posn : 28.367481,-81.56059
category : Conference, Attendee, Speaker
location : Orlando, Florida, USA
date : Jan 2013
Again, if you have all of your source data in a Notes view, think how easy it is to write a view column formula that pulls data out of a record and creates an element for the above array for each Notes document, eg a column formula like the following:
"{\"name\":\"" + Subject + "\", \"icon\":\"" + Image + "\",\"posn\":[" + LocationLatLon + "], \"category\":\"" + Categories + "\", \"location\":\"" + Location + "\", \"date\":\"" + StartDate + "\"},"
Where Subject, Image, Categories, LocationLatLon, Location and StartDate are fields contained in each record. Yes, some of those field names should be familiar, they're the same field names in every IBM Notes Calendar entry you create ;-)
So the additional fields in this demonstration that aren't contained within a standard Notes calendar entry are: "Image" which is NOT necessary, and the "LocationLatLon" field, which is absolutely essential to place information on a Google Map!
My source data comes from an Embedded View on the page, which has a single column with the formula above, and a line for each Notes Document that represents a Marker I'm going to place on the map.
4. Write a script to create the map and add elements to the map
The following script contains the data array vMatsPlaces; an initialize function; a loop that iterates through each element in the data array and adds them to the map; and the showDetails function: which adds a pop-up information window on each Marker to display details for the item when clicked:
var map;
var vMatsPlaces = ({"name":"Notes Induction", "icon":"matnewman.jpeg","posn":[-33.867487,151.20699], "category":"Training", "location":"Sydney, Australia", "date":"Dec 2009"},{"name":"IBM Connect 2013", "icon":"matnewman.jpeg","posn":[28.367481,-81.56059], "category":"Conference, Attendee, Speaker", "location":"Walt Disney World Resort, Florida, USA", "date":"Jan 2013"});
function initialize() {
var map_canvas = document.getElementById('mymap');
var map_options = {
center: new google.maps.LatLng(38.822591,66.09375),
zoom: 1,
mapTypeId: google.maps.MapTypeId.TERRAIN
}
var map = new google.maps.Map(map_canvas, map_options)
infoWindow = new google.maps.InfoWindow();
//Add Mat's Places
for (mn in vMatsPlaces) {
var pn = new google.maps.LatLng(vMatsPlaces[mn].posn[0] , vMatsPlaces[mn].posn[1]);
var marker = new google.maps.Marker({
position: pn ,
icon: vMatsPlaces[mn].icon,
dspTitle: vMatsPlaces[mn].name,
dspCategory: vMatsPlaces[mn].category,
dspLocation: vMatsPlaces[mn].location,
dspIndustry: vMatsPlaces[mn].industry,
map: map
});
google.maps.event.addListener( marker, 'click', showDetails);
marker.setMap(map);
};
}
function showDetails (event) {
var dtext = "<h1>" + this.dspTitle + "</h1><p><b>Activity: </b>"+ this.dspCategory +"</p><p><b>Location: </b>"+ this.dspLocation +"</p><p><b>Industry: </b>"+ this.dspIndustry +"</p>";
infoWindow.setContent(dtext);
infoWindow.setPosition(this.position);
infoWindow.open(this.map);
}
google.maps.event.addDomListener(window, 'load', initialize);
5. Open the page and present the map
Yep, that's it. You have a <div> to inject the map into, you've called the Google Maps source, created a data array, initialized the map object, and then looped through the data array (sourced from IBM Notes data) to place those elements on the map.
And the final result, some of the places I've been in the past few years:
You can download the sample project that includes the above examples HERE.
Creating a Google Map using source data from IBM Notes (relatively) easy! Enjoy :-)
Feeds