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 – changing the default attribution styles


Attributions, as a reminder, are the way to mention credits for layers sources that reference source of the tiles and/or data. The ol.control.Attribution control is dedicated for this.

  1. First, copy the example dedicated to the defaults controls in a new file.

  2. Next, change the ol.control.defaults options in the controls property of the map, and also set logo options to false at the ol.Map level:

    logo: false
    controls: ol.control.defaults({
      attributionOptions: {
      },
    }),
  3. Open your browser (we suppose you are using Google Chrome).

  4. Now, add in attributionOptions to the following content and reload the page:

    attributionOptions: {
      className: 'myCustomClass'
    },
  5. Use the Chrome Developers tools to find the element with myCustomClass to try to understand the effect of the className option in attributionOptions.

  6. Now, again add a new property in attributionOptions:

    attributionOptions: {
      className: 'myCustomClass',
      target: document.getElementById...