Web 2.0 & Domino

TIPS - Warning before navigate away from a web form without save

2007-04-21T10:00:00.000+02:00

My users often click on a link or change page when they fill a form without save it before. Then, they lose all the informations.

With Lotus Notes client they have to confirm to exit the page. You can do the same thing on Web.

When to display the warning message ?
I prefer display the message only if the user have change the form. If you display the warning every time, the user will finish to ignore it. To detect if the form has been changed, I use an hidden field who his value is changed when one field of the form is changed:

<input type="hidden" name="isChanged" id="isChanged" value="0">

To modifiy the value of this field I use javascript function. You can declare this function on the header of your form (or subform) or in Javascript library. This function can looks like that :

function formChange(){
  document.forms[0].isChanged.value="1";
}

You just have to add a call to this function on the "onChange" event of the fields you want to control.
How to detect the user navigate away ?
To detect if a user navigate away the web page, you have to add the event onBeforeUnload. To do that, add to the header of our Notes form :

window.onbeforeunload = confirmExit;

Where confirmExit is a Javascript function who control if it's necessary to display the warning and where you can customize the message.

function confirmExit() {
  if(document.forms[0].isChanged.value=='1') 
    return "You've not save the form. Are you sure ?";
}

The first condition verify the hidden field of control to know if the form has been changed.

LINK - Example of website on Lotus Domino who used Lightbox and Smooth Slideshow

2006-10-25T21:23:00.000+02:00

After a long silence, I come back slowly with the presentation of a Lotus Domino Web Site who used some technics prensented in this blog.

The new web site of this company specialized on instrumentation integer litghtbox and Smooth Slideshow : Sol Data web site

TIPS - How to force font style of Lotus Notes rich text items on Web

2006-09-14T22:15:00.000+02:00

I hate web site where text font changes between pages. It's possible to control graphical chart on public web sites but it's impossible with Intranet applications. If we define default font on rich text field, the users can change it. They just have to copy/paste Word document or Web Page in rich text to lose default font property.

Fortunately, Lotus Domino uses "old" html tag to change font properties : <font>. I don't use any more this font since CSS style sheet. If you redefine the properties of this tag in a CSS style sheet, you can bypass text font arguments passed by Lotus Domino and then force your text font properties for all the informations in rich text field.

For example if I define style :

<style>
font {
font-family : tahoma, arial, helvetica, sans-serif;
font-size : 1em;
}
</style>

All the content of the rich text will be display in tahoma 1em. The user can add bold or italic but if he defines bigger size font, the content of the text will be display on Web in 1em, no more.

With this method you force font properties of all <font> tag of your document. If you want to restrict the effect to only one rich text field only, you just have to embedded it in div with specific class name :

<div class="mybody">
Richtext field
</div>

Then style sheet will look like this:

<style>
#mybody font {
font-family : georgia, "Times New Roman", Times, Roman, serif;
font-size : 12px;
}
</style>

GOOGLE API - Another tips with Google Maps

2006-09-14T21:54:00.000+02:00

I've discovered two new functions in google maps api release 2 : Geographical localisation from postal address and multitab info box.

Geographical localisation with Google API

In one of my first entries in this blog I've describe a method to search geographical localisation from postal address. This method had two problems for me :

I must separate each element of my postal address (street, town and country)
I'm not sure this service will be available during long time

Google Maps API offers the solution with Geocoder.

One of the most simple solution to extract longitude and latitude is to use it thru http call like this :

http://maps.google.com/maps/geo?q=adresse+recherchee&output=csv&key=abcdefg

Where :

q= : postal address to search. For example : waterloo+bridge+london
output= : file format to send response. You can choose xml, kml, json or csv. The csv format is the most simple.
key= : your Google Maps API key

CSV format response send four values : code status (200 if all is good), zoom level, latitude and logitude.

Multi tabs info box

If you want to display information box with multiple tabs, you just have to replace the call marker.openInfoWindowHtml(bulle);, like I've described it in a precedent article, by marker.openInfoWindowTabsHtml(infoTabs); where infoTabs is defined like this :

var infoTabs = [
new GInfoWindowTab("Tab1 title", "Content of tab 1"),
new GInfoWindowTab("Tab2 title", "Content of tab 2")
];

AJAX - Photo library (2nd Part) : How to zoom on a photo

2006-09-10T22:18:00.000+02:00

