Search icon CANCEL
Subscription
0
Cart icon
Your Cart (0 item)
Close icon
You have no products in your basket yet
Arrow left icon
Explore Products
Best Sellers
New Releases
Books
Videos
Audiobooks
Learning Hub
Conferences
Free Learning
Arrow right icon
Arrow up icon
GO TO TOP
Mastering OpenLayers 3

You're reading from   Mastering OpenLayers 3 Create powerful applications with the most robust open source web mapping library using this advanced guide

Arrow left icon
Product type Paperback
Published in Jan 2016
Publisher
ISBN-13 9781785281006
Length 308 pages
Edition 1st Edition
Languages
Arrow right icon
Author (1):
Arrow left icon
G√°bor Farkas G√°bor Farkas
Author Profile Icon G√°bor Farkas
G√°bor Farkas
Arrow right icon
View More author details
Toc

Table of Contents (12) Chapters Close

Preface 1. Creating Simple Maps with OpenLayers 3 2. Applying Custom Styles FREE CHAPTER 3. Working with Layers 4. Using Vector Data 5. Creating Responsive Applications with Interactions and Controls 6. Controlling the Map – View and Projection 7. Mastering Renderers 8. OpenLayers 3 for Mobile 9. Tools of the Trade – Integrating Third-Party Applications 10. Compiling Custom Builds with Closure Index

Adding new vector layers


In this example, ch05_newvector, we take a little detour back to our layer tree model. We have to make some inevitable enhancements to it before we can proceed to our next goal. We are going to create an option to add new, typed vector layers. We also need to create an event firing mechanism that can be used to detect changes in the currently active layer.

Creating the HTML and the CSS

As we extend our layer tree with a new layer addition option, we have to create the required HTML form and CSS rule for it. Both of them are very simple. The rule only contains the URL of the background image as usual:

.layertree-buttons .newvector {
    background-image: url(../../res/button_newvector.png);
}

The HTML form enables us to name the layer and choose a type for it. The type can be one of the main vector types: point, line, or polygon. We also allow you to choose a collection type: geometry collection. Later, we will restrict the drawing options based on the layer's type:

&lt...
lock icon The rest of the chapter is locked
Register for a free Packt account to unlock a world of extra content!
A free Packt account unlocks extra newsletters, articles, discounted offers, and much more. Start advancing your knowledge today.
Unlock this book and the full library FREE for 7 days
Get unlimited access to 7000+ expert-authored eBooks and videos courses covering every tech area you can think of
Renews at $19.99/month. Cancel anytime
Banner background image