Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

OpenLayers 3.x Cookbook - Second Edition

By : J. Langley, Antonio Santiago

4 (1)

OpenLayers 3.x Cookbook

4 (1)

By: J. Langley, Antonio Santiago

Overview of this book

OpenLayers 3 is one of the most important and complete open source JavaScript mapping libraries today. Throughout this book, you will go through recipes that expose various features of OpenLayers 3, allowing you to gain an insight into building complex GIS web applications. You will get to grips with the basics of creating a map with common functionality and quickly advance to more complicated solutions that address modern challenges. You will explore into maps, raster and vector layers, and styling in depth. This book also includes problem solving and how-to recipes for the most common and important tasks.

Preface

Preface

What this book covers

What you need for this book

Who this book is for

Sections

Conventions

Reader feedback

Customer support

Free Chapter

1. Web Mapping Basics

1. Web Mapping Basics

Introduction

Creating a simple fullscreen map

Playing with the map's options

Managing the map's stack layers

Managing the map's controls

Moving around the map view

Restricting the map's extent

2. Adding Raster Layers

2. Adding Raster Layers

Introduction

Using Bing imagery

Using OpenStreetMap imagery

Adding WMS layers

Changing the zoom effect

Changing layer opacity

Buffering the layer data to improve map navigation

Creating an image layer

Setting the tile size in WMS layers

3. Working with Vector Layers

3. Working with Vector Layers

Introduction

Adding a GML layer

Adding a KML layer

Creating features programmatically

Exporting features as GeoJSON

Reading and creating features from a WKT

Using point features as markers

Removing or cloning features using overlays

Zooming to the extent of a layer

Adding text labels to geometry points

Adding features from a WFS server

Using the cluster strategy

Reading features directly using AJAX

Creating a heat map

4. Working with Events

4. Working with Events

Introduction

Creating a side-by-side map comparator

Implementing a work-in-progress indicator for map layers

Listening for the vector layer features' events

Listening for mouse or touch events

Using the keyboard to pan or zoom

5. Adding Controls

5. Adding Controls

Introduction

Adding and removing controls

Working with geolocation

Placing controls outside the map

Drawing features across multiple vector layers

Modifying features

Measuring distances and areas

Getting feature information from a data source

Getting information from a WMS server

6. Styling Features

6. Styling Features

Introduction

Styling layers

Styling features based on geometry type

Styling based on feature attributes

Styling interaction render intents

Styling clustered features

7. Beyond the Basics

7. Beyond the Basics

Introduction

Working with projections

Creating a custom control

Selecting features by dragging out a selection area

Transitioning between weather forecast imagery

Using the custom OpenLayers library build

Drawing in freehand mode

Modifying layer appearance

Adding features to the vector layer by dragging and dropping them

Making use of map permalinks

Index

Index

Customer Reviews

4 (1)

5 star

0%

4 star

100%

3 star

0%

2 star

0%

1 star

0%

Creating a side-by-side map comparator

We are going to create a map comparator. The goal is to have two maps side-by-side from different providers and synchronize the same position and zoom level. The source code can be found in ch04/ch04-map-comparator. Here's a screenshot of our two synchronized maps, side-by-side:

Creating a side-by-side map comparator

How to do it…

To have two maps work in synchronization, perform the following steps:

Create an HTML file with OpenLayers library dependencies. In particular, the markup for the two maps and separator should look like the following:
```
<div id="js-map1"></div>
<hr/>
<div id="js-map2"></div>
```

Create a custom JavaScript file and set up the shared view:

var view = new ol.View({
  zoom: 5,
  center: [1252000, 7240000]
});

Instantiate the first map with the shared view, as follows:

var map1 = new ol.Map({
  view: view,
  target: 'js-map1',
  layers: [
    new ol.layer.Tile({source: new ol.source.OSM()})
  ]
});

Finish off...

Visually different images

CONTINUE READING

83

Tech Concepts

36

Programming languages

73

Tech Tools

Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.

Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.

50+ new titles added per month and exclusive early access to books as they are being written.

OpenLayers 3.x Cookbook

Search

Your notes and bookmarks