Browse Library
Sign In Start Free Trial
Close icon Search icon
Account
Browse Library Advanced Search Sign In Start Free Trial

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • OpenLayers 2.10 Beginner's Guide
  • Toc
  • feedback
OpenLayers 2.10 Beginner's Guide

OpenLayers 2.10 Beginner's Guide

4.2 (9)
close
OpenLayers 2.10 Beginner's Guide

OpenLayers 2.10 Beginner's Guide

4.2 (9)

Overview of this book

Table of Contents (18 chapters)
close
close
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
1
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
2
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
3
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
4
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
5
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
6
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
7
Styling Controls
chevron up
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
8
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
9
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
10
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
11
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

Time for Action – using external CSS files

Let's create a simple page using an external CSS style sheet file (a .css file), making use of IDs and classes.

  1. Create a new, empty HTML file. We'll just make a basic HTML5 page with a few <div> tags to demonstrate CSS inheritance. We'll also include a <link> tag that will reference a CSS file created in the next step, which contains all our CSS code.

  2. First, we'll need to start the HTML page with a DOCTYPE tag that tells browsers this is an HTML5 standard page. Then, we'll need an html tag and a head tag, which contains some meta information (such as a title tag), and our JavaScript and CSS file links.

    <!DOCTYPE html> 
<html lang='en'> 
<head> 
    <meta charset='utf-8' /> 
    <link rel='stylesheet' href='ex1_style.css' /> 
    <title>Ugly_Webpage_01</title> 
</head>

  3. Now, we'll need to create a body tag which will contain our page's actual content. We'll also put in some div tags, which act...

Unlock full access

Continue reading for free

A Packt free trial gives you instant online access to our library of over 7000 practical eBooks and videos, constantly updated with the latest in tech
Start a 7-day FREE trial
End of Section 3
Next Section
bookmark search playlist font-size

Change the font size

margin-width

Change margin width

day-mode

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Delete Bookmark

Modal Close icon
Are you sure you want to delete it?
Cancel
Yes, Delete