diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js index 8787543fa999d34e18fa086fd5d5433648543efc..d46974c2dff14b3d80d98fe5c25e70034dde453a 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/simstadt_openlayers.js @@ -294,10 +294,13 @@ const regionChooser = (function(){ 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"); + + if (utils.is_polygon(geom)){ // It could be a MultiPolygon, for example. + 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' + @@ -381,7 +384,7 @@ const regionChooser = (function(){ //TODO: Show tooltip above. dataPanel.append("<form id='importWKT'>\n" + "<input id='wktPolygon' type='text' placeholder='WKT Polygon' " + - "required pattern=' *POLYGON *\\( *\\([\\-0-9\., \)\()]+\\) *\\) *' " + + "required pattern=' *(MULTI)?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"); @@ -411,13 +414,18 @@ const regionChooser = (function(){ return false; } + // Assuming the linear ring is closed - var coordinatesCount = feature.getGeometry().getLinearRing(0).getCoordinates().length - 1; + var geom = feature.getGeometry(); - if (coordinatesCount < 2){ - console.warn("Too few points!"); - dataPanel.prepend("<h2 class='error'>There should be at least 2 points in WKT polygon</h2><br/>\n"); - return false; + if (utils.is_polygon(geom)){ + var coordinatesCount = geom.getLinearRing(0).getCoordinates().length - 1; + + if (coordinatesCount < 2){ + console.warn("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; @@ -426,7 +434,7 @@ const regionChooser = (function(){ drawnLayer.getFeatures().clear(); intersections.clear(); drawnLayer.addFeature(feature); - map.getView().fitExtent(feature.getGeometry().getExtent(), map.getSize()); + map.getView().fitExtent(geom.getExtent(), map.getSize()); displayInfo(); draw.setActive(false); @@ -460,6 +468,10 @@ const regionChooser = (function(){ publicScope.copyCoordinatesToClipboard = function(){ var geom = sketch.getGeometry().clone().transform(sourceProj, 'EPSG:4326'); + if (!utils.is_polygon(geom)){ + console.warn("Sorry, can only export single polygons."); + return false; + } var wgs84Coords = geom.getLinearRing(0).getCoordinates(); var wktPolygon = "POLYGON(("; var precision = 6; // ~ 10 cm precision diff --git a/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js b/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js index 2a4fa6692d7b8496f56d68979430fa49d1f70e11..6e2b788f80670a87cd1dafc27a7f9d4160eb2800 100644 --- a/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js +++ b/src/main/resources/eu/simstadt/regionchooser/website/script/utils.js @@ -1,12 +1,12 @@ var utils = {}; -utils.groupBy = function(xs, key) { - return xs.reduce(function(rv, x) { - (rv[x[key]] = rv[x[key]] || []).push(x); - return rv; +utils.groupBy = function (xs, key) { + return xs.reduce(function (rv, x) { + (rv[x[key]] = rv[x[key]] || []).push(x); + return rv; }, {}); } - + // Copies a string to the clipboard. Must be called from within an // event handler such as click. May return false if it failed, but // this is not always possible. Browser support for Chrome 43+, @@ -15,7 +15,7 @@ utils.groupBy = function(xs, key) { // an administrator. By default a prompt is shown the first // time the clipboard is used (per session). // https://stackoverflow.com/a/33928558/6419007 -utils.copyToClipboard = function(text, log) { +utils.copyToClipboard = function (text, log) { if (window.clipboardData && window.clipboardData.setData) { // Internet Explorer-specific code path to prevent textarea being shown while dialog is visible. return window.clipboardData.setData("Text", text); @@ -40,25 +40,29 @@ utils.copyToClipboard = function(text, log) { } } } - -utils.read_kml = function(url){ + +utils.read_kml = function (url) { return new ol.source.KML({ - projection : ol.proj.get('EPSG:3857'), - url : url, - extractAttributes : false, - extractStyles : false + projection: ol.proj.get('EPSG:3857'), + url: url, + extractAttributes: false, + extractStyles: false }); } - -utils.polygon_style = function(color, alpha) { + +utils.is_polygon = function (geom) { + return ('getType' in geom) && (geom.getType() === 'Polygon'); +} + +utils.polygon_style = function (color, alpha) { return new ol.style.Style({ - fill : new ol.style.Fill({ - color : 'rgba(255, 255, 255,' + alpha + ')' + fill: new ol.style.Fill({ + color: 'rgba(255, 255, 255,' + alpha + ')' }), - stroke : new ol.style.Stroke({ - color : color, - width : 2, - lineDash : [ 5, 10 ] + stroke: new ol.style.Stroke({ + color: color, + width: 2, + lineDash: [5, 10] }), }); }