simstadt_openlayers.js

const styles = {};

styles.original = utils.polygon_style('#447744', 0.2);
styles.highlighted = utils.polygon_style("#ff44a2", 0.7);
styles.selected = utils.polygon_style("#ffff00", 0.8);

const regionChooser = (function(){
	//TODO: Somehow split in classes. This file is getting too big and mixed
	var publicScope = {};
	const fromJavaFX = navigator.userAgent.indexOf('JavaFX') !== -1;
	const dataPanel = $('#dataPanel');
	const wgs84Sphere = new ol.Sphere(6378137);
	var features_by_project;

	publicScope.init = function(){
		//NOTE: Only called from JavaFX. At startup, or when Repo has been changed.
		kml_source.clear();
		document.getElementById("select_repository").style.visibility = "visible";
	}

	if (fromJavaFX){
		document.documentElement.className = 'wait';
	}

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

	var kml_source = utils.read_kml(fromJavaFX ? undefined : 'data/citygml_hulls.kml');

	var kml_layer = new ol.layer.Vector({
		source : kml_source,
		style : styles.original
	});

	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);
		kml_source.addFeature(feature);
		dataPanel.append('.');
		srsName = feature.get("srsName");
		if (proj4.defs(srsName) === undefined){
			console.warn(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
		})
	});

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

	kml_source.addEventListener("addfeature", 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";
			feature["status"] = "original";
		});

		var features = Array.from(kml_source.getFeatures());
		// Sort projects
		features.sort((a, b) => a.project.localeCompare(b.project));
		features_by_project = utils.groupBy(features, "project");
		// Sort CityGMLs inside each project
		Object.values(features_by_project).forEach(features => features.sort((a, b) => a.name.localeCompare(b.name)));
	}

	// 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 drawnLayer = 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'
				})
			})
		})
	});
	drawnLayer.setMap(map);

	drawnLayer.getFeatures().on('add', function(event) {
		var feature = event.element;
		feature.on("change", function() {
			displayInfo();
		});
	});

	var modify = new ol.interaction.Modify({
		features : drawnLayer.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 : drawnLayer.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);

		li = document.createElement('li');
		li.feature = feature;

		li.onmouseover = function(){ regionChooser.highlightPolygon(this.feature) };
		li.onmouseout = function(){ regionChooser.resetHighlight(this.feature) };

		let label = li.appendChild(document.createElement('label'));
		var text = feature.name;

		let checkbox = document.createElement('input');
		checkbox.type = 'checkbox'
		checkbox.className = "select_citygml";
		checkbox.feature = feature;
		checkbox.setAttribute('onclick', "regionChooser.isDownloadPossible()");

		text += " (" + citygml_percentage + "%";
		if (sketch_percentage == 100) {
			text += ", all inside";
		}

		label.textContent = text + ")\n";
		label.prepend(checkbox);

		// append to DOM element, not to jQuery object
		dataPanel[0].appendChild(li);
	}

	publicScope.highlightPolygon = function(feature) {
		feature.setStyle(styles.highlighted);
	}

	publicScope.resetHighlight = function(feature) {
		refreshStyle(feature);
	}

	refreshStyle = function(feature, status){
		if (status){
			feature.status = status;
		}
		feature.setStyle(styles[feature.status]);
	}

	publicScope.isDownloadPossible = function(){
		kml_source.getFeatures().forEach(f => refreshStyle(f, "original"));

		selectedFeatures = getSelectedGMLs();

		selectedFeatures.forEach(f => refreshStyle(f, "selected"));

		document.getElementById("download_region_button").disabled = (selectedFeatures.length == 0);
	}

	function getSelectedGMLs(){
		return Array.from(document.querySelectorAll("input.select_citygml")).filter(c => c.checked).map(c => c.feature);
	}

	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();

		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_region").style.visibility = 'visible';
		}
		else {
			document.getElementById("download_region").style.visibility = 'hidden';
			dataPanel.append("No intersection found with any CityGML file.<br/>\n");
		}
	}

	publicScope.display = function(text){
		dataPanel.append(text + "<br/>\n");
	}

	publicScope.downloadStart = function(){
		document.getElementById("download_region_button").disabled = true;
		document.documentElement.className = 'wait';
		dataPanel.prepend("<h2 id='download_start' class='ok'>Extracting region...</h2><br/>\n");
	}

	publicScope.downloadFinished = function(count){
		document.documentElement.className = ''; // Stop waiting
		document.getElementById("download_start").remove();
		if (count > 0){
			dataPanel.prepend("<h2 class='ok'>Done! (" + count + " buildings found) </h2><br/>\n");
		} else {
			dataPanel.prepend("<h2 class='error'>No building has been found in this region</h2><br/>\n");
		}
		var button = document.getElementById("download_region_button");
		if (button){ // Region might have been modified since download start
			button.disabled = false;
		}
	}

	publicScope.downloadFromSelectedCityGMLs = function() {
		var features = getSelectedGMLs();
		var project = features[0].get("project");
		var srsName = features[0].get("srsName");

		if (!features.every( f => f.get("project") === project)){
			dataPanel.prepend("<h2 class='error'>Sorry, the CityGML files should all belong to the same project.</h2><br/>\n");
			return;
		}

		if (!features.every( f => f.get("srsName") === srsName)){
			dataPanel.prepend("<h2 class='error'>Sorry, the CityGML files should all be written with the same coordinate system.</h2><br/>\n");
		}

		var citygmlNames = features.map(f => f.get("name"));
		if (proj4.defs(srsName)){
			console.log("Selected region is written in " + srsName + " coordinate system.");
			fxapp.downloadRegionFromCityGMLs(sketchAsWKT(srsName), project, citygmlNames.join(";"), srsName);
		} else {
			var msg = "ERROR : Unknown coordinate system : \"" + srsName + "\". Cannot extract any region";
			console.log(msg);
			dataPanel.append(msg + "<br/>\n");
		}
	}

	function displayInfo() {
		dataPanel.empty();
		var geom = sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326');
		var coordinates = geom.getLinearRing(0).getCoordinates();
		var area = Math.abs(wgs84Sphere.geodesicArea(coordinates));
		//NOTE: Could show m², ha or km² depending on magnitude
		dataPanel.append("<h3 class='clean'>Area : " + (area / 10000).toFixed(1) + " ha\n");
		dataPanel.append('<div style="visibility:hidden" id="download_region">' +
			'<button type="button" onclick="regionChooser.downloadFromSelectedCityGMLs()" id="download_region_button" disabled>Download Region</button><br/>\n' +
			'<a href="#" onclick="regionChooser.selectAllOrNone(true);">(Select All)</a>\n' +
			'<a href="#" onclick="regionChooser.selectAllOrNone(false);">(Select None)</a>\n'+
			'</div>\n');
		findIntersections();
		dataPanel.append('<button type="button" onclick="regionChooser.copyCoordinatesToClipboard()" id="get_wgs84" style="position:fixed; bottom:0;">Copy coordinates</button><br/>\n')
	}

	draw.on('drawend', function() {
		displayInfo();
		draw.setActive(false);
	});

	// With OpenLayers 3.9, draw_interaction.removeLastPoint(); might be better.
	document.addEventListener('keydown', function(e) {
		//NOTE: e.key isn't defined in JavaFX Browser
		if (e.which == 27 || e.which == 46){ // ESCAPE or DELETE.
			resetDrawing();
		}
		if (e.which == 116 && fromJavaFX){ // F5 for refresh
			dataPanel.prepend("<h2 class='ok'>Refreshing repository...</h2><br/>\n");
			document.documentElement.className = 'wait';
			fxapp.refreshHulls();
		}
	});

	function resetDrawing(){
		console.log("Reset drawing");
		try {
			draw.finishDrawing();
		} finally {
			displayHelp();
			document.documentElement.className = ''; // Stop waiting
			kml_source.getFeatures().forEach(f => refreshStyle(f, "original"));
			draw.setActive(true);
			drawnLayer.getFeatures().clear();
			intersections.clear();
			focusOnMap();
		}
	}

	function sketchAsWKT(srsName) {
		var wktFormat = new ol.format.WKT();
		return wktFormat.writeFeature(sketch, {
			dataProjection : ol.proj.get(srsName),
			featureProjection : ol.proj.get('EPSG:3857')
		});
	}

	function focusOnMap() {
		document.getElementById("map").focus();
	}

	var fxapp = undefined;

	publicScope.setFxApp = function(app){
		fxapp = app;
		console.log = function(message){
			fxapp.log(message);
		}

		console.warn = function(message){
			fxapp.warning(message);
		}
	}

	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 at least one GML file,<br>\n");
		dataPanel.append("you can download the corresponding part by checking the<br>\n");
		dataPanel.append("desired filenames and clicking on 'Download' button.<br>\n");
		dataPanel.append("<br>\n");
		dataPanel.append("More info is available in the ");
		dataPanel.append("<a href='http://simstadt.hft-stuttgart.de/related-softwares/region-chooser/'>SimStadt documentation</a><br>\n");
		//TODO: Show tooltip above.
		dataPanel.append("<form id='importWKT'>\n" +
		"<input id='wktPolygon' type='text' placeholder='WKT Polygon' " +
		"required pattern=' *POLYGON *\\( *\\([\\-0-9\., \)\()]+\\) *\\) *' " +
		"title='Please input a valid WKT Polygon. Example : POLYGON((9.961675 49.807053, 9.951375 49.798521, 9.969486 49.797746, 9.961675 49.807053)) '/>\n" +
		"<input type='submit' value='Import Polygon'/>\n" +
		"</form>\n");
		document.getElementById('importWKT').addEventListener('submit', importWKT);
	}

	importWKT = function(e){
		e.preventDefault(); // to avoid refresh


		//TODO: DRY, possibly with other events
		//TODO: Allow WKT as parameter for GUI?
		var wktPolygon = document.getElementById("wktPolygon").value;

		console.log("Try to import WKT geometry : " + wktPolygon);

		var wktFormat = new ol.format.WKT();

		try{
			var feature = wktFormat.readFeature(wktPolygon, {
				dataProjection : ol.proj.get('EPSG:4326'),
				featureProjection : ol.proj.get('EPSG:3857')
			});
		} catch (e){
			console.error("Couldn't import geometry!");
			dataPanel.prepend("<h2 class='error'>Couldn't import geometry!</h2><br/>\n");
			return false;
		}

		// Assuming the linear ring is closed
		var coordinatesCount = feature.getGeometry().getLinearRing(0).getCoordinates().length - 1;

		if (coordinatesCount < 2){
			console.error("Too few points!");
			dataPanel.prepend("<h2 class='error'>There should be at least 2 points in WKT polygon</h2><br/>\n");
			return false;
		}

		sketch = feature;
		updateGMLPolygons();

		drawnLayer.getFeatures().clear();
		intersections.clear();
		drawnLayer.addFeature(feature);
		map.getView().fitExtent(feature.getGeometry().getExtent(), map.getSize());

		displayInfo();
		draw.setActive(false);

		console.log("Import was succesful!");

		dataPanel.prepend("<h2 class='ok'>WKT Polygon succesfully imported!</h2><br/>");

	}

	// Executed by JavaFX when whole page is loaded.
	publicScope.ready = function() {
		updateGMLPolygons();
		displayHelp();
		document.documentElement.className = ''; // Stop waiting
		console.log("Ready!");
	}

	publicScope.selectAllOrNone = function(allOrNone) {
		document.querySelectorAll("input.select_citygml").forEach(c => c.checked = allOrNone);
		publicScope.isDownloadPossible();
	}

	publicScope.selectRepository = function() {
		fxapp.selectRepository();
	}

	publicScope.copyCoordinatesToClipboard = function(){
		var geom = sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326');
		var wgs84Coords = geom.getLinearRing(0).getCoordinates();
		var wktPolygon = "POLYGON((";
		var precision = 6; // ~ 10 cm precision
		wktPolygon += wgs84Coords.map(([lon, lat]) => lon.toFixed(precision) + " " + lat.toFixed(precision)).join(", ");
		utils.copyToClipboard(wktPolygon + "))", dataPanel);
	}

	publicScope.showRepositoryName = function(path) {
		document.getElementById("repo_path").textContent = path;
	}

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