Passing Array to Openlayers 3 with geolocation and style

Question

I am looking to create simple markers in Openlayers 3 based on a two dimensional array which I pass via PHP containing the Geolocation of the marker and an attribute. Currently the attribute is the colour that I would like the layer to be:

    //run external php script to grab all entries from the database; make an array and add to source vector
var latlong_marker = <?php require 'db_multiple_gps.php'; echo $ol_latlong;?>;
var latlong_array_length = latlong_marker.length;

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

// cycle through all entries in the array
for (var i = 0; i < latlong_array_length; i++){
        var iconFeature = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.transform(latlong_marker[i][0], 'EPSG:4326',   'EPSG:3857'))});
        vectorSource.addFeature(iconFeature);

        var iconStyle = new ol.style.Style({    
        image: new ol.style.Circle({
        radius: 5,
        fill: new ol.style.Fill({color: latlong_marker[i][2]})
        })
    });

  //add the feature vector to the layer vector, and apply a style to whole layer
    var vectorLayer = new ol.layer.Vector({
        source: vectorSource,
        style: iconStyle
    });
}

The vector layers are presented on the map in the correct locations but the issue is that the colour is that of the last entry in the array latlong_marker[i][2].

From my research I think it may be due to closure of functions but I'm not exactly sure how or where the functions are in play here.

Debugging show the entire array being passed through the loop and vectorSource looking good; however iconStyle appears to have many null values.

Am I going about this in the right fashion? I could pass another parameter other than the actual colour required (such as a integer) to then be used to create the different style.

In addition to the code snippet above, I have played around with with closing the loop earlier; this works fro creation of vectorSource but I always fall down with trying to pass an array of iconStyle to the Vector Layer.

You latlong_marker[i][0] and latlong_marker[i][2]. What about latlong_marker[i][1] ? — Anders Finn Jørgensen
– Anders Finn Jørgensen, Commented Nov 14, 2014 at 14:34
latlong_marker[i][1] is another field in the array that contains an integer. Initially I was going to use that integer to make the decision on the colour of the Vector via a Switch. I think though it shouldn't matter as long as I reference a valid element in the array, which [i][2] is. — stufish
– stufish, Commented Nov 14, 2014 at 16:23
Your question is hard to help you answer, because the problem properly lies in the latlong_marker array. Could you give maybe 3-4 entries in the array or show the PHP-code that creates the array. Maybe you uses the stylefunction wrong - I give you an example below. — Anders Finn Jørgensen
– Anders Finn Jørgensen, Commented Nov 15, 2014 at 9:41
To answer you question (even though you have solved it below), here is the output of the array:[[[-2,57],1,'red'],[[-1.5,57],3,'grey']] — stufish
– stufish, Commented Nov 17, 2014 at 9:46

Anders Finn Jørgensen · Accepted Answer · 2014-11-17 10:31:15Z

0

Try this

var latlong_marker = <?php require 'db_multiple_gps.php'; echo $ol_latlong;?>;
var latlong_array_length = latlong_marker.length;
var vectorSource = new ol.source.Vector({
  //create empty vector
});

// cycle through all entries in the array
for (var i = 0; i < latlong_array_length; i++){
    var iconFeature = new ol.Feature({
    geometry: new ol.geom.Point(ol.proj.transform(latlong_marker[i][0], 
                                                  'EPSG:4326','EPSG:3857'))});

    var iconStyle = new ol.style.Style({    
                 image: new ol.style.Circle({
                 radius: 5,
                 fill: new ol.style.Fill({color: latlong_marker[i][2]})
              })
        });
    // THIS IS NEW - add each style individually to the feature
    iconFeature.setStyle(iconStyle);
    // First add the feature when it has got its style
    vectorSource.addFeature(iconFeature);
}

//add the feature vector to the layer vector, and apply a style to whole layer
var vectorLayer = new ol.layer.Vector({
    source: vectorSource,
    // remove this - > style: iconStyle
    });

edited Nov 17, 2014 at 10:31

answered Nov 15, 2014 at 11:37

Anders Finn Jørgensen

1,4871 gold badge21 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

stufish Over a year ago

That's the one! Just one small comment, the last closing curly brace is not required.

Anders Finn Jørgensen Over a year ago

closing curly brace removed. Thanks

Collectives™ on Stack Overflow

Passing Array to Openlayers 3 with geolocation and style

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related