Icon Colors

Example assigning a custom color to an icon

Example assigning a custom color to an icon. The features in this examples are all using the same image with the different colors coming from the javascript file. Note that icon files need to obey the same origin policy or send proper CORS headers for this to work. When relying on CORS headers, the ol.style.Icon must be configured with crossOrigin: 'anonymous'.

<!DOCTYPE html>
<html>
  <head>
    <title>Icon Colors</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.6.4/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src=""></script>
    <script src="https://openlayers.org/en/v4.6.4/build/ol.js"></script>
    <style>
      #map {
        position: relative;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script>
      var rome = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([12.5, 41.9]))
      });

      var london = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-0.12755, 51.507222]))
      });

      var madrid = new ol.Feature({
        geometry: new ol.geom.Point(ol.proj.fromLonLat([-3.683333, 40.4]))
      });

      rome.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: '#8959A8',
          crossOrigin: 'anonymous',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/dot.png'
        }))
      }));

      london.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: '#4271AE',
          crossOrigin: 'anonymous',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/dot.png'
        }))
      }));

      madrid.setStyle(new ol.style.Style({
        image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
          color: [113, 140, 0],
          crossOrigin: 'anonymous',
          src: 'https://openlayers.org/en/v4.6.4/examples/data/dot.png'
        }))
      }));


      var vectorSource = new ol.source.Vector({
        features: [rome, london, madrid]
      });

      var vectorLayer = new ol.layer.Vector({
        source: vectorSource
      });

      var rasterLayer = new ol.layer.Tile({
        source: new ol.source.TileJSON({
          url: 'https://api.tiles.mapbox.com/v3/mapbox.geography-class.json?secure',
          crossOrigin: ''
        })
      });

      var map = new ol.Map({
        layers: [rasterLayer, vectorLayer],
        target: document.getElementById('map'),
        view: new ol.View({
          center: ol.proj.fromLonLat([2.896372, 44.60240]),
          zoom: 3
        })
      });
    </script>
  </body>
</html>