Lähdekoodi sivulle Widget:Ol3TestMap

<includeonly>
    	
	<link rel="stylesheet" href="/scripts/ol3/ol.css" type="text/css">
    	<script src="//cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></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="https://viglino.github.io/ol-ext/dist/ol-ext.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 = jQuery('.jwZoom').first().val();
			if (!zoom) { zoom = <!--{$zoom|default:5|escape:'html'}-->; }
			
			var base = '<!--{$base|default:osm|escape:'html'}-->';

			//var lon = jQuery('.jwLon').first().val().replace(',', ',');
			//var lat = jQuery('.jwLat').first().val().replace(',', ',');
			var parent = jQuery('.jwParent').first().val();
			
			parent='Välijärvi (74.021.1.051)';
			var newSite = true;
			
			function gotCoords(request) {
			
				//console.log(request);
				
				var layersArr = [];
				
				for (var r in request.query.results) {
				
					var body = request.query.results[r];
				
					if (typeof body.printouts['Järvinumero'][0] != 'undefined') {
						layersArr.push(	{ 
							'type': 'lake', 
							'name': body.fulltext, 
							'search': "JarviTunnus = '" + body.printouts['Järvinumero'][0] + "'", 
							'opacitySlider': true,
							'showLabels': false,
							'selectable': false,
							'zoomToExtent': newSite
						} );
						layersArr.push( { 
							'type': 'sitesNobses', 
							'name': 'Paikat ja havainnot',
							'siteSearch': '[[Alue::' + parent + ']]',
							'obsSearch': '', 
							//'obsDays': 10,
							//'attribution': 'Havainnot: Järvi-meriwiki',
							'opacitySlider': false,
							'selectable': true,
							'zoomToExtent': false
						});
						
					} else if (typeof body.printouts['Vesistöaluenumero'][0] != 'undefined') {
						layersArr.push(	{ 
							'type': 'drainage', 
							'name': body.fulltext, 
							'search': "Jako3Tunnus = '" + body.printouts['Vesistöaluenumero'][0] + "'", 
							'opacitySlider': true,
							'showLabels': false,
							'selectable': false,
							'zoomToExtent': newSite
						} );
						
					} else if (typeof body.printouts['VPDTunnus'][0] != 'undefined') {
						layersArr.push(	{ 
							'type': 'vpd', 
							'name': body.fulltext, 
							'search': "VPDTunnus = '" + body.printouts['VPDTunnus'][0] + "'", 
							'opacitySlider': true,
							'showLabels': false,
							'selectable': false,
							'zoomToExtent': newSite
						} );
					}
				
					break;
				}
				
				layersArr.push( { 'type': 'geolocX', 'name': 'Sijaintisi', 'show': true, 'center': false, 'zoom': 12, 'track': false, 'button': true } );
				
				// 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
				});

				target = new ol.control.Target();
				map.addControl(target);
				
				// set mousewheelzoom not to change center
				var mouseZoom = new ol.interaction.MouseWheelZoom( { useAnchor: false } );
 				map.addInteraction(mouseZoom);
 				
 				var drawSource = new ol.source.Vector();
				var drawLayer = new ol.layer.Vector({
					name: 'Alue',
					source: drawSource
				});
				map.addLayer(drawLayer);
				
				// Edit control bar 
				var editbar = new ol.control.Bar({
					toggleOne: true,
					//group: true
				});
				map.addControl(editbar);
				
				var selectCtrl = new ol.control.Toggle({
					html: '<i class="fa fa-hand-pointer-o"></i>',
					title: "Select",
					interaction: new ol.interaction.Select (),
					//bar: sbar,
					autoActivate:true,
					active:true
				});

				// Add editing tools
				var pedit = new ol.control.Toggle({
					html: '<img src="//www.jarviwiki.fi/dynpm/ol/jw_ol_drawPoint_24px.png">', //'<i class="fa fa-map-marker" ></i>',
					title: 'Point',
					interaction: new ol.interaction.Draw({
						type: 'Point',
						source: drawSource
					})
				});

				var ledit = new ol.control.Toggle({
					html: '<i class="fa fa-share-alt" ></i>',
					title: 'LineString',
					interaction: new ol.interaction.Draw({
						type: 'LineString',
						source: drawSource,
						// Count inserted points
						geometryFunction: function(coordinates, geometry) {
							if (geometry) geometry.setCoordinates(coordinates);
							else geometry = new ol.geom.LineString(coordinates);
							this.nbpts = geometry.getCoordinates().length;
							return geometry;
						}
					}),
				});

				var fedit = new ol.control.Toggle({
					html: '<img src="//www.jarviwiki.fi/dynpm/ol/jw_ol_drawPolygon_24px.png">', //'<i class="fa fa-bookmark-o fa-rotate-270" ></i>',
					title: 'Polygon',
					interaction: new ol.interaction.Draw({
						type: 'Polygon',
						source: drawSource,
						// Count inserted points
						geometryFunction: function(coordinates, geometry) {
							this.nbpts = coordinates[0].length;
							if (geometry) geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
							else geometry = new ol.geom.Polygon(coordinates);
							return geometry;
						}
					}),						
				});
				
				 				var drawSelect = new ol.interaction.Select();
  				map.addInteraction(drawSelect);
  				
				var medit = new ol.control.Toggle({
					html: '<img src="//www.jarviwiki.fi/dynpm/ol/jw_ol_drawEdit_24px.png">', //'<i class="fa fa-bookmark-o fa-rotate-270" ></i>',
					title: 'Edit',
					interaction: new ol.interaction.Modify({
						features: drawSelect.getFeatures(),
						//type: 'Polygon',
						source: drawSource,
						// Count inserted points
						//geometryFunction: function(coordinates, geometry) {
						//	this.nbpts = coordinates[0].length;
						//	if (geometry) geometry.setCoordinates([coordinates[0].concat([coordinates[0][0]])]);
						//	else geometry = new ol.geom.Polygon(coordinates);
						//	return geometry;
						//}
					}),						
				});				

				editbar.addControl ( selectCtrl );
				editbar.addControl ( pedit );
				editbar.addControl ( ledit );
				editbar.addControl ( fedit );
				editbar.addControl ( medit );
				
				jQuery('#jwChosenObsTypeContainer').html('Siirrä ja zoomaa karttaa kunnes risti osoittaa tarkoittamaasi paikkaan');

				map.on('moveend', function() {
				
					var centerLonLat = (ol.proj.transform(map.getView().getCenter(), 'EPSG:3857', 'EPSG:4326'));
					jQuery('.jwLon').val(centerLonLat[0]);
					jQuery('.jwLat').val(centerLonLat[1]);
					jQuery('.jwZoom').val(map.getView().getZoom());
			
				});
				
				map.getLayers().item(0).on('change', function(e) {
							
					var baseLayers = e.target.getLayers(); // map.getLayerGroup().getLayers().item(0).getLayers();
					baseLayers.forEach(function (layer) {
						if (layer.get('visible') == true) {
							var title = (layer.get('title'));
							if (title == 'MML Taustakartta') {
								jQuery('.jwBase').val('MMLTausta');
							} else if (title == 'MML Ortokuva') {
								jQuery('.jwBase').val('MMLOrto');
							} else {
								jQuery('.jwBase').val('osm');
							}
							//console.log(title);
						}
					});
				});
				
			}
						
			if (!!parent) {
				var searchStr = 'action=ask&query=[[' + parent + ']]';
				searchStr += encodeURI('|?KoordPohj|?KoordIta|?KoordPohjMin|?KoordItaMin|?KoordPohjMax|?KoordItaMax|?Zoom|?Järvinumero|?VPDTunnus|?Vesistö|?Vesistöaluenumero|?Luokka');
				searchStr += '&format=json';
			
				jQuery.ajax({
					type: 'POST',
					url: queryApi,
					data: searchStr,
					success: gotCoords,
					dataType: 'jsonp',
					cache: true
				});
			} else {
			
			
			}
			
			


		}


	</script>

</includeonly>