simstadt_openlayers.js

var regionChooser = (function(){
	var publicScope = {};
	var fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1;
	//NOTE: Could do without jQuery
	var dataPanel = $('#dataPanel');
	var wgs84Sphere = new ol.Sphere(6378137);
	var gmlId = 0;
	
	if (fromJavaFX){
		$("html").addClass("wait");
	}

    // Hash function. For testing purposes in browser (no Feature ID is available)
	const cyrb53 = (str, seed = 0) => {
	  let h1 = 0xdeadbeef ^ seed,
		h2 = 0x41c6ce57 ^ seed;
	  for (let i = 0, ch; i < str.length; i++) {
		ch = str.charCodeAt(i);
		h1 = Math.imul(h1 ^ ch, 2654435761);
		h2 = Math.imul(h2 ^ ch, 1597334677);
	  }
	  
	  h1 = Math.imul(h1 ^ (h1 >>> 16), 2246822507) ^ Math.imul(h2 ^ (h2 >>> 13), 3266489909);
	  h2 = Math.imul(h2 ^ (h2 >>> 16), 2246822507) ^ Math.imul(h1 ^ (h1 >>> 13), 3266489909);
	  
	  return 4294967296 * (2097151 & h2) + (h1 >>> 0);
	};

	var osm_layer = new ol.layer.Tile({
		source: new ol.source.OSM()
	});

	function read_kml(url){
		return new ol.source.KML({
			projection : ol.proj.get('EPSG:3857'),
			url : url,
			extractAttributes : false,
			extractStyles : false
		});
	}
	
	var kml_source = read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml');

	function polygon_style(color, alpha) {
		return new ol.style.Style({
			fill : new ol.style.Fill({
				color : 'rgba(255, 255, 255,' + alpha + ')'
			}),
			stroke : new ol.style.Stroke({
				color : color,
				width : 2,
				lineDash : [ 5, 10 ]
			}),
		});
	}

	var kml_layer = new ol.layer.Vector({
		source : kml_source,
		style : polygon_style('#447744', 0.2)
	});

	var intersections = new ol.source.Vector();

	var intersections_layer = new ol.layer.Vector({
		source : intersections,
		style : new ol.style.Style({
			fill : new ol.style.Fill({
				color : 'rgba(255, 155, 51, 0.2)'
			})
		})
	});

	publicScope.addCityGmlHull = function(kmlString) {
		options = {featureProjection: ol.proj.get('EPSG:3857')};
		feature = kmlFormat.readFeature(kmlString, options);
		feature.setId(gmlId++);
		kml_source.addFeature(feature);
		dataPanel.append('.');
		srsName = feature.get("srsName") || "EPSG:31467";
		if (proj4.defs(srsName) === undefined){
			console.warning(srsName + " isn't defined by Proj4js!")
		}
	};
	
	var map = new ol.Map({
		target : 'map',
		layers : [ osm_layer, kml_layer, intersections_layer ],
		interactions : ol.interaction.defaults({
			keyboard : true
		})
	});

	var geoJsonFormat = new ol.format.GeoJSON();
	var kmlFormat = new ol.format.KML({extractStyles: false});

	kml_layer.addEventListener("change", function() {
		map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
	});

	function updateGMLPolygons() {
		kml_source.forEachFeature(function(feature) {
			feature["geoJSON"] = geoJsonFormat.writeFeatureObject(feature);
			feature["area"] = feature.getGeometry().getArea();
			feature["project"] = feature.get("project");
			feature["name"] = feature.get("name");
			feature["source"] = "CityGML";
		});
	}

	// The features are not added to a regular vector layer/source,
	// but to a feature overlay which holds a collection of features.
	// This collection is passed to the modify and also the draw
	// interaction, so that both can add or modify features.
	var featureOverlay = new ol.FeatureOverlay({
		style : new ol.style.Style({
			fill : new ol.style.Fill({
				color : 'rgba(255, 155, 51, 0.5)'
			}),
			stroke : new ol.style.Stroke({
				color : '#ffcc33',
				width : 4
			}),
			image : new ol.style.Circle({
				radius : 5,
				fill : new ol.style.Fill({
					color : '#ffcc33'
				})
			})
		})
	});
	featureOverlay.setMap(map);

	//TODO: Rename to Javascript naming convention (CamelCase).
	var selected_features = featureOverlay.getFeatures();
	selected_features.on('add', function(event) {
		var feature = event.element;
		feature.on("change", function() {
			displayInfo();
		});
	});

	var modify = new ol.interaction.Modify({
		features : featureOverlay.getFeatures(),
		// the SHIFT key must be pressed to delete vertices, so
		// that new vertices can be drawn at the same position
		// of existing vertices
		deleteCondition : function(event) {
			return ol.events.condition.shiftKeyOnly(event) && ol.events.condition.singleClick(event);
		}
	});
	map.addInteraction(modify);

	var draw = new ol.interaction.Draw({
		features : featureOverlay.getFeatures(),
		type : 'Polygon'
	});
	map.addInteraction(draw);

	var sketch;

	draw.on('drawstart', function(evt) {
		sketch = evt.feature;
		updateGMLPolygons();
	});
	var sourceProj = map.getView().getProjection();
	
	function showLinkToDownload(feature, jsonIntersection, polygonArea){
		var intersection = geoJsonFormat.readFeature(jsonIntersection);
		var intersectionArea = intersection.getGeometry().getArea();
		var citygml_percentage = Math.round(intersectionArea / feature["area"] * 100);
		var sketch_percentage = Math.round(intersectionArea / polygonArea * 100);
		intersections.addFeature(intersection);
		var link = '<li>'
		// TODO: Add checkbox + label + 
		// TODO: Add submit.
        // TODO: If possible, highlight the corresponding polygon when hovering above a name.
        console.log("Feature name : "+ feature["name"]);
        console.log("Feature ID : "+ feature.getId());
		if (fromJavaFX) {
			link += '<input type="checkbox" id="check_' + feature.getId() + '" class="select_citygml"><label for="check_' + feature.getId() + '">' +  feature['name'] + '</label>';
		} else {
            h = cyrb53(feature['name']);
			link += '<input type="checkbox" id="check_' + h+ '" class="select_citygml"><label for="check_' + h + '">' +  feature['name'] + '</label>';
		}

		link += " (" + citygml_percentage + "%";
		if (sketch_percentage == 100) {
			link += ", all inside";
		}
		dataPanel.append(link + ")\n");
	}
	
	function findIntersection(feature, polygon) {
		try {
			return turf.intersect(polygon, feature["geoJSON"]);
		} catch (err) {
			console.log(feature.get('name') + " - " + err);
		}
	}

	function findIntersections() {
		var polygon = geoJsonFormat.writeFeatureObject(sketch);
		var polygonArea = sketch.getGeometry().getArea();
		var intersection_found = false;
		intersections.clear();
		//NOTE: getFeatures seems to not be sorted anymore. :-/
		features_by_project = groupBy(kml_source.getFeatures(), "project");
		
		Object.keys(features_by_project).forEach(function(project) {
		    features = features_by_project[project];
		    features_and_intersections = features.map(f=> [f, findIntersection(f,polygon)]).filter(l => l[1] !== undefined);
		    if (features_and_intersections.length > 0){
		    	intersection_found = true;
				dataPanel.append("<h2 class='info'>" + project);
		    	features_and_intersections.forEach(l => showLinkToDownload(l[0], l[1], polygonArea));
		    }
		});
		
		if (intersection_found) {
			document.getElementById("download").style.visibility = 'visible';
		}
		else {
			document.getElementById("download").style.visibility = 'hidden';
			dataPanel.append("No intersection found with any CityGML file.<br/>\n");
		}
	}

	publicScope.display = function(text){
		dataPanel.append(text + "<br/>\n");
	}
	
	publicScope.downloadRegionFromCityGML = function(i) {
		// TODO: Disable all links
		// TODO: DRY
		var feature = kml_source.getFeatureById(i);
		// Waiting 100ms in order to let the cursor change
		setTimeout(function() {
			var start = new Date().getTime();
			var srsName = feature.get("srsName") || "EPSG:31467";
			if (proj4.defs(srsName)){
				$("html").addClass("wait");
				console.log("Selected region is written in " + srsName + " coordinate system.");
				try {
					fxapp.downloadRegionFromCityGML(sketchAsWKT(srsName), feature.get("project"), feature.get("name"), srsName);
					dataPanel.append("<h2 class='ok'>Done!</h2><br/>\n");
				} catch (e) {
					dataPanel.append("<h2 class='error'>Some problem occured!</h2><br/>\n");
				}
				var end = new Date().getTime();
				var time = end - start;
				console.log('Download Execution time: ' + (time / 1000).toFixed(3) + 's');
				setTimeout(function() {
					$("html").removeClass("wait");
				}, 100);
			} else {
				var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
				console.log(msg);
				dataPanel.append(msg + "<br/>\n");
			}
		}, 100);
	}

	function displayInfo() {
		dataPanel.empty();
		var geom = /** @type {ol.geom.Polygon} */
		(sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'));
		var coordinates = geom.getLinearRing(0).getCoordinates();
		var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
		var coords = geom.getLinearRing(0).getCoordinates();
		if (!fromJavaFX) {
			var wgs84_coords = "";
			var n = coords.length;
			for (var i = 0; i < n; i++) {
				var wgs84_coord = coords[i];
				wgs84_coords += "(" + wgs84_coord[1] + "," + wgs84_coord[0] + ")<br/>";

			}
			dataPanel.append("WGS84 Coordinates<br/>");
			dataPanel.append(wgs84_coords + "<br/>\n");
		}
		dataPanel.append("<h3 class='clean'>Area : " + (area / 10000).toFixed(1) + " ha\n");
		dataPanel.append('<button type="button" onclick="regionChooser.clickety_click()" id="download" style="visibility:hidden">Download Region</button>');
		dataPanel.append('<br/>\n');
		findIntersections();
	}

	draw.on('drawend', function() {
		displayInfo();
		draw.setActive(false);
	});
	
	// Pressing ESCAPE or DELETE resets the drawing.
	// With OpenLayers 3.9, draw_interaction.removeLastPoint(); might be better.
	document.addEventListener('keydown', function(e) {
		if (e.which == 27 || e.which == 46){
			resetDrawing();
		}
	});

	function resetDrawing(){
		console.log("Reset drawing");
		try {
			draw.finishDrawing();
		} finally {
			displayHelp();
			$("html").removeClass("wait");
			draw.setActive(true);
			featureOverlay.getFeatures().clear();
			intersections.clear();
			focusOnMap();
		}
	}
	
	function sketchAsWKT(srsName) {
		srsName = (typeof srsName === 'undefined') ? 'EPSG:4326' : srsName;
		var wktFormat = new ol.format.WKT();
		return wktFormat.writeFeature(sketch, {
			dataProjection : ol.proj.get(srsName),
			featureProjection : ol.proj.get('EPSG:3857')
		});
	}
	
	function focusOnMap() {
		$('#map').focus();
	}
	
	var fxapp = undefined;
	
	publicScope.setFxApp = function(app){
		fxapp = app;
		console.log = function(message){
			fxapp.log(message);
		}
		
		console.warning = function(message){
			fxapp.warning(message);
		}
	}
	
	groupBy = function(xs, key) {
		  return xs.reduce(function(rv, x) {
			(rv[x[key]] = rv[x[key]] || []).push(x);
			return rv;
		  }, {});
		};
	
	function displayHelp(){
		dataPanel.empty();
		dataPanel.append("<h2 class='info'>Welcome to Region Chooser!<br><br>\n");
		dataPanel.append("You can draw a polygon on the map by clicking.<br>\n");
		dataPanel.append("You can add a new point to an existing edge by clicking and dragging.<br>\n");
		dataPanel.append("You can remove a point with SHIFT + clicking.<br>\n");
		dataPanel.append("You can cancel drawing with ESC or DEL.<br><br>\n");
		dataPanel.append("After drawing a polygon which intersects with a GML file, you can download the corresponding part by clicking on the filename.<br>\n");
	}

	// Executed by JavaFX when whole page is loaded.
	publicScope.ready = function() {
		updateGMLPolygons();
		displayHelp();
		$("html").removeClass("wait");
		console.log("READY!");
	}
	
	publicScope.clickety_click = function() {
		console.log("You clicked pretty well");
		var checkedBoxes = Array.from(document.querySelectorAll("input.select_citygml")).filter(x => x.checked);
		if (checkedBoxes.length === 0){
			console.log("You should select at least one citygml, though.");
		} else{
			checkedBoxes.forEach(x => {
				console.log("Nice! You checked Citygml " + x.id)
			});
		}
	}

	focusOnMap();
	//var regionChooser = publicScope; //NOTE: In order to open closure. For debugging
	return publicScope;
})();