A new Javascript Library is used more and more on Web 2.0 sites : Lightbox. This AJAX library, based on prototype.js and scriptaculous, display effect to zoom from a thumbnail. For example, you can find this functionality on Zoomr.

How to install the javascript library

to download the javascript library on http://www.huddletogether.com/projects/lightbox2/
to uncompress the zip file
to add protoype.js, scriptaculous.js, effect.js, lightbox.js and lightbox.css files in shared resources library of your Lotus Notes Database
to add close.gif, loading.gif, blank.gif in shared pictures resources of your Lotus Notes database. You can added this other pictures too but it's not necessary in this example.

How to use LightBox Javascript library with Lotus Notes
The first step is to declare javascript files on your web page. This web page can be a form or Lotus Notes page. The HTML header content looks like :

"<link rel=\"stylesheet\"
type=\"text/css\" href=\"lightbox.css\"
media=\"screen\" title=\"Normal\" />
<script src="\" type="\">
</script>
<script src="\" type="\">
</script>
<script src="\" type="\">
</script>"

Be careful with the path of your javascript files.

Add an Onload event :

initLightbox();

Your form or page is ready to use lightbox. To add photo in your web page you have to add in the content of your web page :

<a href="path_of_the_big_picture" rel="lightbox">
<img src="path_of_the_thumbnail_picture" />
</a>

Download an example
You can dowload an Lotus Notes Database who show how to implement lightbox library with Domino. This application is very simple and in english.

download the database

AJAX - Photo library (1st Part) : How to display a slideshow without Flash

2006-09-10T21:39:00.000+02:00

After summer holiday, it's time to show photos to all the family. This article and the next present how to use AJAX libraries to add effects on photo without using Flash. This first part show how to integer a slideshow, the next how to zoom on photo with the actual very famous library lightbox.

Jonathan Shemoul's Smooth SlideShow
The Jonathan Shemoul's Smooth Slideshow javascript library allow to display animated splash screen or header to your web Site. This library uses protoype.js and moo.fx. The total file size of this library (without pictures) is around 21,6 kB. To compare with Flash solution, dewsliders (famous french flash picture slideshow) use 30,4 kB. I don't want to compare this two solutions because I don't know Flash. The choice of this javascript library is motivated by the target of this blog, how to implement AJAX solution with Lotus Domino.

Installation of the library
To use the library you must first download the files. Extract the files from the zip file. Add the files in shared resources of your database :

moo.fx.js
moo.fx.pack.js
protoype.lite.js
showcase.slideshow.js
timed.slideshow.js
jd.slideshow.css

How to use the library
To use the library you must :

to declare javascript library ans css style sheet in the header of your web page
to declare the pictures files to display in the slideshow
to custommize the size of the slideshow
to define where to display the slideshow in your web page

The pictures to display is define thru a javascript array like this :

mySlideData[countArticle++] = new Array(
'picture1.jpg',
'linkedwebpage1.html',
'Item 1 Title',
'Item 1 Description'
);

How to use it in Lotus Notes database
To manage easily the photo to display in my slideshow, I use a form to record each pictures. This form have the fields :

Title : text field
Link : text field
Description : text field
Photo : rich-text field

I define a view to display this documents. This view will be called by the javascript to define the array. Then I specify the formula of my second column like this :

"mySlideData[countArticle++] = new Array('"
+ "0/" + @Text(@DocumentUniqueID) + "/$file/"
+ @subset(@attachmentnames; 1) + "', '"
+ Lien + "', '"
+ Titre + "', '"
+ Description + "');"

The first column of my view is defined with the sort key I want to use. In my example the title of the document. Don't forgotto specify this column as sorted to use @dbcolumn.

To created my Web page who displayed the SlideShow I use a Lotus Notes Page. You can use a form too if you want.

In the HTML header content we must specify the path to javascript files and css stylesheet file, add an OnLoad event to load the library and add the picture array :

Photos:= @DbColumn("":"";"";"Photos" 1);
@If(@IsError(val); "" ;
"<script src="\" type="\"></script>
<script src="\" type="\"></script>
<script src="\" type="\"></script>
<script src="\" type="\"></script>
<link rel=\"stylesheet\" href=\"jd.slideshow.css\"
type=\"text/css\" media=\"screen\" />

<script type="\">
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func; }
else {
window.onload = function() {
oldonload();
func();
}
}
}
function startSlideshow() {
initSlideShow($('mySlideshow'), mySlideData);
}

