0

I'm not even sure if this is possible but I am trying to change the color of a marker on an open layers 7 map. The marker is being added from an svg file using the following lines of code:

    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
    }); 

    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: 'https://testing.52weekdog.com/images/markers/marker_marker01_black.svg'
        })
    });

    const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
    });
    marker.setStyle([markerStyle]);

Is there a way to change the fill color of the external svg image? It is currently all black. I've tried adding both 'color' and 'fill' to the image element of the markerStyle without any luck. I think the demo (https://openlayers.org/en/latest/examples/icon-color.html) may be relevant but I'm not exactly sure how it applies.

Any help on how to solve this problem or maybe a different root to take if necessary would be greatly appreciated.

Here is the page I'm trying to get working JSFiddle.

var london = [-0.1276474, 51.507321899999994];



    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
    }); 
    const markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: 'https://testing.52weekdog.com/images/markers/marker_marker01_black.svg'
        })
    });
    const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
    });
    marker.setStyle([markerStyle]);
    
    
    const map = new ol.Map({
    view: new ol.View({         
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [baseMapTile, vectorSource],
    target: 'map'
    
  });

document.getElementById('markerColor').addEventListener("change", function() {
        
        //change the color of the icon
        newHex = document.getElementById('markerColor').value;
        alert('Change marker icon color to ' + newHex);
        
        
        
    
});
#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-right: 15px;
}
<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <select name="markerColor" id="markerColor">
        <option value="#000000">Black</option>
        <option value="#eb3434">Red</option>
        <option value="#345ceb">Blue</option>
    </select>
</div>
user3182413
  • 59
  • 1
  • 7
  • Does this answer your question? [How can I change icon source dynamically](https://stackoverflow.com/questions/57341190/how-can-i-change-icon-source-dynamically) – Mehdi Apr 26 '23 at 17:00
  • 1
    You will need to start with a white marker otherwise the color you set will not be seen on over the black background. – Mike Apr 26 '23 at 19:38
  • @Mike so if I change the image to be white, then what line of code do I use? – user3182413 Apr 26 '23 at 19:43
  • 1
    You will also need to reset the new style on the marker https://jsfiddle.net/6jLdqas0/ – Mike Apr 26 '23 at 19:56

1 Answers1

0

Working example based on a white icon:

var svg = "data:image/svg+xml;charset=UTF-8,%3csvg version='1.2' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512' width='512' height='512'%3e%3ctitle%3emap-marker-3-svgrepo-com-svg%3c/title%3e%3cstyle%3e .s0 %7b fill: %23ffffff %7d %3c/style%3e%3cg id='Layer'%3e%3cpath id='Layer' fill-rule='evenodd' class='s0' d='m429.9 173.9c0 96-154.7 338.1-173.9 338.1-19.2 0-173.9-242.1-173.9-338.1 0-96 77.9-173.9 173.9-173.9 96 0 173.9 77.9 173.9 173.9zm-107.4 0c0-36.7-29.8-66.5-66.5-66.5-36.7 0-66.5 29.8-66.5 66.5 0 36.7 29.8 66.5 66.5 66.5 36.7 0 66.5-29.8 66.5-66.5z'/%3e%3c/g%3e%3c/svg%3e"

var london = [-0.1276474, 51.507321899999994];

    const baseMapTile = new ol.layer.Tile({
            source: new ol.source.OSM(),
            visible: true,
            title: 'OSMStandard'
    });
    
    
    const marker = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat(london)),
    }); 
    let markerStyle = new ol.style.Style({
        image: new ol.style.Icon({
            anchor: [0.5,1],
            scale: 0.06,
            src: svg,
            color: document.getElementById('markerColor').value
        })
    });
    const vectorSource = new ol.layer.Vector({
                source: new ol.source.Vector({
                    features: [marker]
                }),
                style: markerStyle
    });
    marker.setStyle([markerStyle]);
    
    
    const map = new ol.Map({
    view: new ol.View({         
      center: (ol.proj.fromLonLat(london)),
      zoom: 15,
    }),
        layers: [baseMapTile, vectorSource],
    target: 'map'
    
  });

document.getElementById('markerColor').addEventListener("change", function() {
        
        //change the color of the icon
        newHex = document.getElementById('markerColor').value;
        alert('Change marker icon color to ' + newHex);
        
        
          markerStyle = new ol.style.Style({
              image: new ol.style.Icon({
                  anchor: [0.5, 1],
                  scale: 0.06,
                  src: svg,
                  color: newHex
              })
          });
          marker.setStyle([markerStyle]);
    
});
#map{
    width: 300px;
    height: 300px;
    border: 1px solid black;
    padding: 5px;
    float: left;
    margin-right: 15px;
}
<link href="https://cdn.jsdelivr.net/npm/ol@v7.2.2/ol.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/ol@v7.2.2/dist/ol.js"></script>
<div id="map" class="map"></div>    
<div id="info" class="info">
    <h2>Change Marker Image</h2>
    <select name="markerColor" id="markerColor">
        <option value="#000000">Black</option>
        <option value="#eb3434">Red</option>
        <option value="#345ceb">Blue</option>
    </select>
</div>
Mike
  • 16,042
  • 2
  • 14
  • 30