I have a several hundred points that I am showing on a map. At the moment, my method of adding the points seems inefficient. I create an array using the following approach:

var features = [new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.2522971 45.3447353)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"aaa"}),
new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.259215 45.344827)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"bbb"})]

and then add this array to a map-layer:

var vectors = new OpenLayers.Layer.Vector("vector", {isBaseLayer: false, projection:"EPSG:4326", styleMap:myStyle});    


Is there are a more efficient way of displaying the points? I also want to be able to dynamically change the radius of each point separately. I'm not sure if that is something that I should consider when constructing the point. For example, I can choose the radius when constructing, but I do not know how to update it:

new OpenLayers.Feature.Vector(OpenLayers.Geometry.fromWKT("POINT(-4.2522971 45.3447353)").transform(new OpenLayers.Projection("EPSG:4326"), map.getProjectionObject()),{"Name":"aaa"}, {radius: 10})

2 Answers 2


Regarding the second part of your question you can modify a features style and then redraw the feature using the drawFeature method of the layer. Example:

feature.style.pointRadius = (feature.style.pointRadius - 1) || 50;
feature.layer.drawFeature ( feature );

Regarding the first part of your question I would assume it is more efficient to use a Geometry.Point constructor directly. I would further assume it would be better to reuse your projection but I doubt you'll notice a performance difference. Here is full source for creating random features and resizing the radius:

function addRandomMarkers(extent, layer) {
    var features, dx, dy;
    dx = extent.getWidth();
    dy = extent.getHeight();

    features = array.map($.range(0, 100), function () {
        return new ol.LonLat(extent.left + dx * Math.random(), extent.bottom + dy * Math.random());
    features = array.map(features, function (item) {
        return new ol.Geometry.Point(item.lon, item.lat);
    features = array.map(features, function (item, index) {
        var attributes, style;
        attributes = null;
        style = { pointRadius: Math.round(1 + index / 10) };
        return new ol.Feature.Vector(item, attributes, style);


    features[10].style.pointRadius = 50;

    setInterval(function () {
        var feature = features[10];
        feature.style.pointRadius = (feature.style.pointRadius - 1) || 50;
        feature.layer.drawFeature ( feature );
    }, 500);
  • Thanks for the suggestion. I'm having difficult with the following piece: features[10].style.pointRadius = 50; returns the following error: TypeError: Cannot set property 'pointRadius' of null
    – djq
    Aug 14, 2012 at 20:30
  • That is because I'm using helper methods that are not available to you but the intent should be clear. You can get the helper methods from pastebin.com/s1zdME79 but the idea here is you can update the style and call drawFeature.
    – ca0v
    Aug 15, 2012 at 14:34

If there's too many points, probably you can go for Cluster. OpenLayers do have this feature.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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