xref: /plugin/openlayersmap/script.js (revision ab8cbd2baf29a832ccd9d40f1734e2ba1f0d0649)
1/*
2 * Copyright (c) 2008-2014 Mark C. Prins <mprins@users.sf.net>
3 *
4 * Permission to use, copy, modify, and distribute this software for any
5 * purpose with or without fee is hereby granted, provided that the above
6 * copyright notice and this permission notice appear in all copies.
7 *
8 * THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
9 * WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
10 * MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
11 * ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
12 * WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
13 * ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
14 * OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.
15 */
16
17/**
18 * @fileoverview Javascript voor OpenLayers plugin.
19 *
20 * @requires {lib/OpenLayers.js} or a full openlayers build
21 * @author Mark C. Prins <mprins@users.sf.net>
22 *
23 */
24
25/**
26 * Openlayers selectcontrol.
27 *
28 * @type {OpenLayers.Control.SelectFeature}
29 * @private
30 */
31var selectControl;
32
33/**
34 * handle feature select event.
35 *
36 * @param {OpenLayers.Feature.Vector}
37 *            selFeature the selected feature
38 */
39function onFeatureSelect(selFeature) {
40	// 'this' is selectFeature control
41	var pPos = selFeature.geometry.getBounds().getCenterLonLat();
42	// != OpenLayers.Geometry.Point
43	if (selFeature.geometry.CLASS_NAME === "OpenLayers.Geometry.LineString") {
44		try {
45			// for lines make the popup show at the cursor position
46			// TODO this will fail for keyboard select
47			pPos = selFeature.layer.map.getLonLatFromViewPortPx(this.handlers.feature.evt.xy);
48		} catch (anErr) {
49			OpenLayers.Console.warn("unable to get event position; reverting to boundingbox center.");
50			pPos = selFeature.geometry.getBounds().getCenterLonLat();
51		}
52	}
53
54	var pContent = '<div class="spacer">&nbsp;</div>';
55	if (selFeature.data.rowId !== undefined) {
56		pContent += '<span class="rowId">' + selFeature.data.rowId + ': </span>';
57	}
58	if (selFeature.data.name !== undefined) {
59		pContent += '<span class="txt">' + selFeature.data.name + '</span>';
60	}
61	if (selFeature.data.ele !== undefined) {
62		pContent += '<div class="ele">elevation: ' + selFeature.data.ele + '</div>';
63	}
64	if (selFeature.data.type !== undefined) {
65		pContent += '<div>' + selFeature.data.type + '</div>';
66	}
67	if (selFeature.data.time !== undefined) {
68		pContent += '<div class="time">time: ' + selFeature.data.time + '</div>';
69	}
70	if (selFeature.data.description !== undefined) {
71		pContent += '<div class="desc">' + selFeature.data.description + '</div>';
72	}
73
74	if (pContent.length > 0) {
75		// only show when there is something to show...
76		var popup = new OpenLayersMap.Popup.FramedCloud("olPopup", pPos, null, pContent, null, true, function() {
77			selectControl.unselect(selFeature);
78			jQuery('#' + selectControl.layer.map.div.id).focus();
79		});
80		selFeature.popup = popup;
81		selFeature.layer.map.addPopup(popup);
82		jQuery('#olPopup').attr("tabindex", -1).focus();
83	}
84}
85
86/**
87 * handle feature unselect event. remove & destroy the popup.
88 *
89 * @param {OpenLayers.Feature.Vector}
90 *            selFeature the un-selected feature
91 */
92function onFeatureUnselect(selFeature) {
93	if (selFeature.popup !== null) {
94		selFeature.layer.map.removePopup(selFeature.popup);
95		selFeature.popup.destroy();
96		selFeature.popup = null;
97	}
98}
99/**
100 * Test for css support in the browser by sniffing for a css class we added
101 * using javascript added by the action plugin; this is an edge case because
102 * browsers that support javascript generally support css as well.
103 *
104 * @returns {Boolean} true when the browser supports css (and implicitly
105 *          javascript)
106 */
107function olTestCSSsupport() {
108	return (jQuery('.olCSSsupported').length > 0);
109}
110
111/**
112 * Creates a DocumentFragment to insert into the dom.
113 *
114 * @param mapid
115 *            id for the map div
116 * @param width
117 *            width for the map div
118 * @param height
119 *            height for the map div
120 * @returns a {DocumentFragment} element that can be injected into the dom
121 */
122function olCreateMaptag(mapid, width, height) {
123	var mEl = '<div id="' + mapid + '-olContainer" class="olContainer olWebOnly">' + '<div id="' + mapid
124			+ '" tabindex="-1" style="width:' + width + ';height:' + height + ';" class="olMap">'
125			+ '<a class="olAccesskey" href="#' + mapid + '" onclick="document.getElementById(&quot;' + mapid
126			+ '&quot;).focus(); return false;" title="' + OpenLayers.i18n("activate_map") + '">'
127			+ OpenLayers.i18n("activate_map") + '</a>' + '</div>' + '<div id="' + mapid + '-olStatusBar" style="width:'
128			+ width + ';"class="olStatusBarContainer">' + '<div id="' + mapid
129			+ '-statusbar-scale" class="olStatusBar olStatusBarScale">scale</div>' + '<div id="' + mapid
130			+ '-statusbar-mouseposition" class="olStatusBar olStatusBarMouseposition"></div>' + '<div id="' + mapid
131			+ '-statusbar-projection" class="olStatusBar olStatusBarProjection">proj</div>' + '<div id="' + mapid
132			+ '-statusbar-text" class="olStatusBar olStatusBarText">txt</div>' + '</div></div>',
133	// fragment
134	frag = document.createDocumentFragment(),
135	// temp node
136	temp = document.createElement('div');
137	temp.innerHTML = mEl;
138	while (temp.firstChild) {
139		frag.appendChild(temp.firstChild);
140	}
141	return frag;
142}
143
144/**
145 * Create the map based on the params given.
146 *
147 * @param {Object}
148 *            mapOpts MapOptions hash {id:'olmap', width:500px, height:500px,
149 *            lat:6710200, lon:506500, zoom:13, statusbar:1, controls:1,
150 *            poihoverstyle:1, baselyr:'', kmlfile:'', gpxfile:'', geojsonfile,
151 *            summary:''}
152 * @param {Array}
153 *            OLmapPOI array with POI's [ {lat:6710300,lon:506000,txt:'instap
154 *            punt',angle:180,opacity:.9,img:'', rowId:n},... ]);
155 *
156 * @return {OpenLayers.Map} the created map
157 */
158function createMap(mapOpts, OLmapPOI) {
159	if (!olEnable) {
160		return;
161	}
162	if (!olTestCSSsupport()) {
163		olEnable = false;
164		return;
165	}
166	OpenLayers.ImgPath = DOKU_BASE + 'lib/plugins/openlayersmap/lib/img/';
167	OpenLayers.IMAGE_RELOAD_ATTEMPTS = 3;
168	// OpenLayers.Layer.Vector.prototype.renderers = ["SVG", "VML"];
169
170	// find map element location
171	var cleartag = document.getElementById(mapOpts.id + '-clearer');
172	if (cleartag === null) {
173		return;
174	}
175	// create map element and add to document
176	var fragment = olCreateMaptag(mapOpts.id, mapOpts.width, mapOpts.height);
177	cleartag.parentNode.insertBefore(fragment, cleartag);
178
179	/** dynamic map extent. */
180	var extent = new OpenLayers.Bounds(),
181
182	/** map. */
183	m = new OpenLayers.Map({
184		div : mapOpts.id,
185		projection : 'EPSG:900913',
186		displayProjection : new OpenLayers.Projection("EPSG:4326"),
187		numZoomLevels : 22,
188		controls : [],
189		theme : null
190	});
191
192	if (osmEnable) {
193		/* add OSM map layers */
194		m.addLayer(new OpenLayers.Layer.OSM());
195
196		m.addLayer(new OpenLayersMap.Layer.OCM());
197		/* open cycle map */
198		m.addLayer(new OpenLayersMap.Layer.OCM("transport", [
199				"http://a.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
200				"http://b.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png",
201				"http://c.tile2.opencyclemap.org/transport/${z}/${x}/${y}.png" ], {
202			visibility : mapOpts.baselyr === "transport"
203		}));
204		m.addLayer(new OpenLayersMap.Layer.OCM("landscape", [
205				"http://a.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png",
206				"http://b.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png",
207				"http://c.tile3.opencyclemap.org/landscape/${z}/${x}/${y}.png" ], {
208			visibility : mapOpts.baselyr === "landscape"
209		}));
210
211		m.addLayer(new OpenLayers.Layer.OSM(
212				"hike and bike map", "http://toolserver.org/tiles/hikebike/${z}/${x}/${y}.png", {
213					visibility : mapOpts.baselyr === "hike and bike map",
214					tileOptions : {
215						crossOriginKeyword : null
216					}
217				}));
218	}
219	/*
220	 * add MapQuest map layers, see:
221	 * http://developer.mapquest.com/web/products/open/map
222	 */
223	if (mqEnable) {
224		m.addLayer(new OpenLayersMap.Layer.MapQuest());
225		m.addLayer(new OpenLayersMap.Layer.MapQuest("mapquest sat", [
226				"http://otile1.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
227				"http://otile2.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
228				"http://otile3.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg",
229				"http://otile4.mqcdn.com/tiles/1.0.0/sat/${z}/${x}/${y}.jpg" ], {
230			// note that global coverage is provided at zoom levels 0-11. Zoom
231			// Levels 12+ are provided only in the United States (lower 48).
232			numZoomLevels : 12,
233			visibility : mapOpts.baselyr === "mapquest sat"
234		}));
235
236	}
237
238	if (gEnable) {
239		/* load google maps */
240		try {
241			m.addLayer(new OpenLayers.Layer.Google("google relief", {
242				type : google.maps.MapTypeId.TERRAIN,
243				numZoomLevels : 16,
244				animationEnabled : true,
245				visibility : mapOpts.baselyr === "google relief"
246			}));
247			m.addLayer(new OpenLayers.Layer.Google("google sat", {
248				type : google.maps.MapTypeId.SATELLITE,
249				animationEnabled : true,
250				visibility : mapOpts.baselyr === "google sat"
251			}));
252			m.addLayer(new OpenLayers.Layer.Google("google hybrid", {
253				type : google.maps.MapTypeId.HYBRID,
254				animationEnabled : true,
255				visibility : mapOpts.baselyr === "google hybrid"
256			}));
257			m.addLayer(new OpenLayers.Layer.Google("google road", {
258				animationEnabled : true,
259				visibility : mapOpts.baselyr === "google road"
260			}));
261		} catch (ol_err1) {
262			Openlayers.Console.userError('Error loading Google maps' + ol_err1);
263		}
264	}
265
266	if (bEnable && bApiKey !== '') {
267		try {
268			/* add Bing tiles */
269			m.addLayer(new OpenLayers.Layer.Bing({
270				key : bApiKey,
271				type : "Road",
272				name : "bing road",
273				visibility : mapOpts.baselyr === "bing road",
274				wrapDateLine : true,
275				attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">'
276						+ 'Bing™</a><img src="http://www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}'
277						+ '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>'
278			}));
279			m.addLayer(new OpenLayers.Layer.Bing({
280				key : bApiKey,
281				type : "Aerial",
282				name : "bing sat",
283				visibility : mapOpts.baselyr === "bing sat",
284				wrapDateLine : true,
285				attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">'
286						+ 'Bing™</a><img src="http://www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}'
287						+ '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>'
288			}));
289			m.addLayer(new OpenLayers.Layer.Bing({
290				key : bApiKey,
291				type : "AerialWithLabels",
292				name : "bing hybrid",
293				visibility : mapOpts.baselyr === "bing hybrid",
294				wrapDateLine : true,
295				attributionTemplate : '<a target="_blank" href="http://www.bing.com/maps/">'
296						+ 'Bing™</a><img src="http://www.bing.com/favicon.ico" alt="Bing logo"/> ${copyrights}'
297						+ '<a target="_blank" href="http://www.microsoft.com/maps/product/terms.html">Terms of Use</a>'
298			}));
299		} catch (ol_errBing) {
300			Openlayers.Console.userError('Error loading Bing maps: ' + ol_errBing);
301		}
302	}
303
304	m.setCenter(new OpenLayers.LonLat(mapOpts.lon, mapOpts.lat).transform(m.displayProjection, m.projection),
305			mapOpts.zoom);
306	extent.extend(m.getExtent());
307
308	// change/set alternative baselyr
309	try {
310		m.setBaseLayer(((m.getLayersByName(mapOpts.baselyr))[0]));
311	} catch (ol_err4) {
312		m.setBaseLayer(m.layers[0]);
313	}
314
315	m.addControls([ new OpenLayers.Control.ScaleLine({
316		geodesic : true
317	}), new OpenLayers.Control.KeyboardDefaults({
318		observeElement : mapOpts.id
319	}), new OpenLayers.Control.Navigation() ]);
320
321	if (mapOpts.statusbar === 1) {
322		// statusbar control: mouse pos.
323		m.addControl(new OpenLayers.Control.MousePosition({
324			'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-mouseposition')
325		}));
326		// statusbar control: scale
327		m.addControl(new OpenLayers.Control.Scale(mapOpts.id + '-statusbar-scale'));
328		// statusbar control: attribution
329		m.addControl(new OpenLayers.Control.Attribution({
330			'div' : OpenLayers.Util.getElement(mapOpts.id + '-statusbar-text')
331		}));
332		// statusbar control: projection
333		OpenLayers.Util.getElement(mapOpts.id + '-statusbar-projection').innerHTML = m.displayProjection;
334	} else {
335		OpenLayers.Util.getElement(mapOpts.id + '-olStatusBar').display = 'none';
336	}
337
338	if (OLmapPOI.length > 0) {
339		var markers = new OpenLayers.Layer.Vector("POI", {
340			styleMap : new OpenLayers.StyleMap({
341				"default" : {
342					cursor : "help",
343					externalGraphic : "${img}",
344					graphicHeight : 16,
345					graphicWidth : 16,
346					// graphicXOffset : 0,
347					// graphicYOffset : -8,
348					graphicOpacity : "${opacity}",
349					rotation : "${angle}",
350					backgroundGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker_shadow.png",
351					// backgroundXOffset : 0,
352					// backgroundYOffset : -4,
353					backgroundRotation : "${angle}",
354					pointRadius : 10,
355					labelXOffset : 8,
356					labelYOffset : 8,
357					labelAlign : "lb",
358					label : "${label}",
359					// fontColor : "",
360					fontFamily : "monospace",
361					fontSize : "12px",
362					fontWeight : "bold"
363				},
364				"select" : {
365					cursor : "help",
366					externalGraphic : DOKU_BASE + "lib/plugins/openlayersmap/icons/marker-red.png",
367					graphicHeight : 16,
368					graphicWidth : 16,
369					// graphicXOffset : 0,
370					// graphicYOffset : -8,
371					graphicOpacity : 1.0,
372					rotation : "${angle}"
373				}
374			}),
375			isBaseLayer : false,
376			rendererOptions : {
377				yOrdering : true
378			}
379		});
380		m.addLayer(markers);
381		var features = [];
382		for (var j = 0; j < OLmapPOI.length; j++) {
383			var feat = new OpenLayers.Feature.Vector(new OpenLayers.Geometry.Point(OLmapPOI[j].lon, OLmapPOI[j].lat)
384					.transform(m.displayProjection, m.projection), {
385				angle : OLmapPOI[j].angle,
386				opacity : OLmapPOI[j].opacity,
387				img : DOKU_BASE + "lib/plugins/openlayersmap/icons/" + OLmapPOI[j].img,
388				label : OLmapPOI[j].rowId
389			});
390			feat.data = {
391				name : OLmapPOI[j].txt,
392				rowId : OLmapPOI[j].rowId
393			};
394			features.push(feat);
395		}
396		markers.addFeatures(features);
397		extent.extend(markers.getDataExtent());
398		m.zoomToExtent(extent);
399	}
400
401	/* GPX layer */
402	if (mapOpts.gpxfile.length > 0) {
403		var layerGPX = new OpenLayers.Layer.Vector("GPS route", {
404			protocol : new OpenLayers.Protocol.HTTP({
405				url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.gpxfile,
406				format : new OpenLayers.Format.GPX({
407					extractWaypoints : true,
408					extractTracks : true,
409					extractStyles : true,
410					extractAttributes : true,
411					handleHeight : true,
412					maxDepth : 3
413				})
414			}),
415			style : {
416				strokeColor : "#0000FF",
417				strokeWidth : 3,
418				strokeOpacity : 0.7,
419				pointRadius : 4,
420				fillColor : "#0099FF",
421				fillOpacity : 0.7
422			// , label:"${name}"
423			},
424			projection : new OpenLayers.Projection("EPSG:4326"),
425			strategies : [ new OpenLayers.Strategy.Fixed() ]
426		});
427		m.addLayer(layerGPX);
428		layerGPX.events.register('loadend', m, function() {
429			extent.extend(layerGPX.getDataExtent());
430			m.zoomToExtent(extent);
431		});
432	}
433
434	/* GeoJSON layer */
435	if (mapOpts.geojsonfile.length > 0) {
436		var layerGJS = new OpenLayers.Layer.Vector("json data", {
437			protocol : new OpenLayers.Protocol.HTTP({
438				url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.geojsonfile,
439				format : new OpenLayers.Format.GeoJSON({
440					ignoreExtraDims : true
441				})
442			}),
443			style : {
444				strokeColor : "#FF00FF",
445				strokeWidth : 3,
446				strokeOpacity : 0.7,
447				pointRadius : 4,
448				fillColor : "#FF99FF",
449				fillOpacity : 0.7
450			// , label:"${name}"
451			},
452			projection : new OpenLayers.Projection("EPSG:4326"),
453			strategies : [ new OpenLayers.Strategy.Fixed() ]
454		});
455		m.addLayer(layerGJS);
456		layerGJS.events.register('loadend', m, function() {
457			extent.extend(layerGJS.getDataExtent());
458			m.zoomToExtent(extent);
459		});
460	}
461
462	/* KML layer */
463	if (mapOpts.kmlfile.length > 0) {
464		var layerKML = new OpenLayers.Layer.Vector("KML file", {
465			protocol : new OpenLayers.Protocol.HTTP({
466				url : DOKU_BASE + "lib/exe/fetch.php?media=" + mapOpts.kmlfile,
467				format : new OpenLayers.Format.KML({
468					extractStyles : true,
469					extractAttributes : true,
470					maxDepth : 3
471				})
472			}),
473			style : {
474				label : "${name}"
475			},
476			projection : new OpenLayers.Projection("EPSG:4326"),
477			strategies : [ new OpenLayers.Strategy.Fixed() ]
478		});
479		m.addLayer(layerKML);
480		layerKML.events.register('loadend', m, function() {
481			extent.extend(layerKML.getDataExtent());
482			m.zoomToExtent(extent);
483		});
484	}
485
486	// selectcontrol for layers
487	if ((m.getLayersByClass('OpenLayers.Layer.GML').length > 0)
488			|| m.getLayersByClass('OpenLayers.Layer.Vector').length > 0) {
489		selectControl = new OpenLayers.Control.SelectFeature((m.getLayersByClass('OpenLayers.Layer.Vector')).concat(m
490				.getLayersByClass('OpenLayers.Layer.GML')), {
491			hover : mapOpts.poihoverstyle,
492			onSelect : onFeatureSelect,
493			onUnselect : onFeatureUnselect
494		});
495		m.addControl(selectControl);
496		selectControl.activate();
497
498		// keyboard select control
499		var iControl = new OpenLayersMap.Control.KeyboardClick({
500			observeElement : mapOpts.id,
501			selectControl : selectControl
502		});
503		m.addControl(iControl);
504	}
505
506	if (mapOpts.controls === 1) {
507		/* add base controls to map */
508		m.addControls([ new OpenLayersMap.Control.LayerSwitcher(), new OpenLayers.Control.Graticule({
509			visible : false
510		}), new OpenLayersMap.Control.OverviewMap({
511			mapOptions : {
512				theme : null
513			}
514		}), new OpenLayersMap.Control.Zoom() ]);
515
516		// add hillshade, since this is off by default only add when we have a
517		// layerswitcher
518		m.addLayer(new OpenLayers.Layer.OSM("Hillshade", "http://toolserver.org/~cmarqu/hill/${z}/${x}/${y}.png", {
519			isBaseLayer : false,
520			transparent : true,
521			visibility : false,
522			displayOutsideMaxExtent : true,
523			attribution : '',
524			tileOptions : {
525				crossOriginKeyword : null
526			}
527		}));
528	}
529
530	return m;
531}
532
533/** init. */
534function olInit() {
535	if (olEnable) {
536		var _i = 0;
537		// create the maps in the page
538		for (_i = 0; _i < olMapData.length; _i++) {
539			olMaps[olMapData[_i].mapOpts.id] = createMap(olMapData[_i].mapOpts, olMapData[_i].poi);
540		}
541		// hide the table(s) with POI by giving it a print-only style
542		var tbls = jQuery('.olPOItableSpan');
543		for (_i = 0; _i < tbls.length; _i++) {
544			tbls[_i].className += ' olPrintOnly';
545		}
546		// hide the static map image(s) by giving it a print only style
547		var statImgs = jQuery('.olStaticMap');
548		for (_i = 0; _i < statImgs.length; _i++) {
549			statImgs[_i].className += ' olPrintOnly';
550		}
551		// add help button with toggle.
552		jQuery('.olWebOnly').prepend(
553				'<div class="olMapHelpButtonDiv">'
554						+ '<button onclick="jQuery(\'.olMapHelp\').toggle(500);" class="olMapHelpButton olHasTooltip">'
555						+ '<span>' + OpenLayers.i18n("toggle_help") + '</span>?</button>' + '</div>');
556	}
557}
558
559/**
560 * ol api flag.
561 *
562 * @type {Boolean}
563 */
564var olEnable = false,
565/**
566 * An array with data for each map in the page.
567 *
568 * @type {Array}
569 */
570olMapData = [],
571/**
572 * Holds a reference to all of the maps on this page with the map's id as key.
573 * Can be used as an extension point.
574 *
575 * @type {Object}
576 */
577olMaps = new Object(),
578/**
579 * MapQuest tiles flag.
580 *
581 * @type {Boolean}
582 */
583mqEnable = false,
584/**
585 * google map api flag.
586 *
587 * @type {Boolean}
588 */
589gEnable = false,
590/**
591 * Bing tiles flag.
592 *
593 * @type {Boolean}
594 */
595bEnable = false,
596/**
597 * Bing API key.
598 *
599 * @type {String}
600 */
601bApiKey = '',
602/**
603 * OSM tiles flag.
604 *
605 * @type {Boolean}
606 */
607osmEnable = true,
608/**
609 * CSS support flag.
610 *
611 * @type {Boolean}
612 */
613olCSSEnable = true;
614
615/* register olInit to run with onload event. */
616jQuery(olInit);
617