Edit

Icon Colors

vector56 style14 icon6 marker3

Example assigning a custom color to an icon

Example assigning a custom color to an icon. The icon styles in this example use images with a white fill. For some features, custom colors set using the color property. 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'.

main.js
import 'ol/ol.css';
import Feature from 'ol/Feature';
import Map from 'ol/Map';
import Point from 'ol/geom/Point';
import TileJSON from 'ol/source/TileJSON';
import VectorSource from 'ol/source/Vector';
import View from 'ol/View';
import {Icon, Style} from 'ol/style';
import {Tile as TileLayer, Vector as VectorLayer} from 'ol/layer';
import {fromLonLat} from 'ol/proj';

var rome = new Feature({
  geometry: new Point(fromLonLat([12.5, 41.9])),
});

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

var madrid = new Feature({
  geometry: new Point(fromLonLat([-3.683333, 40.4])),
});
var paris = new Feature({
  geometry: new Point(fromLonLat([2.353, 48.8566])),
});
var berlin = new Feature({
  geometry: new Point(fromLonLat([13.3884, 52.5169])),
});

rome.setStyle(
  new Style({
    image: new Icon({
      color: '#BADA55',
      crossOrigin: 'anonymous',
      // For Internet Explorer 11
      imgSize: [20, 20],
      src: 'data/square.svg',
    }),
  })
);

london.setStyle(
  new Style({
    image: new Icon({
      color: '#4271AE',
      crossOrigin: 'anonymous',
      src: 'data/bigdot.png',
      scale: 0.2,
    }),
  })
);

madrid.setStyle(
  new Style({
    image: new Icon({
      crossOrigin: 'anonymous',
      src: 'data/bigdot.png',
      scale: 0.2,
    }),
  })
);

paris.setStyle(
  new Style({
    image: new Icon({
      color: '#8959A8',
      crossOrigin: 'anonymous',
      // For Internet Explorer 11
      imgSize: [20, 20],
      src: 'data/dot.svg',
    }),
  })
);

berlin.setStyle(
  new Style({
    image: new Icon({
      crossOrigin: 'anonymous',
      // For Internet Explorer 11
      imgSize: [20, 20],
      src: 'data/dot.svg',
    }),
  })
);
var vectorSource = new VectorSource({
  features: [rome, london, madrid, paris, berlin],
});

var vectorLayer = new VectorLayer({
  source: vectorSource,
});

var rasterLayer = new TileLayer({
  source: new TileJSON({
    url: 'https://a.tiles.mapbox.com/v3/aj.1x1-degrees.json?secure=1',
    crossOrigin: '',
  }),
});

var map = new Map({
  layers: [rasterLayer, vectorLayer],
  target: document.getElementById('map'),
  view: new View({
    center: fromLonLat([2.896372, 44.6024]),
    zoom: 3,
  }),
});
index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <title>Icon Colors</title>
    <!-- Pointer events polyfill for old browsers, see https://caniuse.com/#feat=pointer -->
    <script src="https://unpkg.com/elm-pep"></script>
    <style>
      .map {
        width: 100%;
        height:400px;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map"></div>
    <script src="main.js"></script>
  </body>
</html>
package.json
{
  "name": "icon-color",
  "dependencies": {
    "ol": "6.4.3"
  },
  "devDependencies": {
    "parcel": "1.11.0"
  },
  "scripts": {
    "start": "parcel index.html",
    "build": "parcel build --experimental-scope-hoisting --public-url . index.html"
  }
}