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

Add to playlist

Create a Playlist

Modal Close icon
You need to login to use this feature.
  • Book Overview & Buying OpenLayers 2.10 Beginner's Guide
  • Table Of Contents Toc
OpenLayers 2.10 Beginner's Guide

OpenLayers 2.10 Beginner's Guide

By : Erik Hazzard
4.2 (9)
Buy this Book
close
close
OpenLayers 2.10 Beginner's Guide

OpenLayers 2.10 Beginner's Guide

4.2 (9)
By: Erik Hazzard
Buy this Book

Overview of this book

This is a beginner's guide with the essential screenshots and clearly explained code, which also serves as a reference. This book is for anyone who has any interest in using maps on their website, from hobbyists to professional web developers. OpenLayers provides a powerful, but easy-to-use, pure JavaScript and HTML (no third-party plug-ins involved) toolkit to quickly make cross-browser web maps. A basic understanding of JavaScript will be helpful, but there is no prior knowledge required to use this book. If you've never worked with maps before, this book will introduce you to some common mapping topics and gently guide you through the OpenLayers library. If you're an experienced application developer, this book will also serve as a reference to the core components of OpenLayers.
Table of Contents (18 chapters)
close
close
close
OpenLayers 2.10
Icon
OpenLayers 2.10
Credits
Icon
Credits
About the Author
Icon
About the Author
About the Reviewers
Icon
About the Reviewers
www.PacktPub.com
Icon
www.PacktPub.com
Preface
Icon
Preface
Lock Free Chapter
1
Getting Started with OpenLayers
Icon
Getting Started with OpenLayers
Icon
What is OpenLayers?
Icon
What, technically, is OpenLayers?
Icon
Anatomy of a web-mapping application
Icon
Relation to Google / Yahoo! / and other mapping APIs
Icon
The OpenLayers website
Icon
Time for action – downloading OpenLayers
Icon
Time for action – creating your first map
Icon
How the code works
Icon
Behind the scenes—Object Oriented Programming (OOP)
Icon
Time for Action – play MadLibs
Icon
Now what?
Icon
Where to go for help
Icon
OpenLayers source code repository
Icon
Summary
2
Squashing Bugs With Firebug
Icon
Squashing Bugs With Firebug
Icon
What is Firebug?
Icon
Setting up Firebug
Icon
Time for Action – downloading Firebug
Icon
Firebug controls
Icon
Panel conclusion
Icon
Using the Console panel
Icon
Time for Action – executing code in the Console
Icon
Time for Action – creating object literals
Icon
Time for Action – interacting with a map
Icon
Summary
3
The 'Layers' in OpenLayers
Icon
The 'Layers' in OpenLayers
Icon
What's a layer?
Icon
Layers in OpenLayers
Icon
Time for Action – creating a map with multiple layers
Icon
Creating layer objects
Icon
Time for Action – configuring the options parameter
Icon
Configuring layer options
Icon
Map tiles
Icon
Available layer properties
Icon
The OpenLayers.Layer class
Icon
Other layer types
Icon
Time for Action – creating a Google Maps layer
Icon
Time for Action – using the image layer
Icon
Accessing layer objects
Icon
Time for Action – accessing map.layers
Icon
Time for Action – accessing layer objects in Firebug
Icon
Layer class methods
Icon
Time for Action – defining a global layer object variable
Icon
Summary
4
Wrapping Our Heads Around Projections
Icon
Wrapping Our Heads Around Projections
Icon
Map projections
Icon
Time for Action – using different projection codes
Icon
Time for Action – determining LonLat coordinates
Icon
OpenLayers projection class
Icon
Transforming projections
Icon
Time for Action – coordinate transforms
Icon
Time for Action – setting up Proj4js.org
Icon
Summary
5
Interacting with Third Party APIs
Icon
Interacting with Third Party APIs
Icon
Third party mapping APIs
Icon
Google Maps
Icon
Time for Action – using Goole Maps V3 (standard way)
Icon
Time for Action – creating a Google Map layer with V2 (Deprecated)
Icon
Yahoo! Maps API
Icon
Time for Action – using the Yahoo! Maps Layer
Icon
Microsoft's mapping API
Icon
Time for Action – creating a Bing/Virtual Earth Layer
Icon
OpenStreetMap
Icon
Time for Action – creating an OpenStreetMap Layer
Icon
Spherical Mercator
Icon
Time for Action – using Spherical Mercator
Icon
Using Google Maps and other layers
Icon
Time For Action – creating your first mashup
Icon
Summary
6
Taking Control of Controls
Icon
Taking Control of Controls
Icon
What are controls?
Icon
Adding controls to your map
Icon
Time for Action – creating a map with no controls
Icon
Time for Action – adding controls to a map
Icon
OpenLayers.Control class
Icon
OpenLayers.Control subclasses
Icon
Time for Action – using attributions
Icon
Time for Action – using the NavigationHistory control
Icon
Panels
Icon
Time for Action – using Panels
Icon
Creating our own controls
Icon
Creating a custom button
Icon
Time for Action – creating a simple button
Icon
Events
Icon
Time for Action – creating a custom TYPE_TOGGLE control
Icon
Summary
7
Styling Controls
chevron up
Icon
Styling Controls
Icon
What is CSS?
Icon
Time for Action – using external CSS files
Icon
OpenLayers and CSS
Icon
Time for Action – styling controls
Icon
Time for Action – styling the LayerSwitcher control
Icon
Other resources
Icon
Summary
8
Charting the Map Class
Icon
Charting the Map Class
Icon
The Map class
Icon
Map class properties
Icon
Time for Action – using the allOverlays Map property
Icon
Time for Action – setting zoom levels and maxExtent
Icon
Time for Action – using resolutions array
Icon
Time for Action – using Min and Max resolution
Icon
Time for Action – Using scales
Icon
Time for Action – working with Pan animations
Icon
Map functions
Icon
Time for Action – using control methods
Icon
Time for Action – using coordinate related functions
Icon
Doing stuff with events
Icon
Time for Action – using eventListeners
Icon
Time for Action – working with Map events
Icon
Multiple maps
Icon
Time for Action – using multiple map objects
Icon
Time for Action – creating a multiple map and custom event application
Icon
Summary
9
Using Vector Layers
Icon
Using Vector Layers
Icon
What is the Vector Layer?
Icon
Time for Action – creating a Vector Layer
Icon
How the Vector Layer works
Icon
Time for Action – changing the Renderers array
Icon
Vector Layer class
Icon
Time for Action – adding features
Icon
Time for Action – destroying features
Icon
Time For Action – working with feature events
Icon
Vector Layer class events
Icon
Time For Action – using Vector Layer events
Icon
Time For Actions – working with more events
Icon
Geometry and Feature classes
Icon
Time for Action – using Geometry class methods
Icon
Time For Action – using the SelectFeature control
Icon
The Vector class, part two
Icon
Time for Action – creating a Vector Layer
Icon
Using the Vector Layer without a Protocol class
Icon
Time for Action – using the Format and Strategy classes alone
Icon
Format class
Icon
Strategy class
Icon
Summary
10
Vector Layer Style Guide
Icon
Vector Layer Style Guide
Icon
Styling the Vector Layer
Icon
Time For Action – applying some basic Styling
Icon
The StyleMap class
Icon
The Style class
Icon
Time for Action – common style examples
Icon
Attribute replacement
Icon
Time For Action – working with attribute replacement
Icon
Rules and filters
Icon
Time For Action – using addUniqueValueRules
Icon
Rules and filters
Icon
Time for Action – using rules and filters
Icon
OpenLayers.Rule class
Icon
OpenLayers.Filter class
Icon
Time For Action – figuring out logical filters
Icon
Summary
11
Making Web Map Apps
Icon
Making Web Map Apps
Icon
Development strategies
Icon
Creating a web map application using Flickr
Icon
Time For Action – getting Flickr data
Icon
Time for Action – adding data to your map
Icon
Time for Action – extract style
Icon
Turning our example into an application
Icon
Time for Action – adding some interactivity
Icon
Using real time data with a ProxyHost
Icon
Time for Action – getting dynamic data
Icon
Wrapping up the application
Icon
Time For Action – adding dynamic tags to your map
Icon
Deploying an application
Icon
Building the OpenLayers Library file
Icon
Time for Action – building a Config file
Icon
Time for Action – running the Build script
Icon
Summary
1
Index
Icon
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...

CONTINUE READING
83
Tech Concepts
36
Programming languages
73
Tech Tools
Icon Unlimited access to the largest independent learning library in tech of over 8,000 expert-authored tech books and videos.
Icon Innovative learning tools, including AI book assistants, code context explainers, and text-to-speech.
Icon 50+ new titles added per month and exclusive early access to books as they are being written.
OpenLayers 2.10 Beginner's Guide
End of Section 7
Next Section
notes
bookmark Notes and Bookmarks search Search in title playlist Add to playlist font-size Font size

Change the font size

margin-width Margin width

Change margin width

day-mode Day/Sepia/Night Modes

Change background colour

Close icon Search
Country selected
Close icon Your notes and bookmarks

Confirmation

Modal Close icon
claim successful
Order Page Read Now

Buy this book with your credits?

Modal Close icon
Are you sure you want to buy this book with one of your credits?
Close
YES, BUY

Submit Your Feedback

Modal Close icon
Modal Close icon
Modal Close icon