OpenLayers 3 Beginner’s Guide

Creating a thumbnail style

Open sample in a new windows

<!doctype html>
    <title>Flickr Search</title>
    <link rel="stylesheet" href="../assets/ol3/css/ol.css" type="text/css" />
    <link rel="stylesheet" href="../assets/css/samples.css" type="text/css" />
    <div id="map" class="map"></div>
    <script src=""></script>
    <script src="../assets/ol3/js/ol-debug.js"></script>

    var flickrSource = new ol.source.Vector();

    // a cache for the style objects, always good practice
    var cache = {};

    function flickrStyle(feature) {
      // cache styles by photo url
      var url = feature.get('url');
      if (!cache[url]) {
        // use the icon style and scale the image to 10% so its not too large
        cache[url] = new{
          image: new{
            scale: 0.10,
            src: url
      return [cache[url]];

    var flickrLayer = new ol.layer.Vector({
      source: flickrSource,
      style: flickrStyle

    var layer = new ol.layer.Tile({
      source: new ol.source.OSM()

    var center = ol.proj.transform([0,0], 'EPSG:4326', 'EPSG:3857');

    var view = new ol.View({
      center: center,
      zoom: 2

    var map = new ol.Map({
      target: 'map',
      layers: [layer, flickrLayer],
      view: view

    function successHandler(data) {
      var transform = ol.proj.getTransform('EPSG:4326', 'EPSG:3857');
      data.items.forEach(function(item) {
        var feature = new ol.Feature(item);
        var coordinate = transform([parseFloat(item.longitude), parseFloat(item.latitude)]);
        var geometry = new ol.geom.Point(coordinate);

      url: '../assets/data/flickr_data.json',
      dataType: 'jsonp',
      jsonpCallback: 'jsonFlickrFeed',
      success: successHandler