3

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

    })();
  • The geometry part of your code seems to be correct at a first glance. However, you are trying to add a custom style with only a point symbolizer defined in it. In this case, the fill, and stroke symbolizers, which are essentials in drawing polygons are both set to null. Please try to define a stroke, and a fill in your custom style. – Gabor Farkas Jul 8 '15 at 17:45
3

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

  • 1
    By the way: The transformed coordinates should be located somewhere in Germany and not near Africa. So I had to parse the coordinates to float before transforming them into the desired projection. points.push(ol.proj.transform(parseFloat([res[0][i+1]), parseFloat(res[0][i]]), 'EPSG:4326', EPSG:'3857'))); – Antivist Jul 9 '15 at 13:03
0

You should check your transformation of the coordinates. That what i got from console.log(points[0])

[1072173.6812907949, -15779360.632217405]

Is that correct (the minus)?

Update: Since the handled coordinates are strings you nede to convert them: like Number(res[0][i])

Not sure what you want to do with [res[0][i += 1] but if you do so yo need to restrict the limit in the for-loop or wou will get NaN in the last coordinates. Something like i < res[0].length-2 maybe. Since the last couple of coordinates are missing then you need to modify your input I guess.

That's what I tried.

var res = [];
var points = [];
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-2; i++) {
    points[i] = ol.proj.transform([Number(res[0][i+1]), Number(res[0][i])], 'EPSG:4326', 'EPSG:3857');
}

Beyond that i'm not sure how you want to create a polygon out of your coordinates. If you create a LineString instead of a Polygon you will see what i'm talking about. http://jsfiddle.net/wbuao2p0/1/

I'm not that much into that Geometry-stuff in Ol3. So cant help you further with that.

  • No that's not correct. But not changing the projection by points.push([res[0][i], res[0][i += 1]]); points[] will be like [55.8634874529136, 9.631500051342137]. Yet the new layer won't be visable on the map. – Antivist Jul 8 '15 at 16:03
  • I tried to add a new geometry pair to a new array with the for loop. But I guess something was not correct, which Gabor has pointed out. Thank you for your assistance. – Antivist Jul 9 '15 at 7:57

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.