ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Permit custom styling by setting theme:null in map.options and including the theme CSS manually. Fixes #460.

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@2844 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
Schuyler Erle
2007-03-22 11:21:16 +00:00
parent 0c8dcabce8
commit e45094ea0c
2 changed files with 61 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
examples/custom-style.html Normal file
View File

@@ -0,0 +1,53 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 500px;
height: 350px;
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()">
<div id="map"></div>
<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>
</body>
</html>

13
lib/OpenLayers/Map.js
View File

@@ -175,11 +175,14 @@ OpenLayers.Map.prototype = {
//set the default options
this.setOptions(options);
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', this.theme);
document.getElementsByTagName('head')[0].appendChild(cssNode);
// only append link stylesheet if the theme property is set
if(this.theme) {
var cssNode = document.createElement('link');
cssNode.setAttribute('rel', 'stylesheet');
cssNode.setAttribute('type', 'text/css');
cssNode.setAttribute('href', this.theme);
document.getElementsByTagName('head')[0].appendChild(cssNode);
}
this.layers = [];