3

I am looking for example of how to add markers of different type (different images) using OpenLayers 3.

This is my code:

iconStyle = new ol.style.Style({
            image : new ol.style.Icon(({
                anchor : [ 0.5, 46 ],
                anchorXUnits : 'fraction',
                anchorYUnits : 'pixels',
                opacity : 0.75,
                src : '/icon.png'
            }))
        });
vectorSource = new ol.source.Vector({
            features : []
        })
vectorLayer = new ol.layer.Vector({
            source : vectorSource,
            style : iconStyle
        });
map.addLayer(vectorLayer);

I can't seem to have more than one icon. For example if user clicks on map, marker from one source is displayed, and when he enters an address, a marker form another source is displayed.

How this should be managed? Do I nee to create multiple iconStyle, vectorSource and many vectorLayer attached to map?

1 Answer 1

4

You need to create a separate icon style for each style you want to display. It helps to have them all in a reference cache so you don't create a separate style for each object (see the styles object in the code below.

Then, when adding a feature to a layer you need to reference the style from the cache which matches the feature type you're adding.

Please check the example below and try to integrate it into your code:

var styles = [];
var features = [];

/*
 * data is a JSON object from web API that looks like this:
 * 

    var data = [{
      markerClass: "blue",
      code: "water",
      lat: 0, // no really, but you get the idea
      lng: 0
    }, {
      etc...
    }]

 *
 */

$.each(data, function (i, item) {

  // Check style cache for already created style
  if (!styles[item.markerClass]) {
    // In your case you will want to use  image : new ol.style.Icon(({
    // but this is the example that I have on hand..
    styles[item.markerClass] = new ol.style.Style({
      image: new ol.style.Circle({
        radius: 5,
        stroke: new ol.style.Stroke({
          color: '#000'
        }),
        fill: new ol.style.Fill({
          color: item.markerClass // attribute colour
        })
      }),
      text: new ol.style.Text({
        text: item.code, // attribute code
        fill: new ol.style.Fill({
          color: "#000" // black text // TODO: Unless circle is dark, then white..
        })
      })
    });
  }

  // Create the feature
  var marker = new ol.Feature({
    content: item,
    mapid: i,
    geometry: new ol.geom.Point(
      ol.proj.transform(
        [item.lng, item.lat], 
        proj_out, proj_in)
      )
  });

  // Set style created earlier
  marker.setStyle(styles[item.markerClass]);

  features.push(marker);

});

// Assuming your layer / source is already map bound
var source = layer.getSource();
source.addFeatures(features);

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.