Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer, Erik Hazzard
Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer, Erik Hazzard

Overview of this book

<p>This book is a practical, hands-on guide that provides you with all the information you need to get started with mapping using the OpenLayers 3 library.</p> <p>The book starts off by showing you how to create a simple map. Through the course of the book, we will review each component needed to make a map in OpenLayers 3, and you will end up with a full-fledged web map application. You will learn the key role of each OpenLayers 3 component in making a map, and important mapping principles such as projections and layers. You will create your own data files and connect to backend servers for mapping. A key part of this book will also be dedicated to building a mapping application for mobile devices and its specific components.</p>
Table of Contents (22 chapters)
OpenLayers 3 Beginner's Guide
Credits
About the Authors
About the Reviewers
www.PacktPub.com
Preface
Index

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. In the first step, we created an object to act as a cache for our styles, so that we don't create them multiple times (that's inefficient!), and in the second, we updated our style function to create...