diff --git a/examples/using-proj4js.html b/examples/using-proj4js.html index 0ed6a8b36b..f83fdbc8fc 100644 --- a/examples/using-proj4js.html +++ b/examples/using-proj4js.html @@ -18,7 +18,7 @@ } ul li { list-style: none; - margin-bottom: .5em; + margin-bottom: .2em; } input { width: 250px; @@ -37,13 +37,11 @@ #mouse-position-4326 { float: left; clear: left; - font-size: smaller; + font-size: .8em; color: #444; } - - .olControlMousePosition { - background-color: #ededed; - background-color: rgba(200,200,200, 0.7); + .emph { + font-weight: bold; } @@ -51,34 +49,53 @@
- The features are reprojected with the JavaScript library - Proj4JS. + This example shows how to reproject vector features within + OpenLayers. The baselayer shows Germany in the projection + EPSG:31467 (GK 3). When one clicks on the buttons, features with + geometries originally in EPSG:4326 will be transformed to the + projection of the map on-the-fly. +
++ The features are internally reprojected with the JavaScript library + Proj4JS. Please note that usually + you would not inlude Proj4JS the way it is done in this example. + In a production environment you would furthermore have a local copy + of the Proj4JS-projection definition that is hotlinked in this + example.
'
+ status += '
'
+ geometry.toString() + ' to';
geometry.transform(
@@ -57,7 +57,7 @@ function addVector(x, y, btn){
new OpenLayers.Projection('EPSG:31467')
);
- status += '
'
+ status += '
'
+ geometry.toString() + '.';
$('status').innerHTML = status;
@@ -113,3 +113,19 @@ function addOutline(btn) {
$('status').innerHTML = 'Transformed polygon';
btn.disabled = true;
}
+
+function clearVectors(){
+ vector.removeAllFeatures();
+ var ids = [
+ 'btnCologne',
+ 'btnBerlin',
+ 'btnHamburg',
+ 'btnMunich',
+ 'btnGermany'
+ ];
+ for (var i = 0, len = ids.length; i < len; i++) {
+ var elem = $(ids[i]);
+ elem.disabled = false;
+ }
+ $('status').innerHTML = '';
+}