O'Reilly logo

OpenLayers Cookbook by Antonio Santiago Perez

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Placing controls outside the map

By default, all the controls are placed on the map. This way, controls such as the PanPanel, EditingToolbar, or MousePosition are rendered on top of the map and over any layer. This is the default behavior, but OpenLayers is flexible enough to allow us to put controls outside the map:

Placing controls outside the map

In this recipe we are going to create a map where the navigation toolbar and the mouse position controls are placed outside and above the map.

How to do it...

  1. Create an HTML file and add the OpenLayers dependencies. Add the following CSS code required to redefine some aspects of the controls we are going to use:
    <style> .olControlNavToolbar ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required