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

Setting attributes


As you must have wondered, setting attributes requires much more consideration than simply mapping them to an element. In this example, called ch04_setattributes, we will create a form with the existing attributes. In the form, the user will be able to change the attribute values, add new ones to the feature, and remove them. We will extend the previous example to achieve our goal.

Styling the form

Our form can have multiple possible layouts. A row with attributes will surely contain the attribute name, the attribute value, and a remove button. However, depending on the attribute's state, the name can be a span or a text input element. Besides the rows, the form will have the add and save buttons. As we will create a new div element for every row, we can create some simple CSS logic for these different cases:

.popup span {
    display: inline-block;
    width: 5%;
}
.popup span:first-child {
    float: left;
    width: 40%;
}
.popup input[type=text] {
    width: 50%;
   ...
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