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 – displaying photo information


We need a programmatic way to display the information about our photos in the web page. This means taking data about the selected features and creating HTML elements for them. For the purpose of this chapter, we'll create an HTML template and populate it with data from the feature. While there are many different approaches and libraries for implementing HTML templates, our needs are simple; so, we'll do it without depending on another library.

We'll need several HTML elements to display each piece of information, and a way to specify where in the elements we want to put what information. We could write the template as a JavaScript string, but then we couldn't put line breaks into the HTML and it will be difficult to read in the code. Instead, we'll use the same technique that most templating libraries use—a <script> tag with the id and type attributes set to something other than text/javascript. We'll explain how it works later. We'll use...