countArticle = 0;
var mySlideData = new Array();"
+ @Implode(Photos) +
"addLoadEvent(startSlideshow); </script>
<style>
#mySlideshow {
width: 400px !important;
height: 200px !important;
}
</style>");

With "Photo" the name of view who displayed photos.

Now, you just have to add in your web page :

<div id="mySlideshow"></div>

to define where you want to display the slideshow.

You can display an example with my photos from Britain.

AJAX - Tag Clouds

2006-09-04T20:25:00.000+02:00

I searched how to implement a tag cloud on my Lotus Notes application for web and I've the surprise to find quickly 3 solutions. All this solution implemented three differents way. I find them very interresting because they reproduced the three standard new ways to develop Lotus Notes Application on Web; Formula & Javascript, LotusScript and LotusScript with DXL.

What is a tag cloud ?

A tag cloud is a representation of keywords defined by users who are displayed with a font size proportional at his importance. The most common criteria to define importance is the number of occurence of this tag in all the documents.

You can find tag cloud in all the important web 2.0 application like delicious, Flickr or Technorati.

If I want to use tag use, it's to replace the categorized view. I find categorization too hard to manage in web application.

Three ways to implement a tag cloud in Lotus Notes for the Web

First Way : Formula & Javascript
Ferdy Christant suggest to create a javascript array thru Notes view with little formula. The tag cloud is generated by Javascript on browser.

The principal advantage is to not overload the server. Only a view is called by the users.

Unfortunately this solution is not perfect

The browser must support Javascript. If all the modern browser allow to run Javascript code, the user can deactivate this option. Second thing, if the Javascript can be executed, we must be careful to not overload the browser with too much data.
One of the advantages of tag cloud for webmaster is for indexation on search engine. For search bots, a tag cloud is a library of links with smart keywords, the tag, to index the content of the link. Today, the javascript isn't running by this bots. Then, the tag cloud is ignore by search engine.
You can't use this method to display tag cloud on Lotus Notes Client

Second way : Traditional LotusScript
Thomas Adrian uses a LotusScript agent to build the TagCloud. The tag cloud is computed in real time from an agent who is based on NotesView Navigator and print function. The server must run this agent for every call to display the tag cloud. The advantage is that the tag cloud is coded in HTML format, then the search bot can index it. The disavantage of that solution is the avantage of the first solution and inverse.

If I had to choose one these two solution, I will prefer first for an Intranet and second for Internet. In an intranet application I can control browsers versions, I don't need to index my tag cloud and the most important is to preserve the CPU.

Third way : LotusScript with DXL
Christian Mueller purpose a variation of the second solution with DXL. He computes the tag cloud with the same method than Thomas Adrian but doesn't display the result directly to the browser. He saves the result in a new form with DXL. We just need to execute the agent when a document is created, updated or deleted, when the tag cloud is modified.

With this solution the server has just to open a form to display the tag cloud in HTML format. Another advantage is it's possible to display the tag cloud on Lotus Notes Client.

Is the ideal solution ? It's the best solution for my first constraints. But there are two new problems :

In french version of this blog, Yogi has remarked it's not possible to manage documents with reader field,
It's difficult today to find developper who really knows DXL to integer and maintain this type of application.

AJAX - Autocompletion

2006-08-29T19:48:00.000+02:00

This article is an abstract of three articles in french section. If you read NSFTools blog, you've had a first solution to implement autocompletion with scriptaculous.

First Step : Installation of javascript libraries
Like Julian, I use javascript library Scriptaculous. Scriptaculous is based on another Javascript library, prototype.js. You can download all this libraries on scriptaculous web site. Unzip the file in your hard disk and add all the files in shared resources of your Lotus Notes Database. You can create a new database to add this javascript files too. This new database can be used by all your application who need this javascript libraries and it will be easier to update the javascript files. The advantage of files resources is to be accessible from Windows explorer with WebDAV. I'll write an article about this new Domino service.

Second Step : Creation of the form
We just need one editable field.

create new form
add editable text field
in the last tab of the property of the field add an id name. For example : autocomplete

add javascript code as HTML relay just after your field :

<div id="autocomplete_choices" class="autocomplete"></div>
<script language="javascript" charset="UTF-8" >
new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete'});
</script>

