Project

General

Profile

Download (14 KB) Statistics
| Branch: | Tag: | Revision:
1
function CdmOpenlayersMap(mapElement, mapserverBaseUrl, options){
2

    
3
	var legendImgSrc = null;
4

    
5
	var map = null;
6

    
7
	var dataBounds = null;
8

    
9
	var baseLayers = [];
10
	var defaultBaseLayer;
11

    
12
	var defaultControls = [
13
  	         new OpenLayers.Control.PanZoom(),
14
	         new OpenLayers.Control.Navigation({zoomWheelEnabled: false, handleRightClicks:true, zoomBoxKeyMask: OpenLayers.Handler.MOD_CTRL})
15
	       ];
16
	/*
17
	 * EPSG:4326 and EPSG:900913 extends
18
	 */
19
	var mapExtend_4326 = new OpenLayers.Bounds(-180, -90, 180, 90);
20
	var mapExtend_900913 = new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34);
21

    
22
	var mapOptions={
23
			EPSG900913: {
24
				controls: defaultControls,
25
				maxExtent: mapExtend_900913,
26
				//maxResolution: (mapExtend_900913.getWidth() / options.displayWidth),
27
				maxResolution: (mapExtend_900913.getHeight() / (options.displayWidth / 2)),
28
				//maxResolution:156543.0339 * 20,
29
				units:'m',
30
				restrictedExtent: mapExtend_900913,
31
				projection: new OpenLayers.Projection("EPSG:900913")
32
			},
33
			EPSG4326: {
34
				controls: defaultControls,
35
				maxExtent: mapExtend_4326,
36
				maxResolution: (mapExtend_4326.getWidth() / options.displayWidth),
37
				units:'degrees',
38
				restrictedExtent: mapExtend_4326,
39
				projection: new OpenLayers.Projection("EPSG:4326")
40
			}
41
	};
42

    
43

    
44
	var dataProj = new OpenLayers.Projection("EPSG:4326");
45

    
46
	var dataLayerOptions = {
47
			maxExtent: mapExtend_900913,
48
			isBaseLayer: false,
49
			displayInLayerSwitcher: true
50
	};
51

    
52
	var layerByNameMap = {
53
			tdwg1: 'topp:tdwg_level_1',
54
			tdwg2: 'topp:tdwg_level_2',
55
			tdwg3: 'topp:tdwg_level_3',
56
			tdwg4: 'topp:tdwg_level_4'
57
	};
58

    
59
	/**
60
	 *
61
	 */
62
	this.init = function(){
63

    
64
		createLayers(options.baseLayerNames, options.defaultBaseLayerName);
65

    
66
     //HACK !!!!!!!!!!!!!!!!!!!!!!!!!!!!
67
    if(defaultBaseLayer.projection == mapOptions.EPSG900913.projection){
68
      options.minZoom = 1;
69
		}
70

    
71
		initOpenLayers();
72

    
73

    
74

    
75
		// -- Distribution Layer --
76
		var mapServiceRequest;
77
		var distributionQuery = mapElement.attr('distributionQuery');
78

    
79
		if(distributionQuery !== undefined){
80
			if(typeof legendPosition == 'number'){
81
				distributionQuery = mergeQueryStrings(distributionQuery, 'legend=1&mlp=' + options.legendPosition);
82
			}
83

    
84
			distributionQuery = mergeQueryStrings(distributionQuery, 'callback=?');
85
			var legendFormatQuery = mapElement.attr('legendFormatQuery');
86
			if(legendFormatQuery !== undefined){
87
				legendImgSrc = mergeQueryStrings('/GetLegendGraphic?SERVICE=WMS&VERSION=1.1.1', legendFormatQuery);
88
			}
89

    
90
			mapServiceRequest = mapserverBaseUrl + '/areas.php?' + distributionQuery;
91

    
92
			$.ajax({
93
				  url: mapServiceRequest,
94
				  dataType: "jsonp",
95
				  success: function(data){
96
						addDataLayer(data);
97
					}
98
				});
99
		}
100

    
101
		// -- Occurrence Layer --
102
		var occurrenceQuery = mapElement.attr('occurrenceQuery');
103
		if(occurrenceQuery !== undefined){
104
//			if(typeof legendPosition == 'number'){
105
//				occurrenceQuery = mergeQueryStrings(distributionQuery, 'legend=1&mlp=' + options.legendPosition);
106
//			}
107

    
108
			occurrenceQuery = mergeQueryStrings(occurrenceQuery, 'callback=?');
109
//			var legendFormatQuery = mapElement.attr('legendFormatQuery');
110
//			if(legendFormatQuery !== undefined){
111
//				legendImgSrc = mergeQueryStrings('/GetLegendGraphic?SERVICE=WMS&VERSION=1.1.1', legendFormatQuery);
112
//			}
113

    
114
			mapServiceRequest = mapserverBaseUrl + '/points.php?' + occurrenceQuery;
115

    
116
			$.ajax({
117
				  url: mapServiceRequest,
118
				  dataType: "jsonp",
119
				  success: function(data){
120
						addDataLayer(data);
121
					}
122
				});
123
		}
124

    
125

    
126
	};
