0

i am trying to draw a lineString using the same coordinates that are used to draw a collection of markers on a map. The markers are drawn, then the lineString should draw joining the markers, the lineString uses the same coords as the markers.

I am having strange issues though, sometimes all the lines draw, sometimes only one of the lines draw. but usually there will be one or two lines missing. when i run getCoordinates() on the lineString, it returns me all the same coordinates as the marker locations, yet some of the lines are not drawn.

some code:

// location data, contains x/y coords
var locs = JSON.parse(loc_data);  
var lineCoords = [];
var lat;
var lng;

// loop through loc data and output the markers 
for (var key in locs) {
    if (locs.hasOwnProperty(key)) {

        lat = locs[key].lat;
        lng = locs[key].lng;

        // store the coords in an array to be used for the lineString
        lineCoords.push([lat,lng]);

        // create marker and add to map
        var iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([lat, lng]),
        });            

        var vectorSource = new ol.source.Vector({
            features: [iconFeature]
        });

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

        map.addLayer(vectorLayer);                                               
    }                
}


// draw lineString using coordinates in lineCoords array
var line = new ol.geom.LineString(lineCoords);

var layerLines = new ol.layer.Vector({
    source: new ol.source.Vector({
        features: [new ol.Feature({
                geometry: line,
                name: 'Line'
            })]
    }),
});

map.addLayer(layerLines);

the code above seems pretty logical, i can't see where there could be a problem with it, and like is said, sometimes all lines are drawn and sometimes only one is drawn.

can anyone shine some light on this?

ThriceGood
  • 1,633
  • 3
  • 25
  • 43
  • 1
    Do you really want a new Source/Layer for each loop iteration? Also, you are using `[lat, lon]`, change to `[lon, lat]`. – Jonatas Walker Aug 20 '15 at 16:15
  • i dont really know, i just modified a simple single marker example to output multiple markers. I can probably just a marker layer though and add each new marker to that layer? maybe i create the source with no features, create layer with no source, then use the loop to create the features, then source.addFeatures() and layer.setSource()? this shouldnt affect the LineString though right? thanks for the comment – ThriceGood Aug 21 '15 at 12:04
  • how does this end up? – Jonatas Walker Nov 10 '15 at 17:57
  • i think i've tried various ideas inside of this thread to no avail. It drifted down the line of priorities and i havent gone back to this issue since the last comment in this thread. recreating the scenario exactly is hard as i pass the location data from the backend, using hardcoded location data in plunker gives me no issues, i think when i get round to it i will try hardcoded location data in my applications front end and see what happens. So far its still very strange though, it should work with the data passed from the back in no different manner. – ThriceGood Nov 11 '15 at 12:53

1 Answers1

0

Try with the changes:

// location data, contains x/y coords
var 
    locs = JSON.parse(loc_data),
    lineCoords = [], features = [],
    lat, lng, iconFeature
;

// loop through loc data and output the markers 
for (var key in locs) {
    if (locs.hasOwnProperty(key)) {

        lat = locs[key].lat; //is this already EPSG:3857 ?
        lng = locs[key].lng;

        // store the coords in an array to be used for the lineString
        lineCoords.push([lng, lat]);

        // create marker and add to map
        iconFeature = new ol.Feature({
            geometry: new ol.geom.Point([lng, lat]),
        });
        features.push(iconFeature);
    }                
}

var
    vectorSource = new ol.source.Vector({
        features: features //your LineString could also be included here
    }),
    vectorLayer = new ol.layer.Vector({
        source: vectorSource
    }),
    // draw lineString using coordinates in lineCoords array
    line = new ol.geom.LineString(lineCoords),
    layerLines = new ol.layer.Vector({
        source: new ol.source.Vector({
            features: [new ol.Feature({
                geometry: line,
                name: 'Line'
            })]
        })
    })
;
map.addLayer(vectorLayer);
map.addLayer(layerLines);
Jonatas Walker
  • 13,583
  • 5
  • 53
  • 82
  • thanks these changes worked, but i still have the same lineString issue. Can you tell me what advantage there is using this method? i presume it is a bit more memory efficient? – ThriceGood Aug 21 '15 at 12:54
  • 1
    Please, put this on a jsfiddle. It's hard to know what is a lineString issue. – Jonatas Walker Aug 21 '15 at 13:19
  • thats the strange thing, ive used this method to great effect when testing it on a normal map outside of my project. it worked fine. i was just putting random coords for the lineString, using the same code as above. It worked fine with all lines appearing. It just starts breaking when i try to use the code inside of my project that im working on. il try get it on fiddle asap though – ThriceGood Aug 21 '15 at 13:50
  • here is a plunker link [Plunker](http://plnkr.co/edit/6jVnOQCH4F3eTmH5L9cL?p=preview), everything works fine here, and is not very different from my projects code. There is an issue on the page in my project, not sure if it would cause this error, but its got to do with bootstrap and jquery `Error: Bootstrap's JavaScript requires jQuery version 1.9.1 or higher`, would this have an affect? – ThriceGood Aug 21 '15 at 14:05
  • What about the coordinates you are using here `locs = JSON.parse(loc_data)`, are they `EPSG:3857`? – Jonatas Walker Aug 21 '15 at 14:10
  • yes, and its the same coords that are used for the markers so the lines should join the exact locations of the markers – ThriceGood Aug 21 '15 at 14:28
  • So, you gotta recreate the exact same scenario on plunker. – Jonatas Walker Aug 21 '15 at 14:55