O'Reilly logo

OpenLayers 3 : Beginner's Guide by Erik Hazzard, Paul Spencer, Thomas Gratier

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Time for action – creating a thumbnail style

Now that we've got that sorted out, we should be able to create a thumbnail style for our photos reasonably easily:

  1. As mentioned earlier, we will want to cache our feature styles. Add an empty object that can be used for this, just before our style function:
    var cache = {};
  2. We can use the URL to the photo as the key for our cache entries. Remove all the existing code in the flickrStyle function and replace it with the following:
    function flickrStyle(feature) {
      var url = feature.get('url');
      if (!cache[url]) {
        cache[url] = new ol.style.Style({
          image: new ol.style.Icon({
            scale: 0.10,
            src: url
          })
        });
      }
      return [cache[url]];
    }

What just happened?

We just updated our style function to return a more suitable style. ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required