127

    
128
	/**
129
	 * Initialize the Openlayers viewer with the base layer
130
	 */
131
	var initOpenLayers = function(){
132

    
133
		// instatiate the openlayers viewer
134
		if(defaultBaseLayer.projection == mapOptions.EPSG900913.projection){
135
			map = new OpenLayers.Map('openlayers_map', mapOptions.EPSG900913);
136
		} else {
137
			map = new OpenLayers.Map('openlayers_map', mapOptions.EPSG4326);
138
		}
139

    
140
		//add the base layers
141
		map.addLayers(baseLayers);
142
		map.setBaseLayer(defaultBaseLayer);
143

    
144
		if(options.showLayerSwitcher === true){
145
			map.addControl(new OpenLayers.Control.LayerSwitcher({'ascending':false}));
146
		}
147

    
148
		// zoom to the required area
149
		var boundsStr = (typeof options.boundingBox == 'string' && options.boundingBox.length > 6 ? options.boundingBox : '-180, -90, 180, 90');
150
		var zoomToBounds = OpenLayers.Bounds.fromString( boundsStr );
151
		map.zoomToExtent(zoomToBounds.transform(dataProj, map.getProjectionObject()), false);
152
		if(map.getZoom() > options.maxZoom){
153
			map.zoomTo(options.maxZoom);
154
		} else if(map.getZoom() < options.minZoom){
155
			map.zoomTo(options.minZoom);
156
		}
157

    
158
		// adjust height of openlayers container div
159
		$('#openlayers').css('height', $('#openlayers #openlayers_map').height());
160

    
161
	};
162

    
163
	/**
164
	 * add a distribution layer
165
	 */
166
	var addDataLayer = function(mapResponseObj){
167

    
168
		var layer;
169
		// add additional layers, get them from
170
		// the mapResponseObj
171
		if(mapResponseObj !== undefined){
172
			if(mapResponseObj.points_sld !== undefined){
173
				// it is a response from the points.php
174
				//TODO points_sld should be renamed to sld in response + fill path to sld should be given
175

    
176
				layer = new OpenLayers.Layer.WMS.Untiled(
177
						'points',
178
						"http://193.190.116.6:8080/geoserver/wms/wms",
179
						{layers: 'topp:rest_points' ,transparent:"true", format:"image/png"},
180
						dataLayerOptions );
181

    
182
				var sld = mapResponseObj.points_sld;
183
				if(sld.indexOf("http://") !== 0){
184
					sld = "http://edit.br.fgov.be/synthesys/www/v1/sld/" + sld;
185
				}
186

    
187
				layer.params.SLD = sld;
188
				map.addLayers([layer]);
189

    
190
			} else {
191
				// it is a response from the areas.php
192
				for ( var i in mapResponseObj.layers) {
193
				var layerData = mapResponseObj.layers[i];
194

    
195
					layer = new OpenLayers.Layer.WMS.Untiled(
196
							layerData.tdwg,
197
							mapResponseObj.geoserver + "/wms",
198
							{layers: layerByNameMap[layerData.tdwg] ,transparent:"true", format:"image/png"},
199
							dataLayerOptions );
200
					layer.params.SLD = layerData.sld;
201
					layer.setOpacity(options.distributionOpacity);
202
					map.addLayers([layer]);
203

    
204
				}
205

    
206
			}
207

    
208
			// zoom to the required area
209
			if(mapResponseObj.bbox !== undefined){
210
				var newBounds =  OpenLayers.Bounds.fromString( mapResponseObj.bbox );
211
				if(dataBounds !== null){
212
					dataBounds.extend(newBounds);
213
				} else if(newBounds !== undefined){
214
					dataBounds = newBounds;
215
				}
216
				map.zoomToExtent(dataBounds.transform(dataProj, map.getProjectionObject()), false);
217
				if(map.getZoom() > options.maxZoom){
218
					map.zoomTo(options.maxZoom);
219
				} else if(map.getZoom() < options.minZoom){
220
					map.zoomTo(options.minZoom);
221
				}
222
			}
223

    
224

    
225
			if(options.legendPosition !== undefined && mapResponseObj.legend !== undefined){
226
				var legendSrcUrl = mapResponseObj.geoserver + legendImgSrc + mapResponseObj.legend;
227
				addLegendAsElement(legendSrcUrl);
228
				//addLegendAsLayer(legendSrcUrl, map);
229
			}
230
		}
231

    
232
	};
