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'
.
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,
}),
});
<!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>
{
"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"
}
}