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

Playing with StyleMap and the render intents


There are some controls, such as SelectFeature, ModifyFeature, or EditingToolbar, which change the style of the feature depending on its current state, that is, if it is selected or is currently being edited. How does OpenLayers manage this? The answer is, through the render intents:

This recipe shows how we can modify the styles used for each render intent to change the look of our applications.

This way, features will be drawn on the map using blue instead of orange. Temporary features, those that are going to be created, will be drawn using green. Finally, those features that are selected, or are in the middle of the modification process, will be drawn using orange.

How to do it...

  1. Create a new HTML file and add the OpenLayers dependencies. The first step is to add the div element to hold the map instance:

    <div id="ch07_rendering_intents" style="width: 100%; height: 95%;"></div>
  2. In the JavaScript section, initialize the map instance...