233

    
234
	/**
235
	 *
236
	 */
237
	var addLegendAsElement= function(legendSrcUrl){
238

    
239
		mapElement.after('<div class="openlayers_legend"><img src="' + legendSrcUrl + '"></div>');
240
		mapElement.next('.openlayers_legend').css('opacity', options.legendOpacity).find('img').load(function () {
241
			$(this).parent()
242
				.css('position', 'relative')
243
				.css('z-index', '1002')
244
				.css('top', -mapElement.height())
245
				.css('left', mapElement.width()- $(this).width())
246
				.width($(this).width());
247
		});
248
	};
249

    
250

    
251
	var addLegendAsLayer= function(legendSrcUrl, map){
252
		var w, h;
253

    
254
		// 1. download imge to find height and width
255
		mapElement.after('<div class="openlayers_legend"><img src="' + legendSrcUrl + '"></div>');
256
		mapElement.next('.openlayers_legend').css('display', 'none').css('opacity', options.legendOpacity).find('img').load(function () {
257

    
258
			w = mapElement.next('.openlayers_legend').find('img').width();
259
			h = mapElement.next('.openlayers_legend').find('img').height();
260
			mapElement.next('.openlayers_legend').remove();
261

    
262
//			createLegendLayer();
263
//			// 2. create the Legend Layer
264
			//TODO createLegendLayer as inner fiinction seems like an error
265
//			var createLegendLayer = function(){
266
//
267
//
268
//				var legendLayerOptions={
269
//						maxResolution: '.$maxRes.',
270
//						maxExtent: new OpenLayers.Bounds(0, 0, w, h)
271
//				};
272
//
273
//				var legendLayer = new OpenLayers.Layer.Image(
274
//						'Legend',
275
//						legendSrcUrl,
276
//						new OpenLayers.Bounds(0, 0, w, h),
277
//						new OpenLayers.Size(w, h),
278
//						imageLayerOptions);
279
//			};
280
		});
281

    
282

    
283
	};
284

    
285
	/**
286
	 * merge 2 Url query strings
287
	 */
288
	 var mergeQueryStrings = function(queryStr1, queryStr2){
289
		if(queryStr1.charAt(queryStr1.length - 1) != '&'){
290
			queryStr1 += '&';
291
		}
292
		if(queryStr2.charAt(0) == '&'){
293
			return queryStr1 + queryStr2.substr(1);
294
		} else {
295
			return queryStr1 + queryStr2;
296
		}
297
	};
298

    
299
	/**
300
	 *
301
	 */
302
	var createLayers = function( baseLayerNames, defaultBaseLayerName){
303
		//var baseLayers = new Array();
304
		for(var i = 0; i <  baseLayerNames.length; i++) {
305
			//var layerName in baseLayerNames ){
306
			baseLayers[i] = getLayersByName(baseLayerNames[i]);
307
			// set the default base layer
308
			if(baseLayerNames[i] == defaultBaseLayerName){
309
				defaultBaseLayer = baseLayers[i];
310
			}
311
		}
312

    
313
		//return baseLayers;
314
	};
315

    
316

    
317
	/**
318
	 *
319
	 */
