TransWikia.com

Displaying an icon at each point in list of features using OpenLayers 6

Geographic Information Systems Asked on May 20, 2021

I am trying to create a layer on a map to indicate a trail in addition to LineString. I want to display an icon each point.

I create my map layer

var  historySource = new ol.source.Vector({
            features: history
        });

        var markersTrailMarkerLayer = new ol.layer.Vector({
            name: 'HistoryTrailIcons' + num, // needed?
            id: 'HistoryTrailIcons' + num,
            source: historySource,
            setZIndex: 500
        });
        map.addLayer(markersTrailMarkerLayer);

I then loop through an array creating a marker for each point:

for (var x = 0 ; x < historyArray.length ; x++) 
{                          
    var lonlat = new ol.proj.transform([historyArray[x].longitude, historyArray[x].latitude], 'EPSG:4326', 'EPSG:27700');

    points.push(lonlat); // for the line string used later

    // Create history marker
    var marker = new ol.Feature({
        geometry: new ol.geom.Point(lonlat),
        id: historyArray[x].num+ "_" + x,
    });
    marker.setId(historyArray[x].num+ "_" + x);            

    var iconStyle = new ol.style.Style({
        image: new ol.style.Icon(({                        
                    anchor: [0.5, 1],                    
                    src: "/images/historymarker.png",
                    opacity: 1,
                    id: historyArray[x].num+ "_" + x
                }))
            });            
            marker.setStyle(iconStyle);

    history.push(marker);
}

It appears to being created but is not visible on top of the line string. Can anyone help?

The LineString I mentioned is a separate layer drawn elsewhere in the code but I have included as requested:

var lineStringFeature = new ol.Feature({
                geometry: new ol.geom.LineString(points),
                name: esn
            });
            lineStringFeature.setId(esn);

            // Add history trail line
            var lineString = new ol.layer.Vector({                
                id: "HistoryTrail" + num,
                source: new ol.source.Vector({
                    features: [lineStringFeature]
                }),
                style: new ol.style.Style({                    
                    stroke : new ol.style.Stroke({ 
                        color: '#0000ff',
                        width: 5
                    })
                })
            });
            map.addLayer(lineString);

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP