update OpenLayers to version 2.12

htdocs/js/theme/default/google.css

@@ -0,0 +1,17 @@
+.olLayerGoogleCopyright {
+    right: 3px;
+    bottom: 2px;
+    left: auto;  
+}
+.olLayerGoogleV3.olLayerGoogleCopyright {
+    bottom: 0px;
+    right: 0px !important;
+}
+.olLayerGooglePoweredBy {
+    left: 2px;
+    bottom: 2px;   
+}
+.olLayerGoogleV3.olLayerGooglePoweredBy {
+    bottom: 0px !important;
+}
+

htdocs/js/theme/default/google.tidy.css

@@ -0,0 +1 @@
+.olLayerGoogleCopyright{right:3px;bottom:2px;left:auto;}.olLayerGoogleV3.olLayerGoogleCopyright{bottom:0;right:0!important;}.olLayerGooglePoweredBy{left:2px;bottom:2px;}.olLayerGoogleV3.olLayerGooglePoweredBy{bottom:0!important;}

htdocs/js/theme/default/ie6-style.css

@@ -4,4 +4,7 @@
 .olControlPanPanel div {
     background-image: url(img/pan-panel-NOALPHA.png);
 }
+.olControlEditingToolbar {
+    width: 200px;
+}
 

htdocs/js/theme/default/ie6-style.tidy.css

@@ -0,0 +1 @@
+.olControlZoomPanel div{background-image:url(img/zoom-panel-NOALPHA.png);}.olControlPanPanel div{background-image:url(img/pan-panel-NOALPHA.png);}.olControlEditingToolbar{width:200px;}

htdocs/js/theme/default/style.css

