Merge branch 'experimental/import_wkt'

src/main/resources/eu/simstadt/regionchooser/website/index.html

@@ -14,7 +14,7 @@
 		-->
 		<script type="text/javascript" src="script/proj4.js"></script>
 		<script type="text/javascript" src="script/jquery-1.4.2.min.js"></script>
-		 <!-- OpenLayers v3.4.0. API doc : http://openlayers.org/en/v3.4.0/apidoc/ --> 
+		 <!-- OpenLayers v3.4.0. API doc : https://geoadmin.github.io/ol3/apidoc/ -->
 		<script src="script/ol.js" type="text/javascript"></script>
 		<link rel="stylesheet" href="style/ol.css" type="text/css" />
 		<script src="script/turf.js" type="text/javascript"></script>

src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js

@@ -67,7 +67,7 @@ const regionChooser = (function(){
 	const kmlFormat = new ol.format.KML({extractStyles: false});
 
 	kml_source.addEventListener("addfeature", function() {
-		map.getView().fitExtent(kml_source.getExtent(), (map.getSize()));
+		map.getView().fitExtent(kml_source.getExtent(), map.getSize());
 	});
 
 	function updateGMLPolygons() {
@@ -301,7 +301,7 @@ const regionChooser = (function(){
 			'<a href="#" onclick="regionChooser.selectAllOrNone(false);">(Select None)</a>\n'+
 			'</div>\n');
 		findIntersections();
-		dataPanel.append('<button type="button" onclick="regionChooser.copyCoordinatesToClipboard()" id="get_wgs84">Copy coordinates</button><br/>\n')
+		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() {
@@ -375,6 +375,65 @@ const regionChooser = (function(){
 		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);
+
+		//TODO: Test intersection with holes
+
+		console.log("Import was succesful!");
+
+		dataPanel.prepend("<h2 class='ok'>WKT Polygon succesfully imported!</h2><br/>");
+
 	}
 
 	// Executed by JavaFX when whole page is loaded.