Icon Colors

This example uses OpenLayers v4.0.1. The latest is v.

#### 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'`.

Related API documentation:

- ol.Feature
,
- ol.Map
,
- ol.View
,
- ol.geom.Point
,
- ol.layer.Tile
,
- ol.layer.Vector
,
- ol.proj
,
- ol.source.TileJSON
,
- ol.source.Vector
,
- ol.style.Icon
,
- ol.style.Style

Copy Edit
Icon Colors Example assigning a custom color to an icon 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', src: 'https://openlayers.org/en/v4.0.1/examples/data/dot.png' })) })); london.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: '#4271AE', src: 'https://openlayers.org/en/v4.0.1/examples/data/dot.png' })) })); madrid.setStyle(new ol.style.Style({ image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({ color: [113, 140, 0], src: 'https://openlayers.org/en/v4.0.1/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 }) }); #map { position: relative; } <div id="map" class="map"></div>

    <!DOCTYPE html>
    <html>
      <head>
        <title>Icon Colors</title>
        <link rel="stylesheet" href="https://openlayers.org/en/v4.0.1/css/ol.css" type="text/css">
        <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
        <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
        <script src="https://openlayers.org/en/v4.0.1/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',
              src: 'https://openlayers.org/en/v4.0.1/examples/data/dot.png'
            }))
          }));

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

          madrid.setStyle(new ol.style.Style({
            image: new ol.style.Icon(/** @type {olx.style.IconOptions} */ ({
              color: [113, 140, 0],
              src: 'https://openlayers.org/en/v4.0.1/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>