add in your HTML Head content the declaration of the javascript libraries prototype.js and scriptaculous and the stylesheet to display list :

"<script src=\"prototype.js\" type=\"text/javascript\"></script>
<script src=\"effects.js\" type=\"text/javascript\"></script>
<script src=\"dragdrop.js\" type=\"text/javascript\"></script>
<script src=\"controls.js\" type=\"text/javascript\"></script>
<style>
div.autocomplete {
font-size:10px;
font-family : tahoma, arial, helvetica, sans-serif;
width: 350px;
background: #fff;
}
div.autocomplete ul {
border:1px solid #888;
margin:0;
padding:0;
width:100%;
list-style-type:none;
}
div.autocomplete ul li.selected {background-color: #ffb;}
div.autocomplete ul li {
margin:0;
padding:3px;
cursor:pointer;
}
</style>"

Be careful, perhaps you'll need to change the path of the javascript libraries.
The form is ready to use.

Third Step : Search view
In my example, the search view have only one sorted column. This column only display the values to show in autocompletion list.

Last Step : Search page
To search all the words who begin by the letters and send the response to Ajax, I use a Notes Page. It's possible to use form or agent too. The result must look like :
<ul>
<li>1st word</li>
...
</ul>

Create new page named "search"
Select "Type of content : HTML" in the second tab of the page properties

Add new computed field with formula :

val := @DbLookup("":"nocache"; "";"dbautocomplete"; @UrlQueryString("autocomplete"); 1; [PartialMatch] );
@If(@IsError(val); ""; "<ul>" + @Implode("<li>" + val + "</li>") + "</ul>");

It's finish ! You can test.

BONUS
You can add two interresting options to the declaration of the autocomplete class

1. Start search after the nth characters
If you don't want to start autocomplete search from the first letter, you can add a parameter to specify after how many letter you want to begin.
Add the parameter "minChars" like this :

new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete', minChars: 2});

In this example the search will start after the second characters

2. Manage multivalues field
You can specify a separator values too. When the user will type this separator the autocompleter will start a new search with only the charaters typed after.
Add the parameter "tokens" like this :

new Ajax.Autocompleter("autocomplete", "autocomplete_choices",
"search?openpage", {method:'get',paramName: 'autocomplete', tokens: ','});

TIPS - How to export web data to MS Excel

2006-08-27T11:23:00.000+02:00

To export data to MS Excel, we can use CSV file format. This option is used by a lot of statiscal web site like Google Analytics.

Description of CSV File Format
CSV file format is a text file with values separated by comma or semicolon. Every rows are separated by carriage return. An example of CSV data :

Name; January;February; March
John; 12; 14;18
Tatiana;8;18; 15
Juan; 13; 12.5; 18

How to integrate CSV export in Lotus Domino
In this example I use a Notes View but we can use a Notes agent too.

Creation of view "statistics.csv"
To separate values, I create column between every column of values with formula ";". To separate each line I add a last column with formula : @char(13) + @char(10). I select option of my view "treat view content as HTML"

Creation of form "$$View Template for statistics.csv"
I integer the Notes View in a new form named "$$ViewTemplate ofr statistics.csv". I unselect "display column title" of the Embedded view option and I selcet to display it with HTML.

I want to open the view in MS Excel and not in Web Browser. To do that I just have to change MIME-Type of this form. The Mime-Type define to Web Browser how to display data and with which software. The MIME-Type for CSV file is : text/csv. I define this Mime-Type in the second tab of form options.

You can open this exemple in Excel.

GOOGLE API - Geolocalisation search from Lotus Notes client

2006-08-21T22:18:00.000+02:00

It's possible to search geolocalisation of an postal address from Lotus Notes client too.

ALAX : Asynchronous LotusScript And XML

To search the geolocalisation of a postal address from Lotus Notes Client, I use XMLHTTP object like in AJAX solutions. This object can be used in lotuscript thru agent, event or action.

Search Form

The elements of my form are :

"street" : text field
"town" : text field
"country" : text filed
button "search"
"latitude" : text field
"longitude" : text field

The user will specify street, town and town, then will click on search button. The values of Lattitude and longititude fields will be automatically added.

Search button

I use the same web service than previous entry. The function must :

format search query from fields values
send request to web service
parse the result
added values to longitude and latitude fields

The LotusScript code :

Sub Click(Source As Button)
Dim wk As New NotesUIWorkspace
Dim uidoc As NotesUIDocument
Dim doc As NotesDocument
Dim street, town, country As Variant

Set uidoc = wk.CurrentDocument
Set doc = uidoc.Document

' longitude/latitude search request
' -----------------------------------------------------------
' the text must be encoded in URL format to replace special characters
' and spaces. localsearchmaps web service doesn't accept null value
' for street. If the user doesn't specify this information, we'll send
' "%20"

street = Evaluate({@URLEncode("UTF-8";"} + doc.street(0) + {")})
If street(0)="" Then street(0) = "%20"
town = Evaluate({@URLEncode("UTF-8";"} + doc.town(0) + {")})
country = Evaluate({@URLEncode("UTF-8";"} + doc.country(0) + {")})
request = "http://www.localsearchmaps.com/geo/?street=" + street(0) + _
"&city=" + town(0) + "&country=" + country(0) + "&cb=notes"

' Call and reception of the request
' -------------------------------------------------------------
' The XMLHTTP object only work if user have Internet Explorer

Set page = CreateObject("Microsoft.XMLHTTP")
Call page.open("GET", request, False)
Call page.send()

strReturn =page.responseText

If (Instr(strReturn,"notes")>0) Then
' Extraction of longitude and latitude
' ----------------------------------------------------
' The result of the request looks like :
'    notes(latitude, longitude,'TOWN', 'CODE', 'COUNTRY');

search = Mid(strReturn, 7, Instr(strReturn, ",'") -7)
lattitude = Left(search, Instr(search, ",") -1)
longitude = Mid(search, Instr(search, ",") +2)

Call uidoc.FieldSetText("latitude", lattitude)
Call uidoc.FieldSetText("longitude", longitude)
Else
Messagebox "The postal address wasn't found", 48, "Geolocalisation"
End If

Set page = Nothing
End Sub

GOOGLE API - Full-Text search in Google Maps API (2/3)

2006-08-20T23:36:00.000+02:00

The previous entry presented how to find documents placed close to a postal address. I present now how to find the location of a document on the map. To find document in the database, I'll use Lotus Notes Full-Text Search.

AJAX : (Asynchronous JavaScript And XML)
I can't use standard Lotus Notes full-test search without using frames or iframes. The search form is "POSTed". Then the map will be reloaded after each requests. I'll use AJAX and little DHTML to perform my full-text search in asynchronous mode and integer the result without reload the web page. To learn more about AJAX you can read :

How to customize result search view

When users will click on a link in the result view, I want to center and center on Google Map at the position represented by the document. To do that, I reuse the Javascript function "mapZoom". To have more details on this function read the previous post. The hypertext link of the document will look like :
$lt;A HREF="" OnClick="mapZoom(longitude, latitude); return(false);">myLink</A>

To obtain this result :

Create a new view "Search"
- First column formula : "<A HREF="" OnClick="mapZoom(" + longitude + ", " + latitude + "); return(false);">" + title + "</A>"
- Second column formula : description + "<br />"
- Select view option : "treat view content as HTML"
Create form to display search result : "$$SearchTemplateDefault"
- Insert new field named "$$ViewBody"

The search form and result area

The user needs only one field to type his request and a search button. In html :

<FORM NAME="form_fts">
<LABEL>Texte : </LABEL> <INPUT NAME="req" SIZE=35 />
<BUTTON VALUE="Rechercher" NAME="Rechercher"
TYPE="button"  onClick="searchNotes()">
Rechercher
</BUTTON>
</FORM>

<DIV id="affres" style="overflow:auto; padding:5px; height:100px;"></DIV>

Search and display result with AJAX

The AJAX function use Lotus Notes standard search url to call result web page and display it in the div with id "affres". The url to search query looks like : "search?searchview&query=text from my query field".

function searchNotes(){
var xmlhttp=false;
/*@cc_on @*/
/*@if (@_jscript_version >= 5)
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlhttp = false;
}
}
@end @*/

if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
try {
xmlhttp = new XMLHttpRequest();
} catch (e) {
xmlhttp=false;
}
}
if (!xmlhttp && window.createRequest) {
try {
xmlhttp = window.createRequest();
} catch (e) {
xmlhttp=false;
}
}

xmlhttp.open("GET", "search?searchview&query=" +
             escape( document.form_fts.req.value),true);
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4) {
document.getElementById("affres").innerHTML = xmlhttp.responseText;
}
}
xmlhttp.send(null)
}

