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 animated maps


The best way to understand these animation functions is to try them out. Start from the previous example:

  1. First, add some buttons to trigger the animation effects:

    <button onclick="doBounce(london);">Bounce To London</button>
    <button onclick="doBounce(rome);">Bounce To Rome</button
    <button onclick="doPan(london);">Pan To London</button>
    <button onclick="doPan(rome);">Pan To Rome</button>
    <button onclick="doRotate();">Rotate</button>
    <button onclick="doZoom(2);">Zoom Out</button>
    <button onclick="doZoom(0.5);">Zoom In</button>

    These are regular HTML buttons that call a function when clicked. We'll add the functions in a moment.

  2. Next, add a new location for Rome, next to the line where we defined the location of London:

    var rome = ol.proj.transform([12.5, 41.9], 'EPSG:4326', 'EPSG:3857');
  3. Now, we'll add functions at the end of our <script> tag to handle the button clicks...