Lähdekoodi sivulle Widget:Ol3VesiensuojeluyhdistysMap

<includeonly>
    	
	<link rel="stylesheet" href="/scripts/ol3/ol.css" type="text/css">
    	<script src="https://cdnjs.cloudflare.com/polyfill/v3/polyfill.min.js"></script>
	<script src="/scripts/ol3/ol.js"></script>
	<script src="/scripts/proj4js/dist/proj4.js"></script>
	
	<script src="/scripts/jwol3js/jwol3.js"></script>

	<link rel="stylesheet" href="/scripts/ol-ext/dist/ol-ext.min.css" type="text/css">
	<script src="/scripts/ol-ext/dist/ol-ext.min.js"></script>
	<link rel="stylesheet" href="/scripts/ol-ext/overlay/popupoverlay.css" />
	<link rel="stylesheet" href="/scripts/ol-ext/overlay/popupoverlay.anim.css" />

	<div class="jwMapContainer" style="height:<!--{$height|default:500|escape:'html'}-->px" >
		<div style="height: 100%; width: 100%; position: relative;" id="<!--{$id|default:CommonObsMap|escape:'html'}-->_container"></div>
	</div>
	
	<script type="text/javascript">
		//global memory for widget instance			
		var <!--{$id|default:CommonObsMap|escape:'html'}-->_memo =  { 'SitesO': {}, 'TypesO': {}, 'obsTypeToShow': '' };

		function <!--{$id|default:CommonObsMap|escape:'html'}-->_jQueryTest() {	
			if ( typeof window.jQuery == 'undefined' ) {
    				setTimeout( function(){ <!--{$id|default:CommonObsMap|escape:'html'}-->_jQueryTest() }, 300);
  			} else {
  				<!--{$id|default:CommonObsMap|escape:'html'}-->_func();
  			}
		}

		setTimeout( function(){ <!--{$id|default:CommonObsMap|escape:'html'}-->_jQueryTest() }, 300);

		function <!--{$id|default:CommonObsMap|escape:'html'}-->_func() {

			//widget globals
			var memo = <!--{$id|default:CommonObsMap|escape:'html'}-->_memo;
			memo.g = { 'sizeFactor': 1.5, 'lang': '<!--{$lang|default:fi|escape:'html'}-->' };

			var lon = parseFloat('<!--{$lon|default:25|escape:'html'}-->');
			var lat = parseFloat('<!--{$lat|default:65|escape:'html'}-->');
			var zoom = parseInt('<!--{$zoom|default:4|escape:'html'}-->');
			var lakes = '<!--{$lakes|escape:'html'}-->';
			var lakeArr = lakes.split('¤!')[0].split('¤');				
			var jarvet = '<!--{$jarvet|escape:'html'}-->';
			var jarviArr = jarvet.split('¤!')[0].split('¤');				
			var drainages = '<!--{$drainages|escape:'html'}-->';
			var drainageArr = drainages.split('¤!')[0].split('¤');				

			var base = '<!--{$base|default:mmlTausta|escape:'html'}-->';

			var layersArr = [];

			if ( drainageArr.length > 0 ) {
				searchArr = [];
				for ( var d in drainageArr ) {					
					searchArr.push("Jako3Tunnus LIKE '" + drainageArr[ d ] + "%25'");								
				}

				layersArr.push(	{ 
					'type': 'drainage', 
					'name': 'Vesistöalue', 
					'search': searchArr.join( ' OR ' ), 
					'opacitySlider': true,
					'showLabels': false,
					'selectable': true,
					'zoomToExtent': true
				} );
			}

			if ( lakeArr.length > 0 ) {
				searchArr = [];
				for ( var l in lakeArr ) {					
					searchArr.push("JarviTunnus='" + lakeArr[ l ] + "'");								
				}

				layersArr.push( { 
					'id': 'lakes',
					'type': 'lake', 
					'name': 'Järvet', 						
					'search': searchArr.join( ' OR ' ), 
					'selectable': true,
					//'fillColor': 'rgba( 255, 255, 255, 0.1 )',
					//'strokeWidth': 1,
					//'showLabels': true,
					//'labelField': 'JarviTunnus',
					//'labelMaxResolution': 
					'zoomToExtent': true,
					'bbox': false,
				});
			}

			if ( jarviArr.length > 0 ) {
				layersArr.push({ 
					'type': 'sitesNobses', 
					'name': 'Paikat ja havainnot', 
					'siteSearch': "[[Alue::" + jarviArr.join( '||' ) + "]]", 
					'obsSearch': "[[Alue::" + jarviArr.join( '||' ) + "]][[obsCode::ice||snow||temp||alg]]", 
					'obsDays': 10,
					'attribution': 'Paikat ja havainnot: Järvi-meriwiki',
					'opacitySlider': false,
					'selectable': true,
					'zoomToExtent': false
				});
			}

			// do the base map with these settings
			var map = ol3_jwMakeMap({ 
				'container': '<!--{$id|default:CommonObsMap|escape:'html'}-->_container', 
				'base': base, 
				'lon':  lon, 
				'lat': lat, 
				'zoom': zoom, 
				'layers': layersArr,
				'memo': memo
			});

		}

	</script>

</includeonly>