Files
openlayers/examples/custom-style.html
Tim Schaub a54f36650c four tabs for spaces
git-svn-id: http://svn.openlayers.org/trunk/openlayers@6497 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
2008-03-12 14:51:37 +00:00

66 lines
2.3 KiB
HTML

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Custom Style Example</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid gray;
}
p {
width: 500px;
}
div.olControlMousePosition {
font-family: Verdana;
font-size: 0.5em;
color: red;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var lon = 5;
var lat = 40;
var zoom = 5;
var map, layer;
function init(){
var options = {theme: null};
map = new OpenLayers.Map('map', options);
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0", {layers: 'basic'} );
map.addControl(new OpenLayers.Control.MousePosition());
map.addLayer(layer);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
</script>
</head>
<body onload="init()">
<h1 id="title">Custom Style Example</h1>
<div id="tags">
</div>
<p id="shortdesc">
Demonstrate changing CSS styles on controls in the OpenLayers window.
</p>
<div id="map"></div>
<div id="docs">
<p>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.</p>
<p>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.</p>
</div>
</body>
</html>