How can i assign a logo to the vector source (GPX) in OpenLayers 3?

Question

im learing OpenLayers 3 and i am trying to assign an png image to the logo attribute of the layer.Vector.source like this:

var vectorSpeedLimit40 = new ol.layer.Vector({
    title: 'speedlimit40',
    source: new ol.source.Vector({
        url: 'gpx/Fotoboks_40.gpx',
        format: new ol.format.GPX({
            extraStyles: false
        }),
        logo: '/imgs/lc.png'

    })
});

var rasterLayer = new ol.layer.Tile({
    source: new ol.source.OSM()
});

var map = new ol.Map({
  layers: [rasterLayer, vectorSpeedLimit40],
  target: document.getElementById('map-canvas'),
  view: new ol.View({
    center: [0, 0],
    zoom: 3
  })
});

Where i thought this would show instances of the png, it shows small blue circles instead like this:

I have checked, double checked, triple checked and the path is correct relative to the client.

What am i doing wrong? Thanks!

Answer 1

To assign a specific image to a vectorLayer with a GPX source you have to assign the image property a new ol.style.Icon with the src attribute to the image like this:

var vectorSource = new ol.source.Vector({
    // Specify that the source is of type GPX
    format: new ol.format.GPX(),
    // Here you specify the path to the image file
    url: 'gpx/source.gpx'
})

var vectorStyle = new ol.style.Style({
    // Set the image attribute to a new ol.style.Icon
    image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
        anchorXUnits: 'fraction',
        anchorYUnits: 'pixels',
        opacity: 0.75,
        scale: 0.2,
        // Here you specify the path to the image file
        src: 'imgs/image.png'
    }))
})

var vectorLayer = new ol.layer.Vector({
    // Here you specify the source and style attributes of the ol.layer.Vector to the ones that are made above
    source: vectorSource,
    style: vectorStyle
});

// Then add it to the map
map.addLayer(vectorLayer);