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

Adding a KML layer


The arrival of Google Maps leads to an explosion in the world of GIS and web mapping. Google introduced not only an API but also some file formats.

The Keyhole Markup Language (KML) had become one of the most extensively used formats, and finally it became an OGC standard.

This recipe will show you how easy it is to add features from a KML file. You can find the necessary files in the KML format attached to the source code of this book available on the Packt Publishing website.

How to do it...

  1. Create an HTML file including the OpenLayers library and insert the following code in it. First, add the DOM element that will hold the map:

    <!-- Map DOM element --> 
    <div id="ch3_kml" style="width: 100%; height: 100%;"></div> 
  2. Next, initialize a map instance, add a base layer, add a layer switcher control, and center the view:

    <!-- The magic comes here --> 
    <script type="text/javascript"> 
    
        // Create the map using the specified DOM element 
        var map...