Book Image

OpenLayers Cookbook

Book Image

OpenLayers Cookbook

Overview of this book

Data visualization and analysis has become an important task for many companies. Understanding the basic concepts of GIS and knowing how to visualize data on a map is a required ability for many professionals today. OpenLayers is a JavaScript library to load, display, and render maps from multiple sources on web pages."OpenLayers Cookbook" teaches how to work with OpenLayers, one of the most important and complete open source JavaScript libraries.Through an extensive set of recipes, this book shows how to work with the main concepts required to build a GIS web applicationñ maps, raster and vector layers, styling, theming, and so on."OpenLayers Cookbook" includes problem solving and how-to recipes for the most common and important tasks. A wide range of topics are covered.The range of recipes includes: creating basic maps, working with raster and vector layers, understanding events and working with main controls, reading features from different data sources, styling features, and understanding the underlying architecture."OpenLayers Cookbook" describes solutions and optimizations to problems commonly found.
Table of Contents (15 chapters)
OpenLayers Cookbook
Credits
About the Author
About the Reviewers
www.PacktPub.com
Preface
Index

Working with geolocation


With the arrival of HTML5, one of the many new APIs and concepts introduced in the specification is the possibility to identify the location of the client that is loading the web page, through the Geolocation API (http://dev.w3.org/geo/api/spec-source.html). Of course, in the world of web mapping applications, this opens new and great possibilities.

In this recipe, we are going to show how easily we can identify the current location of the user and center the map's viewport to it:

Every time the user clicks on the Geolocation button, the map's viewport will be moved to the current user's location and a marker will be placed on it. Also, when the mouse goes over the marker, a popup with the current location will be shown.

Getting ready

As we mentioned at the beginning of the recipe, Geolocation is a feature that the browser must implement, so we need an HTML5 compliant browser to make this control work.

How to do it...

  1. First create the HTML file with OpenLayers dependencies...