document.getElementById("idname").innerHTML display result as content of the div with id "idname".

GOOGLE API - How to search informations with Google Maps API (1/3)

2006-08-20T22:05:00.000+02:00

There are no geographical localisation search function from postal address in Google Maps API. If we haven't latitude and longitude of the points, it will be difficult for users to search informations for every documents.

If I use Google Maps and Google Earth it's I want :

to find all documents in a region
to find where is the site referenced by the document

To find the position of a document the user need to zoom on the by clicking on this document in a list for example. With Google Earth there is no problem. The list of document appears in left pannel. We juste have to double click on the title of a document to be centered and zoomed on the site referenced by the document. Unfortunately you haven't this option with Google Maps.

How to find, center and zoom on Google Maps with a postal address
To find geolocalisation of a postal address I use web service localsearchmap. This web service return by default the Google Maps API syntax to center and zoom on this point. Unfortunately, it uses the version 1 of the API syntax who's not compatible with the actual version. The web service permiss to custumize the format of the response.

The basic syntaxe to call this service is :
http://www.localsearchmaps.com/geo/?street=mystreet&town=mytown
&country=mycountry
It's possible to add an argument to return the result with call to Javascript function : &cb=myJavascriptFonction

For example :
http://www.localsearchmaps.com/geo/
?street=rue+des+cosmonautes&town=palaiseau
&country=france&cb=mapZoom
return the result : mapZoom(46.624, 2.4622);