@@ -1,7 +1,8 @@
 div.olMap {
-	z-index: 0;
-    padding: 0px!important;
-    margin: 0px!important;
+    z-index: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: default;
 }
 
 div.olMapViewport {
@@ -10,21 +11,28 @@ div.olMapViewport {
 
 div.olLayerDiv {
    -moz-user-select: none;
+   -khtml-user-select: none;
 }
 
 .olLayerGoogleCopyright {
     left: 2px;
-    bottom: 2px;  
+    bottom: 2px;
+}
+.olLayerGoogleV3.olLayerGoogleCopyright {
+    right: auto !important;
 }
 .olLayerGooglePoweredBy {
     left: 2px;
-    bottom: 15px;   
+    bottom: 15px;
+}
+.olLayerGoogleV3.olLayerGooglePoweredBy {
+    bottom: 15px !important;
 }
 .olControlAttribution {
-    font-size: smaller; 
-    right: 3px; 
-    bottom: 4.5em; 
-    position: absolute; 
+    font-size: smaller;
+    right: 3px;
+    bottom: 4.5em;
+    position: absolute;
     display: block;
 }
 .olControlScale {
@@ -35,6 +43,8 @@ div.olLayerDiv {
     font-size: smaller;
 }
 .olControlScaleLine {
+   display: block;
+   position: absolute;
    left: 10px;
    bottom: 15px;
    font-size: xx-small;
@@ -57,10 +67,10 @@ div.olLayerDiv {
     display: block;
     position: absolute;
     font-size: smaller;
-} 
+}
 
 div.olControlMousePosition {
-    bottom: 0em;
+    bottom: 0;
     right: 3px;
     display: block;
     position: absolute;
@@ -70,8 +80,8 @@ div.olControlMousePosition {
 
 .olControlOverviewMapContainer {
     position: absolute;
-    bottom: 0px;
-    right: 0px;
+    bottom: 0;
+    right: 0;
 }
 
 .olControlOverviewMapElement {
@@ -80,14 +90,13 @@ div.olControlMousePosition {
     -moz-border-radius: 1em 0 0 0;
 }
 
-.olControlOverviewMapMinimizeButton {
-    right: 0px;
-    bottom: 80px;
-}    
-
+.olControlOverviewMapMinimizeButton,
 .olControlOverviewMapMaximizeButton {
-    right: 0px;
+    height: 18px;
+    width: 18px;
+    right: 0;
     bottom: 80px;
+    cursor: pointer;
 }
 
 .olControlOverviewMapExtentRectangle {
@@ -124,18 +133,6 @@ div.olControlMousePosition {
 .olPopupContent {
     padding:5px;
     overflow: auto;
-}    
-.olControlNavToolbar { 
-    width:0px;
-    height:0px;
-}    
-.olControlNavToolbar div { 
-  display:block;
-  width:  28px;
-  height: 28px;
-  top: 300px;
-  left: 6px;
-  position: relative;
 }
 
 .olControlNavigationHistory {
@@ -145,83 +142,28 @@ div.olControlMousePosition {
    height: 24px;
 
 }
-.olControlNavigationHistoryPreviousItemActive { 
-  background-position: 0px 0px;
+.olControlNavigationHistoryPreviousItemActive {
+  background-position: 0 0;
 }
-.olControlNavigationHistoryPreviousItemInactive { 
-   background-position: 0px -24px;
+.olControlNavigationHistoryPreviousItemInactive {
+   background-position: 0 -24px;
 }
-.olControlNavigationHistoryNextItemActive { 
-   background-position: -24px 0px;
+.olControlNavigationHistoryNextItemActive {
+   background-position: -24px 0;
 }
-.olControlNavigationHistoryNextItemInactive { 
+.olControlNavigationHistoryNextItemInactive {
    background-position: -24px -24px;
 }
 
-.olControlNavToolbar .olControlNavigationItemActive { 
-  background-image: url("img/panning-hand-on.png");
-  background-repeat: no-repeat;
-}
-.olControlNavToolbar .olControlNavigationItemInactive { 
-  background-image: url("img/panning-hand-off.png");
-  background-repeat: no-repeat;
-}
-.olControlNavToolbar .olControlZoomBoxItemActive { 
-  background-image: url("img/drag-rectangle-on.png");
-  background-color: orange;
-  background-repeat: no-repeat;
-}
-.olControlNavToolbar .olControlZoomBoxItemInactive { 
-  background-image: url("img/drag-rectangle-off.png");
-  background-repeat: no-repeat;
-}
-.olControlEditingToolbar  {
-    float:right;
-    right: 0px;
-    height: 30px; 
-    width: 200px;
-}
-.olControlEditingToolbar div { 
-  background-image: url("img/editing_tool_bar.png");
-  background-repeat: no-repeat;
-  float:right;
-  width:  24px;
-  height: 24px;
-  margin: 5px;
-}
-.olControlEditingToolbar .olControlNavigationItemActive { 
-  background-position: -103px -23px; 
-}
-.olControlEditingToolbar .olControlNavigationItemInactive { 
-  background-position: -103px -0px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePointItemActive { 
-  background-position: -77px -23px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePointItemInactive { 
-  background-position: -77px -0px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePathItemInactive { 
-  background-position: -51px 0px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePathItemActive { 
-  background-position: -51px -23px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive { 
-  background-position: -26px 0px; 
-}
-.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive { 
-  background-position: -26px -23px ;                                                                   
-}
-.olControlSaveFeaturesItemActive { 
+div.olControlSaveFeaturesItemActive {
     background-image: url(img/save_features_on.png);
     background-repeat: no-repeat;
-    background-position: 0px 1px;
+    background-position: 0 1px;
 }
-.olControlSaveFeaturesItemInactive { 
+div.olControlSaveFeaturesItemInactive {
     background-image: url(img/save_features_off.png);
     background-repeat: no-repeat;
-    background-position: 0px 1px;
+    background-position: 0 1px;
 }
 
 .olHandlerBoxZoomBox {
@@ -239,12 +181,12 @@ div.olControlMousePosition {
     opacity: 0.50;
     font-size: 1px;
     filter: alpha(opacity=50);
-}   
+}
 
 .olControlPanPanel {
     top: 10px;
     left: 5px;
-}  
+}
 
 .olControlPanPanel div {
     background-image: url(img/pan-panel.png);
@@ -255,20 +197,20 @@ div.olControlMousePosition {
 }
 
 .olControlPanPanel .olControlPanNorthItemInactive {
-    top: 0px;
+    top: 0;
     left: 9px;
-    background-position: 0px 0px;
+    background-position: 0 0;
 }
 .olControlPanPanel .olControlPanSouthItemInactive {
     top: 36px;
     left: 9px;
-    background-position: 18px 0px;
+    background-position: 18px 0;
 }
 .olControlPanPanel .olControlPanWestItemInactive {
     position: absolute;
     top: 18px;
-    left: 0px;
-    background-position: 0px 18px;
+    left: 0;
+    background-position: 0 18px;
 }
 .olControlPanPanel .olControlPanEastItemInactive {
     top: 18px;
@@ -279,7 +221,7 @@ div.olControlMousePosition {
 .olControlZoomPanel {
     top: 71px;
     left: 14px;
-} 
+}
 
 .olControlZoomPanel div {
     background-image: url(img/zoom-panel.png);
@@ -290,21 +232,29 @@ div.olControlMousePosition {
 }
 
 .olControlZoomPanel .olControlZoomInItemInactive {
-    top: 0px;
-    left: 0px;
-    background-position: 0px 0px;
+    top: 0;
+    left: 0;
+    background-position: 0 0;
 }
 
 .olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
     top: 18px;
-    left: 0px;
-    background-position: 0px -18px;
+    left: 0;
+    background-position: 0 -18px;
 }
 
 .olControlZoomPanel .olControlZoomOutItemInactive {
     top: 36px;
-    left: 0px;
-    background-position: 0px 18px;
+    left: 0;
+    background-position: 0 18px;
+}
+
+/*
+ * When a potential text is bigger than the image it move the image
+ * with some headers (closes #3154)
+ */
+.olControlPanZoomBar div {
+    font-size: 1px;
 }
 
 .olPopupCloseBox {
@@ -312,6 +262,223 @@ div.olControlMousePosition {
   cursor: pointer;
 }
 
+.olFramedCloudPopupContent {
+    padding: 5px;
+    overflow: auto;
+}
+
 .olControlNoSelect {
  -moz-user-select: none;
+ -khtml-user-select: none;
+}
+
+.olImageLoadError {
+    background-color: pink;
+    opacity: 0.5;
+    filter: alpha(opacity=50); /* IE */
+}
+
+/**
+ * Cursor styles
+ */
+
+.olCursorWait {
+    cursor: wait;
+}
+.olDragDown {
+    cursor: move;
+}
+.olDrawBox {
+    cursor: crosshair;
+}
+.olControlDragFeatureOver {
+    cursor: move;
+}
+.olControlDragFeatureActive.olControlDragFeatureOver.olDragDown {
+    cursor: -moz-grabbing;
+}
+
+/**
+ * Layer switcher
+ */
+.olControlLayerSwitcher {
+    position: absolute;
+    top: 25px;
+    right: 0;
+    width: 20em;
+    font-family: sans-serif;
+    font-weight: bold;
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+    font-size: smaller;
+    color: white;
+    background-color: transparent;
+}
+
+.olControlLayerSwitcher .layersDiv {
+    padding-top: 5px;
+    padding-left: 10px;
+    padding-bottom: 5px;
+    padding-right: 10px;
+    background-color: darkblue;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLbl,
+.olControlLayerSwitcher .layersDiv .dataLbl {
+    margin-top: 3px;
+    margin-left: 3px;
+    margin-bottom: 3px;
+}
+
+.olControlLayerSwitcher .layersDiv .baseLayersDiv,
+.olControlLayerSwitcher .layersDiv .dataLayersDiv {
+    padding-left: 10px;
+}
+
+.olControlLayerSwitcher .maximizeDiv,
+.olControlLayerSwitcher .minimizeDiv {
+    width: 18px;
+    height: 18px;
+    top: 5px;
+    right: 0;
+    cursor: pointer;
+}
+
+.olBingAttribution {
+    color: #DDD;
+}
+.olBingAttribution.road {
+    color: #333;
+}
+
+.olGoogleAttribution.hybrid, .olGoogleAttribution.satellite {
+    color: #EEE;
+}
+.olGoogleAttribution {
+    color: #333;
+}
+span.olGoogleAttribution a {
+    color: #77C;
+}
+span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
+    color: #EEE;
+}
+
+/**
+ * Editing and navigation icons.
+ * (using the editing_tool_bar.png sprint image)
+ */
+.olControlNavToolbar ,
+.olControlEditingToolbar {
+    margin: 5px 5px 0 0;
+}
+.olControlNavToolbar div,
+.olControlEditingToolbar div {
+    background-image: url("img/editing_tool_bar.png");
+    background-repeat: no-repeat;
+    margin: 0 0 5px 5px;
+    width: 24px;
+    height: 22px;
+    cursor: pointer
+}
+/* positions */
+.olControlEditingToolbar {
+    right: 0;
+    top: 0;
+}
+.olControlNavToolbar {
+    top: 295px;
+    left: 9px;
+}
+/* layouts */
+.olControlEditingToolbar div {
+    float: right;
+}
+/* individual controls */
+.olControlNavToolbar .olControlNavigationItemInactive,
+.olControlEditingToolbar .olControlNavigationItemInactive {
+    background-position: -103px -1px;
+}
+.olControlNavToolbar .olControlNavigationItemActive ,
+.olControlEditingToolbar .olControlNavigationItemActive  {
+    background-position: -103px -24px;
+}
+.olControlNavToolbar .olControlZoomBoxItemInactive {
+    background-position: -128px -1px;
+}
+.olControlNavToolbar .olControlZoomBoxItemActive  {
+    background-position: -128px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemInactive {
+    background-position: -77px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePointItemActive {
+    background-position: -77px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemInactive {
+    background-position: -51px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePathItemActive {
+    background-position: -51px -24px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemInactive{
+    background-position: -26px -1px;
+}
+.olControlEditingToolbar .olControlDrawFeaturePolygonItemActive {
+    background-position: -26px -24px;
+}
+
+div.olControlZoom {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(255,255,255,0.4);
+    border-radius: 4px;
+    padding: 2px;
+}
+div.olControlZoom a {
+    display: block;
+    margin: 1px;
+    padding: 0;
+    color: white;
+    font-size: 18px;
+    font-family: 'Lucida Grande', Verdana, Geneva, Lucida, Arial, Helvetica, sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+    height: 22px;
+    width:22px;
+    line-height: 19px;
+    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
+    background: rgba(0, 60, 136, 0.5);
+    filter: alpha(opacity=80);
+}
+div.olControlZoom a:hover {
+    background: #130085; /* fallback for IE */
+    background: rgba(0, 60, 136, 0.7);
+    filter: alpha(opacity=100);
+}
+@media only screen and (max-width: 600px) {
+    div.olControlZoom a:hover {
+        background: rgba(0, 60, 136, 0.5);
+    }
+}
+a.olControlZoomIn {
+    border-radius: 4px 4px 0 0;
+}
+a.olControlZoomOut {
+    border-radius: 0 0 4px 4px;
+}
+
+
+/**
+ * Animations
+ */
+
+.olLayerGrid .olTileImage {
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    -o-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
 }

htdocs/js/theme/default/style.mobile.css

@@ -0,0 +1,63 @@
+div.olControlZoom {
+    position: absolute;
+    top: 8px;
+    left: 8px;
+    background: rgba(255,255,255,0.4);
+    border-radius: 4px;
+    padding: 2px;
+}
+* {
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+div.olControlZoom a {
+    display: block;
+    margin: 1px;
+    padding: 0;
+    color: white;
+    font-size: 28px;
+    font-family: sans-serif;
+    font-weight: bold;
+    text-decoration: none;
+    text-align: center;
+    height: 32px;
+    width: 32px;
+    line-height: 28px;
+    text-shadow: 0 0 3px rgba(0,0,0,0.8);
+    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
+    background: rgba(0, 60, 136, 0.5);
+    filter: alpha(opacity=80);
+}
+a.olControlZoomIn {
+    border-radius: 4px 4px 0 0;
+}
+a.olControlZoomOut {
+    border-radius: 0 0 4px 4px;
+}
+div.olControlZoom a:hover {
+    background: #130085; /* fallback for IE */
+    background: rgba(0, 60, 136, 0.7);
+    filter: alpha(opacity=100);
+}
+@media only screen and (max-width: 600px) {
+    div.olControlZoom a:hover {
+        background: rgba(0, 60, 136, 0.5);
+    }
+}
+.olLayerGrid .olTileImage {
+    -webkit-transition: opacity 0.2s linear;
+    -moz-transition: opacity 0.2s linear;
+    -o-transition: opacity 0.2s linear;
+    transition: opacity 0.2s linear;
+}
+/* Enable 3d acceleration when operating on tiles, this is
+   known to yield better performance on IOS Safari.
+   http://osgeo-org.1803224.n2.nabble.com/Harware-accelerated-CSS3-animations-for-iOS-td6255560.html
+
+   It also prevents tile blinking effects in iOS 5.
+   See https://github.com/openlayers/openlayers/issues/511
+*/
+@media (-webkit-transform-3d) {
+img.olTileImage {
+    -webkit-transform: translate3d(0, 0, 0);
+}
+}

htdocs/js/theme/default/style.mobile.tidy.css

@@ -0,0 +1 @@
+div.olControlZoom{position:absolute;top:8px;left:8px;background:rgba(255,255,255,0.4);border-radius:4px;padding:2px;}*{-webkit-tap-highlight-color:rgba(0,0,0,0);}div.olControlZoom a{display:block;color:#FFF;font-size:28px;font-family:sans-serif;font-weight:700;text-decoration:none;text-align:center;height:32px;width:32px;line-height:28px;text-shadow:0 0 3px rgba(0,0,0,0.8);background:rgba(0,60,136,0.5);filter:alpha(opacity=80);margin:1px;padding:0;}a.olControlZoomIn{border-radius:4px 4px 0 0;}a.olControlZoomOut{border-radius:0 0 4px 4px;}div.olControlZoom a:hover{background:rgba(0,60,136,0.7);filter:alpha(opacity=100);}.olLayerGrid .olTileImage{-webkit-transition:opacity .2s linear;-moz-transition:opacity .2s linear;-o-transition:opacity .2s linear;transition:opacity .2s linear;}@media only screen and max-width 600px{div.olControlZoom a:hover{background:rgba(0,60,136,0.5);}}@media -webkit-transform-3d{img.olTileImage{-webkit-transform:translate3d(0,0,0);}}