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

Customizing the default appearance

Now that we are clear about what parts can be customized with CSS, let's make an attempt to use it in practice. Firstly, we will need the code from the example in the previous chapter. If you look at the code appendix, you will see some files starting with ch02_css. The html and js files are exactly the same as we used in the last chapter. In this example, all the magic will take place in the css file.

Note

If you take a look at the html file, you can see our custom css file is declared after the official css file. This was done due to the phenomenon called CSS specificity. If two CSS file declarations are made to the same element with the same specificity, the order of the declarations will define the styling. As we have declared our custom css file after the official one, it will overwrite the default styling.

Identifying the classes

Open up the first example, called ch02_css.html, in your browser. You can see the already modified look of the previous...

You have been reading a chapter from
Mastering OpenLayers 3
Published in: Jan 2016
Publisher:
ISBN-13: 9781785281006
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