diff options
| author | Teddy Wing | 2017-04-19 16:38:43 +0200 |
|---|---|---|
| committer | Teddy Wing | 2017-04-19 16:38:43 +0200 |
| commit | 7902db2e2b7e9b2c20cb1f4a5cdd7b4c1c02bb10 (patch) | |
| tree | cdd3acf75680b5b00bcc3894844b7dc7b95a0343 | |
| parent | 4b24aa49fe5222803e03d31d71f0362f47da457c (diff) | |
| download | geo-feature-examiner-7902db2e2b7e9b2c20cb1f4a5cdd7b4c1c02bb10.tar.bz2 | |
index.html: Add inputted WKT features to the map
WKT features will be inputted into the "input" textarea, one per line.
Read these and render them on the map when blurring the textarea.
| -rw-r--r-- | index.html | 37 |
1 files changed, 21 insertions, 16 deletions
@@ -7,37 +7,24 @@ <link rel="stylesheet" href="https://openlayers.org/en/v4.1.0/css/ol.css" type="text/css"> </head> <body> + <textarea class="js-wkt"></textarea> <textarea class="js-selected-feature"></textarea> <div id="map"></div> <script src="https://openlayers.org/en/v4.1.0/build/ol.js"></script> <script> + var input_el = document.getElementsByClassName('js-wkt')[0]; var output_el = document.getElementsByClassName('js-selected-feature')[0]; var raster = new ol.layer.Tile({ source: new ol.source.OSM() }); - var wkt = 'POLYGON((10.689 -25.092, 34.595 ' + - '-20.170, 38.814 -35.639, 13.502 ' + - '-39.155, 10.689 -25.092))'; - var format = new ol.format.WKT(); - var feature = format.readFeature(wkt, { - dataProjection: 'EPSG:4326', - featureProjection: 'EPSG:3857' - }); - - var vector = new ol.layer.Vector({ - source: new ol.source.Vector({ - features: [feature] - }) - }); - var map = new ol.Map({ - layers: [raster, vector], + layers: [raster], target: 'map', view: new ol.View({ center: ol.proj.fromLonLat([2.3475075, 48.869163]), @@ -56,6 +43,24 @@ }); map.addInteraction(select_click); + + input_el.onblur = function(e) { + var wkt_features = e.target.value.split('\n'); + wkt_features = wkt_features.map(function(wkt) { + return format.readFeature(wkt, { + dataProjection: 'EPSG:4326', + featureProjection: 'EPSG:3857' + }); + }); + + map.addLayer( + new ol.layer.Vector({ + source: new ol.source.Vector({ + features: wkt_features + }) + }) + ); + }; </script> </body> </html> |