To use map object in Javascript function I must declare this object as global in the javascript code who display Google Maps map (previous entry).

The search form

The user needs to specify postal address in a form. We must add three fields and a button in the Google Maps page : street, town, coutry fields and search button.

<FORM NAME="form">
<LABEL>Street : </LABEL> <INPUT NAME="street" SIZE=50 /><BR />
<LABEL>Town : </LABEL> <INPUT NAME="town" SIZE=50 /><BR />
<LABEL>Country : </LABEL> <INPUT NAME="country" />
<BUTTON VALUE="Search" NAME="Search" TYPE="button"
onclick="searchPoint()">
Search
</BUTTON>
</FORM>

mapZoom(lat,long) Javascript function
When we'll have found the geolocalisation of the point, we must center and zoom on the point. Then I declare a new Javascript function to do that :

function mapZoom(lat, long,town,state,country){
var point = new GLatLng( parseFloat(lat), parseFloat(long));
map.setCenter(point,14, G_HYBRID_MAP );
}

searchPoint() Javascript function
This function call web service with datas of the form in argument. The result will launch the previous function to zoom and center on the point.
function searchPoint() { var queries = "?street=" + escape( document.form.street.value)+ "&city="+escape( document.form.town.value)+ "&country=" + escape( document.form.country.value); var s = document.createElement( "script" ); s.src="http://www.localsearchmaps.com/geo/" + queries + "&cb=mapZoom"; s.type = "text/javascript"; document.getElementsByTagName( "head" )[0].appendChild(s); }
This example (in french for the moment) shows you the result.

GOOGLE API - Lotus Notes & Google Maps

2006-08-20T05:00:00.000+02:00

An API is available to customize Google Maps. You can add your own points on the earth like with Google Earth.

Steps to interface Lotus Notes and Google Maps :

Signup for a Google Maps API key
Create data source to define points to display (position and description)
Create web page to display the Google Maps map and your points

Step 1 : Google Maps API key
The usage of API key is restricted to an URL to define. Only elements directly accessible from this "directory" can be displayed on the map. Be careful when you define the URL. Don't panic if you define a wrong URL. You'll can define a new API Key.

If you want to call map from a page or an agent you'll specify the URL of the database. for example http://www.acme.com/sample.nsf/
If you want to call map from a document you'll must add the view in your URL. You can use the special view "0" too. For example : http://www.acme.com/sample/0/

In my example, I'll use a page to declare the Google Maps. Then, I use the URL http://free.dominoserver.de/it/dominoweb.nsf/ to define my new Google Maps API key.

To obtain an API key, go to web page http://www.google.com/apis/maps/

Step 2 : Creation of the data source
I need the same informations than Google Earth. Then I use the same form.

The extraction of data thru XML file is managed by Javascript. I could use the same file format than Google Earth. I've defined another XML format in this example to simplify the javascript code.

