[GIS] Adding a Polygon to an OpenLayers3 Map with coordinates read from a string

featuresjavascriptlayersopenlayers

I do have a bunch of coords as a string read from a wps request result. I want to display these coordinates as a new layer added to the exisiting map. What I do is to split the string by containing spaces and push it to a new array. After that I iterate over the new array so I can push the coordinates as points to another array in a desired format ([lat, lng]). After that, I want to build a LinearRing from these points and add the LinearRing as a layer to my map.

Unfortunately this is erroneous somewhere and I do not get any errors logged into my console. By now I do not know why it does not display anything on my map. I've tried to add a Point to the map with a coordinate pair from the string which works quite well.

Here's also a JSFiddle: http://jsfiddle.net/wbuao2p0/ 

 (function () {
        var coords = "55.8634874529136 9.631500051342137 55.805972364525914 9.548784637840715 55.14482340752173 8.898109926807917 " +
                "54.37485632537419 8.380764572779743 53.522573247162796 8.014555510194093 52.617309603810206 7.812087589403351 " +
                "52.614355746887576 7.811710003292555 51.66694415234981 7.781187272498014 50.730797466775236 7.930015192081321 " +
                "49.83956156468691 8.252844765368144 49.82531948437923 8.259592481571666 48.98935698950589 8.76078730159239 " +
                "48.26651544342399 9.414644808782137 47.68426367900724 10.196317645257878 47.46134051972574 10.663796677950817 " +
                "47.44527206667563 10.65618066872225 47.41854993523704 10.712559712068128 47.3779293363187 10.838713359827098 " +
                "47.26472795130263 11.076101319594834 47.235921788657656 11.18904832359383 47.1275340000139 11.464071852121915 " +
                "47.12667976005475 11.466644260434636 47.03711564154165 11.874958636180834 46.94893974756699 12.137476538757129 " +
                "46.946391533519524 12.148647883992075 46.862762846216015 12.617094197216767 46.86208001538398 12.62235562376322 " +
                "46.84835634771807 12.808810685839008 46.82885100873644 12.887922280925599 46.82587936285959 12.913514148562475 " +
                "46.79313271854955 13.569218084395681 46.793186122964315 13.572597910595023 46.7968282660043 13.70010684882963 " +
                "46.797469135075175 13.715610737856597 46.91313241762351 14.597643499712868 46.91482995915892 14.605253829988193 " +
                "46.94051690258967 14.714615522672169 46.94470162532205 14.731573765998991 47.03965181587298 15.065926800025096 " +
                "47.04076570697014 15.069386735528871 47.0971543190374 15.234595324698322 47.10921639411892 15.26801495448744 " +
                "47.53141273642792 16.154028894640344 48.118553671058436 16.940499476725634 48.848016177433216 17.59712334576924 " +
                "49.691693468376144 18.098600246883922 50.0169553372784 18.21353961428459 50.21523496552912 18.31453702415812 " +
                "50.58776747601728 18.415250273922293 50.61707796761752 18.42560786478932 50.636347014984715 18.428383633035153 " +
                "51.21296112952521 18.58426984350083 51.25002091258902 18.590269409720722 52.29453665661267 18.64849965595591 " +
                "53.32830647762536 18.488113065951357 53.33169011267799 18.487217561626725 54.11128417393963 18.210077908740885 " +
                "54.4364395173484 18.02938155363006 54.71055010763587 17.908084827583007 54.720762056373424 17.902155827076 " +
                "54.915291540051065 17.761731176118456 55.13242755798435 17.647555434158786 55.47662158526144 17.356524858903985 " +
                "55.52396504913427 17.32234911719236 55.549477740903995 17.29976990766246 55.59558289581277 17.255938050595006 " +
                "55.96238666471352 16.945789984652894 56.621093859451975 16.08126023006796 56.62137995797971 16.08078530361504 " +
                "56.823246738627674 15.711335621037726 56.862438825053665 15.631824322664553 56.924133989456976 15.50198578534042 " +
                "56.959278380671066 15.425195193787415 57.28134660084014 14.48342212176854 57.41049116093812 13.49651476024982 " +
                "57.34159450394165 12.503580871072169 57.07738676862414 11.543967026746685 57.06553491005662 11.513261639456314 " +
                "56.971780105418375 11.335268426462179 56.97028222323641 11.331469925786793 56.63980353567406 10.649832439979386 " +
                "56.21014282052663 10.025943431541371 56.189078059345206 9.999836585481649 56.074375041474674 9.881733124306075 " +
                "55.9879654682174 9.753913025766153 55.8634874529136 9.631500051342137";

        var style = new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
                anchor: [0.5, 46],
                anchorXUnits: 'fraction',
                anchorYUnits: 'pixels',
                opacity: 0.75,
                src: 'http://ol3js.org/en/master/examples/data/icon.png'
            }))
        });

        var vectorSource = new ol.source.Vector({
            //create empty vector
        });

        var res = [];
        var points = [];
        //split the string every space and push it to a new array
        res.push(coords.split(" "));
        //iterate the new array and push a coordinate pair into a new array
        for (var i = 0; i < res[0].length; i += 1) {
            //points.push(new ol.geom.Point([res[0][i], res[0][i += 1]]));
            points.push(ol.proj.transform([res[0][i += 1], res[0][i]], 'EPSG:4326', 'EPSG:3857'));
        }
        //build a linearRing from the new array
        var linearRing = new ol.geom.LinearRing(points);

        //add linearRing as vector to the map
        /*
        var feature = new ol.Feature({
            geometry: new ol.geom.Point(ol.proj.transform([9.753913025766153, 55.9879654682174], 'EPSG:4326', 'EPSG:3857'))
        }); */


        var feature = new ol.Feature({
            geometry: new ol.geom.Polygon([[points]])
        });

        //add the feature vector to the layer vector, and apply a style to whole layer
        vectorSource.addFeature(feature);


        var vectorLayer = new ol.layer.Vector({
            source: vectorSource,
            style: style
        });

        var map = new ol.Map({
            layers: [new ol.layer.Tile({source: new ol.source.OSM()})],
            target: document.getElementById('map'),
            view: new ol.View({
                center: [ 9.753913025766153, 55.9879654682174],
                zoom: 3
            })
        });
        map.addLayer(vectorLayer);

    })();

Best Answer

There are no problems with the coordinates included in your code. The problem is with, how you included them. The coordinate transformation goes smoothly as far as I can see, but I changed your iteration technique to my own, because for me, the one included in your Fiddle was a bit strange (I hope that won't lead to a confusion).

The first problem was with the part, you created the polygon. A polygon needs an array of array of coordinates, but as you already have an array of coordinates, you can wrap them into a single array:

    var feature = new ol.Feature({
        geometry: new ol.geom.Polygon([points])
    });

The second problem was with the styling. You provided a single point style in your custom style object, therefore the line, and polygon symbolizers were set to null. You must also include some fill, and stroke options, or in the example below, just leave out the style parameter from the source.

JSFiddle example

Related Question