Custom Style Example

styling, css, stylesheet, theming, theme

Demonstrate changing CSS styles on controls in the OpenLayers window.

If you care to modify the style of any OpenLayers element, include the default stylesheet as a link and declare any style modifications below that link. These style declarations can be in other linked stylesheets or in style tags. In addition, construct your map with options that include {theme: null}. This will disable the default method of loading the stylesheet and allow you to declare style rules in your own linked stylesheets or style tags.

This example shows how to declare the font family, size, and color for the mouse position. Note that only the style keys that you want to modify (change from the default) need to be specified.