We'll accomplish this in two steps. First, we'll replace the default style with a simple one, and then, we'll develop a new style to display smaller thumbnails:
First, turn off automatic styling for the KML source by adding
extractStyles: false
to its options:var flickrSource = new ol.source.KML({ url: '../assets/data/flickr_data.kml', projection: 'EPSG:3857', extractStyles: false });
Now, create a new function that will generate styles for our photos, we'll use a simple circle style for now:
function flickrStyle(feature) { var style = new ol.style.Style({ image: new ol.style.Circle({ radius: 6, stroke: new ol.style.Stroke({ color: 'white', width: 2 }), fill: new ol.style.Fill({ color: 'green' }) }) }); return [style]; }
That should do it, check out the result in the browser. This is what it looks like with the data saved in the
assets
folder, yours will look different if you...