Widget:Ol10RiverMap

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

	<script src="/scripts/proj4js/dist/proj4.js"></script>

	<script src="/scripts/jwol10js/jwol10.js"></script>

	<div class="jwMapContainer" style="height:<!--{$height|default:500px|escape:'html'}-->" >
		<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 page = '<!--{$page|escape:'urlpathinfo'}-->';
			
			function gotCoords(request) {		

				for ( var x in request.query.results ) {  
					var resultItem = request.query.results[x].printouts; break;
				}

				var vpdArr = [];
				for ( var j in resultItem.VPDTunnus ) {
					vpdArr.push( "VPDTunnus='" + resultItem.VPDTunnus[j] + "'" );
				}
				
				var vesalArr = [];
				var vesalIdArr = [];
				vesalArr.push( decodeURI(page) );
				for ( var j in resultItem.Vesistöalue ) {
					vesalArr.push( resultItem.Vesistöalue[j].fulltext );
					vesalIdArr.push( "Jako3Tunnus LIKE '" + resultItem.Vesistöalue[j].fulltext.split( /\(|\)/ )[1]  + "%'" );
				}
				
				var base = 'mmlTausta';
				
				var layersArr = [];

				layersArr.push({ 
					'type': 'anyrest',
					'restUrl': '//paikkatieto.ymparisto.fi/arcgis/rest/services/INSPIRE/SYKE_Hydrografia/MapServer/4/query',
					'name': 'Vesistöalue', 
					'search': vesalIdArr.join( ' OR ' ), 
					'attribution': '<a href="//wwwp2.ymparisto.fi/kayttoehdot.html">Ympäristöhallinnon paikkatietoaineistot</a>',
					'visible': true,
					'fillColor': 'rgba( 0, 0, 255, 0.25 )',
					'strokeWidth': 1,
					'strokeColor': 'rgba( 0, 0, 255, 0.5 )',
					'showLabels': false,
					'selectable': true,
					'zoomToExtent': true
				});

				layersArr.push({ 
					'type': 'anyrest',
					'restUrl': '//paikkatieto.ymparisto.fi/arcgis/rest/services/INSPIRE/SYKE_AlueidenHallintaJaRajoitukset1/MapServer/1/query',
					'name': 'Joki', 
					'search': vpdArr.join( ' OR ' ), 
					'attribution': '<a href="//wwwp2.ymparisto.fi/kayttoehdot.html">Ympäristöhallinnon paikkatietoaineistot</a>',
					'visible': true,
					'fillColor': 'rgba( 255, 0, 0, 0.75 )',
					'strokeWidth': 8,
					'strokeColor': 'rgba( 0, 0, 255, 0.8 )',
					'showLabels': false,
					'selectable': false,
					'zoomToExtent': false
				});
						
console.log( "[[Alue::" + vesalArr.join( '||' ) + "]]" );				
						
				layersArr.push({ 
					'type': 'sitesNobses', 
					'name': 'Paikat ja havainnot', 
					'siteSearch': "[[Alue::" + vesalArr.join( '||' ) + "]]", 
					'obsSearch': "[[Alue::" + vesalArr.join( '||' ) + "]]", 
					'obsDays': 10,
					'attribution': 'Paikat ja havainnot: Järvi-meriwiki',
					'opacitySlider': false,
					'selectable': true,
					'zoomToExtent': false
				});
			
				
				// do the base map with these settings
				var map = jwMakeMap({ 
					'container': '<!--{$id|default:CommonObsMap|escape:'html'}-->_container', 
					'base': base, 
					'lon':  65, 
					'lat': 25, 
					'zoom': 6, 
					'layers': layersArr,
					'memo': memo
				});

			
			}
			
			var searchStr = 'action=ask&query=[[' + page + ']]';
			searchStr += encodeURI('|?VPDTunnus|?Vesistöalue');
			searchStr += '&format=json';
					
			jQuery.ajax({
				type: 'GET',
				url: queryApi,
				data: searchStr,
				success: gotCoords,
				dataType: 'jsonp',
			       	cache: true
			});
			
		}


	</script>

</includeonly>