Book Image

OpenLayers 3: Beginner's Guide

By : Thomas Gratier, Paul Spencer
Book Image

OpenLayers 3: Beginner's Guide

By: Thomas Gratier, Paul Spencer

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 – using ol.interaction.Modify to update drawing


The assignment will be quite simple because the component at the time of writing needs some refining. It's possible to edit content but there are no events to catch at the end of modification: we will be unable to save the modified features. We will cover the client as is.

  1. Copy the first sample 2360_08_01_simple_select.html as 2360_08_08_modify.html.

  2. Before var london, add the following code:

    var modify = new ol.interaction.Modify({
      features: selectInteraction.getFeatures()
    });
  3. Replace map.getInteractions().extend([selectInteraction]); with the following code:

    map.getInteractions().extend([selectInteraction, modify]);
  4. Add the following code to manage features change:

    var selected_features = selectInteraction.getFeatures();
    selected_features.on('add', function(event) {
      var feature = event.element;
      feature.on('change', function(event){
        event.target.getGeometry().getCoordinates());
      });
    });
  5. Open the new sample, select a feature...