-
Notifications
You must be signed in to change notification settings - Fork 769
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Unmixing line endings. No functional change.
git-svn-id: http://svn.openlayers.org/trunk/openlayers@9038 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
- Loading branch information
Showing
15 changed files
with
1,033 additions
and
1,033 deletions.
There are no files selected for viewing
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,49 +1,49 @@ | ||
Customizing OpenLayers | ||
====================== | ||
OpenLayers is designed to fit many needs -- fitting in alongside all kinds of | ||
various applications which are currently in use. | ||
Currently, OpenLayers supports a 'theme' option when creating a map. This | ||
theme option allows you to specify the location of a CSS theme which should | ||
be included. | ||
A default theme is available as an example in the theme/ directory: the setup | ||
is: | ||
* theme/ | ||
* theme/default/ | ||
* theme/default/style.css | ||
* theme/default/img/ | ||
Currently, the OpenLayers code does not support class names, and therefore, | ||
it is not possible to control many aspects of OpenLayers code with CSS | ||
classes. However, with this framework in place, we expect to invest time | ||
to make existing features and new features use the CSS theming framework | ||
where apropriate. | ||
Class Naming | ||
============ | ||
Elements should have class names which are descriptive of the Javascript | ||
class from which they come. For example, the main layer switcher element | ||
in the OpenLayers.Control.LayerSwitcher would be classed: | ||
olControlLayerSwitcher | ||
This would allow users to add to their style.css class in their theme, | ||
changing, for example: | ||
:: | ||
.olControlLayerSwitcher input { | ||
width:10px; | ||
} | ||
Sub elements of a particular control can add to the class name: | ||
:: | ||
.olControlLayerSwitcherBaseLabel { | ||
color: red; | ||
} | ||
Customizing OpenLayers | ||
====================== | ||
|
||
OpenLayers is designed to fit many needs -- fitting in alongside all kinds of | ||
various applications which are currently in use. | ||
|
||
Currently, OpenLayers supports a 'theme' option when creating a map. This | ||
theme option allows you to specify the location of a CSS theme which should | ||
be included. | ||
|
||
A default theme is available as an example in the theme/ directory: the setup | ||
is: | ||
|
||
* theme/ | ||
* theme/default/ | ||
* theme/default/style.css | ||
* theme/default/img/ | ||
|
||
Currently, the OpenLayers code does not support class names, and therefore, | ||
it is not possible to control many aspects of OpenLayers code with CSS | ||
classes. However, with this framework in place, we expect to invest time | ||
to make existing features and new features use the CSS theming framework | ||
where apropriate. | ||
|
||
|
||
Class Naming | ||
============ | ||
Elements should have class names which are descriptive of the Javascript | ||
class from which they come. For example, the main layer switcher element | ||
in the OpenLayers.Control.LayerSwitcher would be classed: | ||
|
||
olControlLayerSwitcher | ||
|
||
This would allow users to add to their style.css class in their theme, | ||
changing, for example: | ||
|
||
:: | ||
|
||
.olControlLayerSwitcher input { | ||
width:10px; | ||
} | ||
|
||
Sub elements of a particular control can add to the class name: | ||
|
||
:: | ||
|
||
.olControlLayerSwitcherBaseLabel { | ||
color: red; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,7 +1,7 @@ | ||
Automatically generated OpenLayers API documentation is online: | ||
http://dev.openlayers.org/apidocs | ||
More information on documentation is available from: | ||
http://trac.openlayers.org/wiki/Documentation | ||
Automatically generated OpenLayers API documentation is online: | ||
|
||
http://dev.openlayers.org/apidocs | ||
|
||
More information on documentation is available from: | ||
|
||
http://trac.openlayers.org/wiki/Documentation |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,56 +1,56 @@ | ||
<html> | ||
<head> | ||
<title>Pan and Zoom Panels</title> | ||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> | ||
|
||
<!-- | ||
-- Special stylesheet inclusion for ie6, which doesn't handle the alpha | ||
-- channel of images correctly. The special ie6 stylesheet will only | ||
-- be included if the browser running is ie6. For now, the only thing it | ||
-- does is load alternative, non-alpha pngs for the zoom/pan panels. | ||
--> | ||
|
||
<!--[if lte IE 6]> | ||
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" /> | ||
<![endif]--> | ||
|
||
<link rel="stylesheet" href="style.css" type="text/css" /> | ||
<script type="text/javascript" src="../lib/OpenLayers.js"></script> | ||
<script> | ||
var map; | ||
var lon = 5; | ||
var lat = 40; | ||
var zoom = 5; | ||
function init(){ | ||
map = new OpenLayers.Map("map", { | ||
controls: [ | ||
new OpenLayers.Control.Navigation(), | ||
new OpenLayers.Control.PanPanel(), | ||
new OpenLayers.Control.ZoomPanel() | ||
] | ||
}); | ||
|
||
var wms = new OpenLayers.Layer.WMS( | ||
"OpenLayers WMS", | ||
"http://labs.metacarta.com/wms/vmap0", | ||
{layers: 'basic'} | ||
); | ||
map.addLayers([wms]); | ||
|
||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); | ||
} | ||
</script> | ||
</head> | ||
<body onload='init();'> | ||
<h1 id="title">Pan and Zoom Panels</h1> | ||
<div id="tags"></div> | ||
<p id="shortdesc">Customizable pan and zoom panels</p> | ||
</p> | ||
<div id="map" class="smallmap"></div> | ||
<p id="docs"> | ||
The pan and zoom panels allow you to use CSS styling to change the | ||
look and feel of the panels, including changing their position | ||
and their icons without needing to change any code. | ||
</p> | ||
</body> | ||
</html> | ||
<html> | ||
<head> | ||
<title>Pan and Zoom Panels</title> | ||
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" /> | ||
|
||
<!-- | ||
-- Special stylesheet inclusion for ie6, which doesn't handle the alpha | ||
-- channel of images correctly. The special ie6 stylesheet will only | ||
-- be included if the browser running is ie6. For now, the only thing it | ||
-- does is load alternative, non-alpha pngs for the zoom/pan panels. | ||
--> | ||
|
||
<!--[if lte IE 6]> | ||
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" /> | ||
<![endif]--> | ||
|
||
<link rel="stylesheet" href="style.css" type="text/css" /> | ||
<script type="text/javascript" src="../lib/OpenLayers.js"></script> | ||
<script> | ||
var map; | ||
var lon = 5; | ||
var lat = 40; | ||
var zoom = 5; | ||
function init(){ | ||
map = new OpenLayers.Map("map", { | ||
controls: [ | ||
new OpenLayers.Control.Navigation(), | ||
new OpenLayers.Control.PanPanel(), | ||
new OpenLayers.Control.ZoomPanel() | ||
] | ||
}); | ||
|
||
var wms = new OpenLayers.Layer.WMS( | ||
"OpenLayers WMS", | ||
"http://labs.metacarta.com/wms/vmap0", | ||
{layers: 'basic'} | ||
); | ||
map.addLayers([wms]); | ||
|
||
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom); | ||
} | ||
</script> | ||
</head> | ||
<body onload='init();'> | ||
<h1 id="title">Pan and Zoom Panels</h1> | ||
<div id="tags"></div> | ||
<p id="shortdesc">Customizable pan and zoom panels</p> | ||
</p> | ||
<div id="map" class="smallmap"></div> | ||
<p id="docs"> | ||
The pan and zoom panels allow you to use CSS styling to change the | ||
look and feel of the panels, including changing their position | ||
and their icons without needing to change any code. | ||
</p> | ||
</body> | ||
</html> |
Oops, something went wrong.