320
	var getLayersByName = function(layerName){
321

    
322
		var baseLayer;
323

    
324
		switch(layerName){
325

    
326
			case 'metacarta_vmap0':
327
				/**
328
				 * NOTE: labs.metacarta.com is currently unavailable
329
				 *
330
				 * Available Projections:
331
				 * 		EPSG:900913
332
				 * 		EPSG:4326
333
				 */
334
				baseLayer = new OpenLayers.Layer.WMS(
335
					    "Metacarta Vmap0",
336
					    "http://labs.metacarta.com/wms/vmap0",
337
					    {layers: 'basic', format:"png"},
338
					    {
339
							maxExtent: mapExtend_4326,
340
							isBaseLayer: true,
341
							displayInLayerSwitcher: true
342
						}
343
				);
344
			break;
345

    
346
			case 'osgeo_vmap0':
347
				/**
348
				 * Available Projections:
349
				 * 		EPSG:4269
350
					    EPSG:4326
351
					    EPSG:900913
352
				 */
353
				baseLayer = new OpenLayers.Layer.WMS(
354
			        "Metacarta Vmap0",
355
			        "http://vmap0.tiles.osgeo.org/wms/vmap0",
356
			        {layers: 'basic', format:"png"},
357
			        {
358
						maxExtent: mapExtend_900913,
359
						isBaseLayer: true,
360
						displayInLayerSwitcher: true
361
					}
362
				);
363
			break;
364

    
365
			case 'edit-etopo1':
366
				baseLayer = new OpenLayers.Layer.WMS(
367
			        "ETOPO1 Global Relief Model",
368
			        "http://edit.br.fgov.be:8080/geoserver/wms",
369
			        {layers: 'topp:color_etopo1_ice_full', format:"image/png"},
370
			        {
371
						maxExtent: mapExtend_900913,
372
						isBaseLayer: true,
373
						displayInLayerSwitcher: true
374
					}
375
				);
376
			break;
377

    
378
			case 'edit-vmap0_world_basic':
379
				baseLayer = new OpenLayers.Layer.WMS(
380
			        "EDIT Vmap0",
381
			        "http://edit.br.fgov.be:8080/geoserver/wms",
382
			        {layers: 'vmap0_world_basic', format:"image/png"},
383
			        {
384
						maxExtent: mapExtend_900913,
385
						isBaseLayer: true,
386
						displayInLayerSwitcher: true
387
					}
388
				);
389
			break;
390

    
391
			// create Google Mercator layers
392
			case 'gmap':
393
				baseLayer = new OpenLayers.Layer.Google(
394
					        "Google Streets",
395
					        {'sphericalMercator': true}
396
					    );
397
			break;
398

    
399

    
400
			case 'gsat':
401
				baseLayer = new OpenLayers.Layer.Google(
402
					        "Google Satellite",
403
					        {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22}
404
					    );
405
			break;
406

    
407
			case 'ghyb':
408
				baseLayer = new OpenLayers.Layer.Google(
409
					        "Google Hybrid",
410
					        {type: G_HYBRID_MAP, 'sphericalMercator': true}
411
					    );
412
			break;
413

    
414
			case 'veroad':
415
				baseLayer = new OpenLayers.Layer.VirtualEarth(
416
					        "Virtual Earth Roads",
417
					        {'type': VEMapStyle.Road, 'sphericalMercator': true}
418
					    );
419
			break;
420

    
421
			case 'veaer':
422
				baseLayer = new OpenLayers.Layer.VirtualEarth(
423
					        "Virtual Earth Aerial",
424
					        {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
425
					    );
426
			break;
427

    
428
			case 'vehyb':
429
				baseLayer = new OpenLayers.Layer.VirtualEarth(
430
					        "Virtual Earth Hybrid",
431
					        {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
432
					    );
433
			break;
434

    
435
			case 'yahoo':
436
				baseLayer = new OpenLayers.Layer.Yahoo(
437
					        "Yahoo Street",
438
					        {'sphericalMercator': true}
439
					    );
440
			break;
441

    
442
			case 'yahoosat':
443
				baseLayer = new OpenLayers.Layer.Yahoo(
444
					        "Yahoo Satellite",
445
					        {'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
446
					    );
447
			break;
448

    
449
			case 'yahoohyb':
450
				 rebaseLayer = new OpenLayers.Layer.Yahoo(
451
					        "Yahoo Hybrid",
452
					        {'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
453
					    );
454
			break;
455

    
456
			case 'mapnik':
457
				baseLayer = new OpenLayers.Layer.OSM();
458
			break;
459

    
460
			case 'oam':
461
				baseLayer = new OpenLayers.Layer.XYZ(
462
				        "OpenAerialMap",
463
				        "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
464
				        {
465
				            sphericalMercator: true
466
				        }
467
				    );
468
			break;
469

    
470
			case 'osmarender':
471
				baseLayer = new OpenLayers.Layer.OSM(
472
				        "OpenStreetMap (Tiles@Home)",
473
				        "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
474
				       );
475
			break;
476

    
477
		};
478

    
479
		return baseLayer;
480
	};
481

    
482
}
483

    
484

    
485
(function($){
486

    
487
	$.fn.cdm_openlayers_map = function(mapserverBaseUrl, options) {
488

    
489
		var opts = $.extend({},$.fn.cdm_openlayers_map.defaults, options);
490

    
491
		return this.each(function(){
492

    
493
			var openlayers_map = new CdmOpenlayersMap($(this), mapserverBaseUrl, opts);
494
			openlayers_map.init();
495

    
496
	 	}); // END each
497

    
498
	}; // END cdm_openlayers_map
499

    
500
})(jQuery);
501

    
502

    
503
$.fn.cdm_openlayers_map.defaults = {  // set up default options
504
		legendPosition:  null,			// 1,2,3,4,5,6 = display a legend in the corner specified by the number
505
		displayWidth: 400,
506
		distributionOpacity: 0.75,
507
		legendOpacity: 0.75,
508
		boundingBox: null,
509
		showLayerSwitcher: false,
510
		baseLayerNames: ["osgeo_vmap0"],
511
		defaultBaseLayerName: 'osgeo_vmap0',
512
		maxZoom: 4,
513
		minZoom: 0
514
};
515

    
(11-11/11)