XML View for Google Maps
The XML File must define at least latitude and longitude. In this example I've chosen the format :

<markers>
<marker lat="latitude" long="longitude" title="titre">
<description><![CDATA[description]]></description>
</marker>
</markers>

Then the column formula for the "Google Maps" view is :

"<marker
lat=\"" + latitude + "\"
long=\"" + longitude + "\"
title=\"" + titre + "\">
<description><![CDATA[" + description + "]]></description>
</marker>"

Select option "treat view content as HTML" in view properties.

I create a form to display view as XML flow.

New form named "$$ViewTemplate for <Name of my view>"
Select Option "Type of file : Other : text/xml" in form properties

Insert XML header code :

<?xml version="1.0" encoding="ISO-8859-1" ?>
<markers>

Insert the view with option display as HTML

Insert XML footer code :
```
</markers>
```

Step 3 : Display the map and points from a page

I use a Lotus Notes "Page" to display map and points. You can use agent or document too.
The minimal code display map without points is :

<!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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MyGoogleMapsAPIKey"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {
if (GBrowserIsCompatible()) {
 var map = new GMap2(document.getElementById("map"));
 map.addControl(new GLargeMapControl());
 map.addControl(new GMapTypeControl());
 map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>

</html>

To download XML file and display points on the map I use "GDownloadUrl" Google javascript function.

<!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>Google Maps JavaScript API Example</title>
<script src="http://maps.google.com/maps?file=api&v=2&key=MaCleAPIGoogleMaps"
type="text/javascript"></script>

<script type="text/javascript">
//<![CDATA[
function load() {

if (GBrowserIsCompatible()) {
var map = new GMap2(document.getElementById("map"));
map.addControl(new GLargeMapControl());
map.addControl(new GMapTypeControl());
map.setCenter(new GLatLng(27.994401,13.164063),1, G_HYBRID_MAP );

GDownloadUrl("googlemaps.xml", function(data, responseCode) {
var xml = GXml.parse(data);
var markers = xml.documentElement.getElementsByTagName("marker");
for (var i = 0; i < markers.length; i++) {
var latitude = parseFloat(markers[i].getAttribute("lat"));
var longitude =  parseFloat(markers[i].getAttribute("long"));
var title =  markers[i].getAttribute("title");
var desc =
markers[i].getElementsByTagName("description")[0].firstChild.nodeValue;
var point = new GLatLng(latitude,longitude);
var marker = new GMarker(point);
map.addOverlay(marker);
}
});
}
}
//]]>
</script>
</head>

<body onload="load()" onunload="GUnload()">
<div id="map" style="width: 500px; height: 300px"></div>
</body>

</html>

I use two differents type of call in javascript to extract XML File datas.

var latitude = parseFloat(markers[i].getAttribute("lat"));
To extract attribute of XML tag.
var desc = markers[i].getElementsByTagName("description")[0]
.firstChild.nodeValue;
To extract values declared between two XML tags.

For the moment I've just displayed the points. I can't display description when I click on a point.
To do that, I declare a new Javascript function :

function createMarker(point,title, desc ) {
var bulle = "<h3>" +  title + "</h3><p>" + desc +"</p>";
var marker = new GMarker(point);
GEvent.addListener(marker, "click", function() {
map.setCenter(point,14, G_HYBRID_MAP );
marker.openInfoWindowHtml(bulle);
});
return marker;
}

To use this function, I replace var marker = new GMarker(point); by var marker = createMarker(point,title, desc);
You can look at an example (for the moment in french): http://free.dominoserver.de/it/dominoweb.nsf/googlemaps

To have more informations about Google Maps API you can read the API documentation

GOOGLE API - Lotus Notes & Google Earth

2006-08-20T03:05:00.000+02:00

Display Lotus Notes Document on Google Earth is simpliest solution. To add points on maps you just have to prepare KML file.

Quick description of KML format
KML files are XML files who permiss to describe the points to display on earth. The definition of a point include position of the point (latitude and longitude) and a description.

<kml xmlns="http://earth.google.com/kml/2.0">
<Placemark>
<description>
<![CDATA[<a href="http://www.google.com/">Google Search!</a>]]>
</description>
<name>Google Headquarters</name>
<Lookat>
<longitude>-122.0839</longitude>
<latitude>37.4219</latitude>
<range>540.68</range>
<tilt>0</tilt>
<heading>3</heading>
</Lookat>
<Point>
<coordinates>-122.0839,37.4219,0</coordinates>
</Point>
</Placemark>
</kml>

Placemark : New point
description : description displayed when you click on a point in Google Earth.
name : name of the point
Lookat : geolocalisation
longitude : longitude of the point
latitude : latitude of the point
range : altitude
tilt : angle from North
heading : angle from skyline
coordinates : coordonnates of the point

If you want to define several points you must had the root tag <Document>. This tag accept tag "name" who permiss to describe the flow in Google Earth.

Other options can be used like customization of the icon. You'll find all informations on the help page of Google Earth : (http://www.keyhole.com/kml/docs/webhelp/index.htm)

How to integer Lotus Notes data in Google Earth with a simple view
There's a lot of solutions to interface Lotus Notes and Google Earth. I've choosen to generate KML file from Notes View.

Step 1 : The form
We need to have this informations :

a title
a description
longitude
latitude

The other elements will be define in the view.

Step 2 : The view
After create new view, select option "treat view content as HTML".
Column formula is (be carefull with Uppercase and Lowercase):

"<Placemark>
<description><![CDATA[" + description + "]]></description>
<name>" + titre + "</name>
<Lookat>
<longitude>" + longitude + "</longitude>
<latitude>" + latitude + "</latitude>
<range>540.68</range>
<tilt>0</tilt>
<heading>3</heading>
</Lookat>
<Point>
<coordinates>" + longitude + "," + latitude +"</coordinates>
</Point>
</Placemark>"

Step 3 : form to display view
To integer header and character setting of the KML file, I create a form to display the embedded view.

Create a forme named : $$ViewTemplate For
Select Option "Type of file : Other : Application/vnd.google-earth.kml+xml" in form properties
Insert KML header. I choose iso-8859-1 charset to support french characters. You can choose UTF-8 or other local charset.

<?xml version="1.0" encoding="iso-8859-1" ?>
<kml xmlns="http://earth.google.com/kml/2.0">
<Document>
<name>Titre de mon flux Google Earth</name>

Insert embedded view
Insert KML footer
```
</Document>
</kml>
```

Etape 5 : Integer KML File in Google Earth
The MIME type was defined in Form properties. If you have installed Google Earth, you can open the view from a Web Browser. A dialog box will be open to ask you if you want to open the file in Google Earth. If you click on OK your file will be automaticly integer in Google Earth.

You can integer this file directly in Google Earth too. Open Google Earth and select Add\Network Link in menu. You'll just have to insert the URL of your view in location field.

Limitation with access control list
Be careful, you must defin Anaonymous with Reader access at least. I'll write an entries more later to resolve this problem.

Examples

An example of KML File from Lotus Notes Database : http://free.dominoserver.de/it/dominoweb.nsf/googleearth.kml
The same file but in XML to display it in Web Browser: http://free.dominoserver.de/it/dominoweb.nsf/googleearth.xml

GOOGLE API - Google Earth and Google Maps the new views for Lotus Domino

2006-08-20T00:52:00.000+02:00

GoogleEarth and GoogleMaps now allow to display Lotus Notes documents, not in views, but on the earth.

The objectives of this first stage are to present :

how to display documents on Google Earth
how to display documents on Google Maps
the limitations of this tools with Lotus Notes
how to simplify the geolocalisation

Why would you want to display documents on a map ?
The geolocalisation of the documents should not be generalized with all types of documents. The first condition is to should associate geographical position to a document. The representation of the documents on a map can have two advantages :

To know the geographical position of a document
To know the documents who exist on a geographical position

This two informations are totaly differents. Google Earth and Google Maps can do the two things but it will be more or less simple to implement natively with.

Differences between Google Earth and Google Maps
Google Earth is a software then Google Maps is a service thru recent web browser (IE6 +, or Firefox).

Google Earth needs minimum configuration of the desktop and more particulary a recent graphic cards. You can dowload free version of Google Earth :
http://earth.google.com/download-earth.html

Google Earth

You ca access to Google Maps on URL http://maps.google.com. You can customized this maps with Google API. I use this API in the next entries. For more informations about GoogleMaps API, phlease consult the web site http://www.google.com/apis/maps/.

Interface Google Maps

SITE - My Taylor is rich

2006-08-19T05:00:00.000+02:00

This blog is the english translation of the French Blog Domino & Web 2.0.