Project

General

Profile

Download (14.2 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:4326
350
				 */
351
				baseLayer = new OpenLayers.Layer.WMS(
352
			        "OpenLayers World",
353
			        "http://vmap0.tiles.osgeo.org/wms/vmap0",
354
			        {layers: 'basic', format:"png"},
355
			        {
356
						maxExtent: mapExtend_4326,
357
						isBaseLayer: true,
358
						displayInLayerSwitcher: true
359
					}
360
				);
361
			break;
362
			
363
			case 'edit-etopo1':
364
				baseLayer = new OpenLayers.Layer.WMS(
365
			        "ETOPO1 Global Relief Model",
366
			        "http://edit.br.fgov.be:8080/geoserver/wms",
367
			        {layers: 'topp:color_etopo1_ice_full', format:"image/png"},
368
			        {
369
						maxExtent: mapExtend_900913,
370
						isBaseLayer: true,
371
						displayInLayerSwitcher: true
372
					}
373
				);
374
			break;
375
			
376
			case 'edit-vmap0_world_basic':
377
				baseLayer = new OpenLayers.Layer.WMS(
378
			        "EDIT Vmap0",
379
			        "http://edit.br.fgov.be:8080/geoserver/wms",
380
			        {layers: 'vmap0_world_basic', format:"image/png"},
381
			        {
382
						maxExtent: mapExtend_900913,
383
						isBaseLayer: true,
384
						displayInLayerSwitcher: true
385
					}
386
				);
387
			break;
388
			
389
			// create Google Mercator layers
390
			case 'gmap':
391
				baseLayer = new OpenLayers.Layer.Google(
392
					        "Google Streets",
393
					        {'sphericalMercator': true}
394
					    );
395
			break;
396
			
397
	
398
			case 'gsat':
399
				baseLayer = new OpenLayers.Layer.Google(
400
					        "Google Satellite",
401
					        {type: G_SATELLITE_MAP, 'sphericalMercator': true, numZoomLevels: 22}
402
					    );
403
			break;
404
		   
405
			case 'ghyb':
406
				baseLayer = new OpenLayers.Layer.Google(
407
					        "Google Hybrid",
408
					        {type: G_HYBRID_MAP, 'sphericalMercator': true}
409
					    );
410
			break;
411
			
412
			case 'veroad':
413
				baseLayer = new OpenLayers.Layer.VirtualEarth(
414
					        "Virtual Earth Roads",
415
					        {'type': VEMapStyle.Road, 'sphericalMercator': true}
416
					    );
417
			break;
418
			
419
			case 'veaer':
420
				baseLayer = new OpenLayers.Layer.VirtualEarth(
421
					        "Virtual Earth Aerial",
422
					        {'type': VEMapStyle.Aerial, 'sphericalMercator': true}
423
					    );
424
			break;
425
			
426
			case 'vehyb':
427
				baseLayer = new OpenLayers.Layer.VirtualEarth(
428
					        "Virtual Earth Hybrid",
429
					        {'type': VEMapStyle.Hybrid, 'sphericalMercator': true}
430
					    );
431
			break;
432
			
433
			case 'yahoo':
434
				baseLayer = new OpenLayers.Layer.Yahoo(
435
					        "Yahoo Street",
436
					        {'sphericalMercator': true}
437
					    );
438
			break;
439
			
440
			case 'yahoosat':
441
				baseLayer = new OpenLayers.Layer.Yahoo(
442
					        "Yahoo Satellite",
443
					        {'type': YAHOO_MAP_SAT, 'sphericalMercator': true}
444
					    );
445
			break;
446
			
447
			case 'yahoohyb':
448
				 rebaseLayer = new OpenLayers.Layer.Yahoo(
449
					        "Yahoo Hybrid",
450
					        {'type': YAHOO_MAP_HYB, 'sphericalMercator': true}
451
					    );
452
			break;
453
			
454
			case 'mapnik':
455
				baseLayer = new OpenLayers.Layer.OSM();
456
			break;
457
			
458
			case 'oam':
459
				baseLayer = new OpenLayers.Layer.XYZ(
460
				        "OpenAerialMap",
461
				        "http://tile.openaerialmap.org/tiles/1.0.0/openaerialmap-900913/${z}/${x}/${y}.png",
462
				        {
463
				            sphericalMercator: true
464
				        }
465
				    );
466
			break;
467
	
468
			case 'osmarender':
469
				baseLayer = new OpenLayers.Layer.OSM(
470
				        "OpenStreetMap (Tiles@Home)",
471
				        "http://tah.openstreetmap.org/Tiles/tile/${z}/${x}/${y}.png"
472
				       );
473
			break;
474
			
475
		};
476
		
477
		return baseLayer;
478
	};
479
	
480
}
481

    
482

    
483
(function($){
484

    
485
	$.fn.cdm_openlayers_map = function(mapserverBaseUrl, options) {
486
		
487
		var opts = $.extend({},$.fn.cdm_openlayers_map.defaults, options);
488
		
489
		return this.each(function(){
490
			
491
			var openlayers_map = new CdmOpenlayersMap($(this), mapserverBaseUrl, opts);			
492
			openlayers_map.init();
493

    
494
	 	}); // END each
495
		
496
	}; // END cdm_openlayers_map
497
	
498
})(jQuery);
499

    
500

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

    
(11-11/11)