I'm trying to customize the icon of a distinct marker in a map (all source is extracted on Db), but I don't understand why doesn't work.
I'm using ol_v5.2.0.
When run script it return TypeError: e.getId is not a function on row
var vectorSourceBis = new ol.source.Vector({
The problem seems to be in the section with the comment "Array of icon for marker". If I do not construct a vector and leave a single image for all markers, it works correctly.
This is my (wrong) code:
var locations = [
["<b>Klos</b>", 41.5063062, 20.0859109 , "id_c=87", "img\ico_red.png", 1],
["<b>Kavaja</b>", 41.183305, 19.567137 , "id_c=92", "img\ico_green.png", 2]
];
// Array of Icon features
var iconFeatures=[];
for (var i = 0; i < locations.length; i++) {
var iconFeature = new ol.Feature({
type: 'click',
luogo: locations[i][0],
url: locations[i][3],
geometry: new ol.geom.Point(ol.proj.transform([locations[i][2], locations[i][1]], 'EPSG:4326', 'EPSG:3857')),
});
iconFeatures.push(iconFeature);
}
var vectorSource = new ol.source.Vector({
features: iconFeatures
});
// Array of icon for marker
var iconStyles=[];
for (var i = 0; i < locations.length; i++) {
var iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: locations[i][4],
scale: 1
})
});
iconStyles.push(iconStyle);
}
var vectorSourceBis = new ol.source.Vector({
features: iconStyles
});
var vectorLayer = new ol.layer.Vector({
source: vectorSource,
style: vectorSourceBis,
updateWhileAnimating: true,
updateWhileInteracting: true,
});
// Initial map view
var mapCenter = ol.proj.fromLonLat([ 19.7583493375,41.4856463875 ]);
var view = new ol.View({
center: mapCenter,
zoom: 6
});
// Create map
var map = new ol.Map({
target: 'map',
view: view,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
vectorLayer,
],
loadTilesWhileAnimating: true,
});
What's wrong?
Take a look at the example I made for you. In the example, the icon style is created and set to the feature, that is the way you symbolize each feature with a different style.
<!doctype html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/css/ol.css" type="text/css">
<style>
.map {
height: 400px;
width: 100%;
}
</style>
<script src="https://cdn.jsdelivr.net/gh/openlayers/openlayers.github.io@master/en/v6.1.1/build/ol.js"></script>
<title>Icon Features</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
let locations = [
["<b>Klos</b>", 41.5063062, 20.0859109 , "id_c=87", "https://openlayers.org/en/latest/examples/data/square.svg", 1],
["<b>Kavaja</b>", 41.183305, 19.567137 , "id_c=92", "https://openlayers.org/en/latest/examples/data/dot.png", 2]
];
// Array of Icon features
const iconFeatures=[];
for (let i = 0; i < locations.length; i++) {
const iconFeature = new ol.Feature({
type: 'click',
luogo: locations[i][0],
url: locations[i][3],
geometry: new ol.geom.Point(
ol.proj.transform([locations[i][2], locations[i][1]], 'EPSG:4326', 'EPSG:3857')
)
});
const iconStyle = new ol.style.Style({
image: new ol.style.Icon({
anchor: [0.5, 0.5],
anchorXUnits: 'fraction',
anchorYUnits: 'fraction',
src: locations[i][4],
scale: 1
})
});
iconFeature.setStyle(iconStyle);
iconFeatures.push(iconFeature);
}
const vectorSource = new ol.source.Vector({
features: iconFeatures
});
const vectorLayer = new ol.layer.Vector({
source: vectorSource,
updateWhileAnimating: true,
updateWhileInteracting: true,
});
// map
const mapCenter = ol.proj.fromLonLat([ 19.7583493375,41.4856463875 ]);
const view = new ol.View({
center: mapCenter,
zoom: 6
});
const map = new ol.Map({
target: 'map',
view: view,
layers: [
new ol.layer.Tile({
source: new ol.source.OSM(),
}),
vectorLayer,
],
loadTilesWhileAnimating: true,
});
</script>
</body>
</html>BTW, I am using the icons from OL Examples - Icon Color