Styling Controls | OpenLayers 2.10 Beginner's Guide

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents

OpenLayers 2.10 Beginner's Guide

4.2 (9)

OpenLayers 2.10 Beginner's Guide

4.2 (9)

Overview of this book

OpenLayers 2.10

OpenLayers 2.10

Credits

Credits

About the Author

About the Author

About the Reviewers

About the Reviewers

www.PacktPub.com

www.PacktPub.com

Preface

Preface

Free Chapter

Getting Started with OpenLayers

Getting Started with OpenLayers

What is OpenLayers?

What, technically, is OpenLayers?

Anatomy of a web-mapping application

Relation to Google / Yahoo! / and other mapping APIs

The OpenLayers website

Time for action – downloading OpenLayers

Time for action – creating your first map

How the code works

Behind the scenes—Object Oriented Programming (OOP)

Time for Action – play MadLibs

Now what?

Where to go for help

OpenLayers source code repository

Summary

Squashing Bugs With Firebug

Squashing Bugs With Firebug

What is Firebug?

Setting up Firebug

Time for Action – downloading Firebug

Firebug controls

Panel conclusion

Using the Console panel

Time for Action – executing code in the Console

Time for Action – creating object literals

Time for Action – interacting with a map

Summary

The 'Layers' in OpenLayers

The 'Layers' in OpenLayers

What's a layer?

Layers in OpenLayers

Time for Action – creating a map with multiple layers

Creating layer objects

Time for Action – configuring the options parameter

Configuring layer options

Map tiles

Available layer properties

The OpenLayers.Layer class

Other layer types

Time for Action – creating a Google Maps layer

Time for Action – using the image layer

Accessing layer objects

Time for Action – accessing map.layers

Time for Action – accessing layer objects in Firebug

Layer class methods

Time for Action – defining a global layer object variable

Summary

Wrapping Our Heads Around Projections

Wrapping Our Heads Around Projections

Map projections

Time for Action – using different projection codes

Time for Action – determining LonLat coordinates

OpenLayers projection class

Transforming projections

Time for Action – coordinate transforms

Time for Action – setting up Proj4js.org

Summary

Interacting with Third Party APIs

Interacting with Third Party APIs

Third party mapping APIs

Google Maps

Time for Action – using Goole Maps V3 (standard way)

Time for Action – creating a Google Map layer with V2 (Deprecated)

Yahoo! Maps API

Time for Action – using the Yahoo! Maps Layer

Microsoft's mapping API

Time for Action – creating a Bing/Virtual Earth Layer

OpenStreetMap

Time for Action – creating an OpenStreetMap Layer

Spherical Mercator

Time for Action – using Spherical Mercator

Using Google Maps and other layers

Time For Action – creating your first mashup

Summary

Taking Control of Controls

Taking Control of Controls

What are controls?

Adding controls to your map

Time for Action – creating a map with no controls

Time for Action – adding controls to a map

OpenLayers.Control class

OpenLayers.Control subclasses

Time for Action – using attributions

Time for Action – using the NavigationHistory control

Panels

Time for Action – using Panels

Creating our own controls

Creating a custom button

Time for Action – creating a simple button

Events

Time for Action – creating a custom TYPE_TOGGLE control

Summary

Styling Controls

Styling Controls

What is CSS?

Time for Action – using external CSS files

OpenLayers and CSS

Time for Action – styling controls

Time for Action – styling the LayerSwitcher control

Other resources

Summary

Charting the Map Class

Charting the Map Class

The Map class

Map class properties

Time for Action – using the allOverlays Map property

Time for Action – setting zoom levels and maxExtent

Time for Action – using resolutions array

Time for Action – using Min and Max resolution

Time for Action – Using scales

Time for Action – working with Pan animations

Map functions

Time for Action – using control methods

Time for Action – using coordinate related functions

Doing stuff with events

Time for Action – using eventListeners

Time for Action – working with Map events

Multiple maps

Time for Action – using multiple map objects

Time for Action – creating a multiple map and custom event application

Summary

Using Vector Layers

Using Vector Layers

What is the Vector Layer?

Time for Action – creating a Vector Layer

How the Vector Layer works

Time for Action – changing the Renderers array

Vector Layer class

Time for Action – adding features

Time for Action – destroying features

Time For Action – working with feature events

Vector Layer class events

Time For Action – using Vector Layer events

Time For Actions – working with more events

Geometry and Feature classes

Time for Action – using Geometry class methods

Time For Action – using the SelectFeature control

The Vector class, part two

Time for Action – creating a Vector Layer

Using the Vector Layer without a Protocol class

Time for Action – using the Format and Strategy classes alone

Format class

Strategy class

Summary

Vector Layer Style Guide

Vector Layer Style Guide

Styling the Vector Layer

Time For Action – applying some basic Styling

The StyleMap class

The Style class

Time for Action – common style examples

Attribute replacement

Time For Action – working with attribute replacement

Rules and filters

Time For Action – using addUniqueValueRules

Rules and filters

Time for Action – using rules and filters

OpenLayers.Rule class

OpenLayers.Filter class

Time For Action – figuring out logical filters

Summary

Making Web Map Apps

Making Web Map Apps

Development strategies

Creating a web map application using Flickr

Time For Action – getting Flickr data

Time for Action – adding data to your map

Time for Action – extract style

Turning our example into an application

Time for Action – adding some interactivity

Using real time data with a ProxyHost

Time for Action – getting dynamic data

Wrapping up the application

Time For Action – adding dynamic tags to your map

Deploying an application

Building the OpenLayers Library file

Time for Action – building a Config file

Time for Action – running the Build script

Summary

Index

Index

OpenLayers and CSS

OpenLayers applies class names and IDs to most every HTML element it creates, so customizing your map's UI is quite easy once we know how it generates class names and IDs. Before we talk about how to override styles though, we need to know where the style files themselves are.

Styling OpenLayers—using themes

In OpenLayers, themes are used to control the appearance of your UI elements. A theme is comprised of a CSS file and any related user interface images. OpenLayers applies a lot of styles to your map by default, using a theme called default. Creating your own theme is easy though.

If you want to create custom UI styles for your map, you'll essentially need to either create a 'theme folder' which will contain a CSS file and images for your UI controls to use (e.g., pan arrow images), or manually overwrite certain default styles. The theme folder can be anywhere you'd like, just keep in mind what its path is when referencing it in your HTML file.

To use your own theme, you...

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 2.10 Beginner's Guide

Search

Your notes and bookmarks