Styling Controls | OpenLayers 2.10 Beginner's Guide

Sign In Start Free Trial

Book Overview & Buying
Table Of Contents
Feedback & Rating

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

Customer Reviews

4.2 (9)

5 star

55.6%

4 star

11.1%

3 star

33.3%

2 star

0

1 star

0

Time for Action – styling the LayerSwitcher control

Let's take a look now at how to style the LayerSwitcher control. Unlike the previous example, we'll place this control in a div element outside the map.

Start a new page. We'll link to an external CSS file that will override the base LayerSwitcher control style, like in the previous example. Include a <link> tag that references a file called ex3_layerswitcher_style.css, which we'll create soon.
Next, we'll need to create a div element that will house our control. Create a div tag after the map_element div:
```
<div id='layer_switcher_control'></div>
```
Now, in your JavaScript code, create the map and WMS layer object as normal. Add a LayerSwitcher control, and pass in the layer_switcher_control element as the div property:
```
map.addControl(new OpenLayers.Control.LayerSwitcher({
  div: document.getElementById('layer_switcher_control')
}));
```
Now, if you open up the map you should see the map with the layer switcher control beneath it:
By...

Search

Your notes and bookmarks