Update OpenLayers to 2.12

app/assets/javascripts/map.js.erb

@@ -17,8 +17,6 @@ function createMap(divName, options) {
          new OpenLayers.Control.PanZoomBar(),
          new OpenLayers.Control.ScaleLine({geodesic: true})
       ],
-      units: "m",
-      maxResolution: 156543.0339,
       numZoomLevels: 20,
       displayProjection: new OpenLayers.Projection("EPSG:4326"),
       theme: "<%= asset_path 'theme/default/style.css' %>"
@@ -70,8 +68,6 @@ function createMap(divName, options) {
       displayInLayerSwitcher: false,
       numZoomLevels: 20,
       maxExtent: new OpenLayers.Bounds(-20037508,-20037508,20037508,20037508),
-      maxResolution: 156543,
-      units: "m",
       projection: "EPSG:900913"
    });
    map.addLayer(markers);

app/assets/javascripts/openlayers.js.erb

@@ -29,8 +29,6 @@ OpenLayers.Util.imageURLs = {
     "zoom-world-mini.png": "<%= asset_path 'img/zoom-world-mini.png' %>"
 };
 
-OpenLayers.Util.OSM.MISSING_TILE_URL = "<%= asset_path 'img/404.png' %>";
-
 OpenLayers.Util.origGetImageLocation = OpenLayers.Util.getImageLocation;
 
 OpenLayers.Util.getImageLocation = function(image) {

app/assets/openlayers/theme/default/style.css.scss

@@ -27,16 +27,16 @@ div.olLayerDiv {
 }
 .olLayerGooglePoweredBy {
     left: 2px;
-    bottom: 15px;   
+    bottom: 15px;
 }
 .olLayerGoogleV3.olLayerGooglePoweredBy {
     bottom: 15px !important;
 }
 .olControlAttribution {
-    font-size: smaller; 
+    font-size: smaller;
-    right: 3px; 
+    right: 3px;
-    bottom: 4.5em; 
+    bottom: 4.5em;
-    position: absolute; 
+    position: absolute;
     display: block;
 }
 .olControlScale {
@@ -71,10 +71,10 @@ div.olLayerDiv {
     display: block;
     position: absolute;
     font-size: smaller;
-} 
+}
 
 div.olControlMousePosition {
-    bottom: 0em;
+    bottom: 0;
     right: 3px;
     display: block;
     position: absolute;
@@ -94,13 +94,10 @@ div.olControlMousePosition {
     -moz-border-radius: 1em 0 0 0;
 }
 
-.olControlOverviewMapMinimizeButton {
+.olControlOverviewMapMinimizeButton,
-    right: 0;
-    bottom: 80px;
-    cursor: pointer;
-}    
-
 .olControlOverviewMapMaximizeButton {
+    height: 18px;
+    width: 18px;
     right: 0;
     bottom: 80px;
     cursor: pointer;
@@ -140,7 +137,7 @@ div.olControlMousePosition {
 .olPopupContent {
     padding:5px;
     overflow: auto;
-}    
+}
 
 .olControlNavigationHistory {
    background-image: image-url("theme/default/img/navigation_history.png");
@@ -149,25 +146,25 @@ div.olControlMousePosition {
    height: 24px;
 
 }
-.olControlNavigationHistoryPreviousItemActive { 
+.olControlNavigationHistoryPreviousItemActive {
   background-position: 0 0;
 }
-.olControlNavigationHistoryPreviousItemInactive { 
+.olControlNavigationHistoryPreviousItemInactive {
    background-position: 0 -24px;
 }
-.olControlNavigationHistoryNextItemActive { 
+.olControlNavigationHistoryNextItemActive {
    background-position: -24px 0;
 }
-.olControlNavigationHistoryNextItemInactive { 
+.olControlNavigationHistoryNextItemInactive {
    background-position: -24px -24px;
 }
 
-div.olControlSaveFeaturesItemActive { 
+div.olControlSaveFeaturesItemActive {
     background-image: image-url("theme/default/img/save_features_on.png");
     background-repeat: no-repeat;
     background-position: 0 1px;
 }
-div.olControlSaveFeaturesItemInactive { 
+div.olControlSaveFeaturesItemInactive {
     background-image: image-url("theme/default/img/save_features_off.png");
     background-repeat: no-repeat;
     background-position: 0 1px;
@@ -188,12 +185,12 @@ div.olControlSaveFeaturesItemInactive {
     opacity: 0.50;
     font-size: 1px;
     filter: alpha(opacity=50);
-}   
+}
 
 .olControlPanPanel {
     top: 10px;
     left: 5px;
-}  
+}
 
 .olControlPanPanel div {
     background-image: image-url("theme/default/img/pan-panel.png");
@@ -228,7 +225,7 @@ div.olControlSaveFeaturesItemInactive {
 .olControlZoomPanel {
     top: 71px;
     left: 14px;
-} 
+}
 
 .olControlZoomPanel div {
     background-image: image-url("theme/default/img/zoom-panel.png");
@@ -256,9 +253,9 @@ div.olControlSaveFeaturesItemInactive {
     background-position: 0 18px;
 }
 
-/* 
+/*
  * When a potential text is bigger than the image it move the image
- * with some headers (closes #3154) 
+ * with some headers (closes #3154)
  */
 .olControlPanZoomBar div {
     font-size: 1px;
@@ -280,9 +277,7 @@ div.olControlSaveFeaturesItemInactive {
 }
 
 .olImageLoadError {
-    background-color: pink;
+    background: image-url("theme/default/img/missing-tile.png") no-repeat;
-    opacity: 0.5;
-    filter: alpha(opacity=50); /* IE */
 }
 
 /**
@@ -327,10 +322,8 @@ div.olControlSaveFeaturesItemInactive {
     padding-top: 5px;
     padding-left: 10px;
     padding-bottom: 5px;
-    padding-right: 75px;
+    padding-right: 10px;
     background-color: darkblue;
-    width: 100%;
-    height: 100%;
 }
 
 .olControlLayerSwitcher .layersDiv .baseLbl,
@@ -347,6 +340,8 @@ div.olControlSaveFeaturesItemInactive {
 
 .olControlLayerSwitcher .maximizeDiv,
 .olControlLayerSwitcher .minimizeDiv {
+    width: 18px;
+    height: 18px;
     top: 5px;
     right: 0;
     cursor: pointer;
@@ -435,3 +430,57 @@ span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
 .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;
+}

config/openlayers.cfg

@@ -1,10 +1,4 @@
 [first]
-OpenLayers/SingleFile.js
-OpenLayers.js
-OpenLayers/BaseTypes.js
-OpenLayers/BaseTypes/Class.js
-OpenLayers/Util.js
-Rico/Corner.js
 
 [last]
 
@@ -24,7 +18,7 @@ OpenLayers/Layer.js
 OpenLayers/Layer/GML.js
 OpenLayers/Layer/Markers.js
 OpenLayers/Layer/SphericalMercator.js
-OpenLayers/Layer/XYZ.js
+OpenLayers/Layer/OSM.js
 OpenLayers/Layer/Vector.js
 OpenLayers/Tile.js
 OpenLayers/Tile/Image.js

vendor/assets/openlayers/OpenStreetMap.js

@@ -1,33 +1,3 @@
-/**
- * Namespace: Util.OSM
- */
-OpenLayers.Util.OSM = {};
-
-/**
- * Constant: MISSING_TILE_URL
- * {String} URL of image to display for missing tiles
- */
-OpenLayers.Util.OSM.MISSING_TILE_URL = OpenLayers.Util.getImagesLocation() + "404.png";
-
-/**
- * Property: originalOnImageLoadError
- * {Function} Original onImageLoadError function.
- */
-OpenLayers.Util.OSM.originalOnImageLoadError = OpenLayers.Util.onImageLoadError;
-
-/**
- * Function: onImageLoadError
- */
-OpenLayers.Util.onImageLoadError = function() {
-    if (this.src.match(/^http:\/\/[abc]\.[a-z]+\.openstreetmap\.org\//)) {
-        this.src = OpenLayers.Util.OSM.MISSING_TILE_URL;
-    } else if (this.src.match(/^http:\/\/[def]\.tah\.openstreetmap\.org\//)) {
-        // do nothing - this layer is transparent
-    } else {
-        OpenLayers.Util.OSM.originalOnImageLoadError;
-    }
-};
-
 /**
  * Class: OpenLayers.Layer.OSM.Mapnik
  *

vendor/assets/openlayers/theme/default/google.tidy.css

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

vendor/assets/openlayers/theme/default/ie6-style.tidy.css

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

vendor/assets/openlayers/theme/default/style.css

@@ -23,16 +23,16 @@ div.olLayerDiv {
 }
 .olLayerGooglePoweredBy {
     left: 2px;
-    bottom: 15px;   
+    bottom: 15px;
 }
 .olLayerGoogleV3.olLayerGooglePoweredBy {
     bottom: 15px !important;
 }
 .olControlAttribution {
-    font-size: smaller; 
+    font-size: smaller;
-    right: 3px; 
+    right: 3px;
-    bottom: 4.5em; 
+    bottom: 4.5em;
-    position: absolute; 
+    position: absolute;
     display: block;
 }
 .olControlScale {
@@ -67,10 +67,10 @@ div.olLayerDiv {
     display: block;
     position: absolute;
     font-size: smaller;
-} 
+}
 
 div.olControlMousePosition {
-    bottom: 0em;
+    bottom: 0;
     right: 3px;
     display: block;
     position: absolute;
@@ -90,13 +90,10 @@ div.olControlMousePosition {
     -moz-border-radius: 1em 0 0 0;
 }
 
-.olControlOverviewMapMinimizeButton {
+.olControlOverviewMapMinimizeButton,
-    right: 0;
-    bottom: 80px;
-    cursor: pointer;
-}    
-
 .olControlOverviewMapMaximizeButton {
+    height: 18px;
+    width: 18px;
     right: 0;
     bottom: 80px;
     cursor: pointer;
@@ -136,7 +133,7 @@ div.olControlMousePosition {
 .olPopupContent {
     padding:5px;
     overflow: auto;
-}    
+}
 
 .olControlNavigationHistory {
    background-image: url("img/navigation_history.png");
@@ -145,25 +142,25 @@ div.olControlMousePosition {
    height: 24px;
 
 }
-.olControlNavigationHistoryPreviousItemActive { 
+.olControlNavigationHistoryPreviousItemActive {
   background-position: 0 0;
 }
-.olControlNavigationHistoryPreviousItemInactive { 
+.olControlNavigationHistoryPreviousItemInactive {
    background-position: 0 -24px;
 }
-.olControlNavigationHistoryNextItemActive { 
+.olControlNavigationHistoryNextItemActive {
    background-position: -24px 0;
 }
-.olControlNavigationHistoryNextItemInactive { 
+.olControlNavigationHistoryNextItemInactive {
    background-position: -24px -24px;
 }
 
-div.olControlSaveFeaturesItemActive { 
+div.olControlSaveFeaturesItemActive {
     background-image: url(img/save_features_on.png);
     background-repeat: no-repeat;
     background-position: 0 1px;
 }
-div.olControlSaveFeaturesItemInactive { 
+div.olControlSaveFeaturesItemInactive {
     background-image: url(img/save_features_off.png);
     background-repeat: no-repeat;
     background-position: 0 1px;
@@ -184,12 +181,12 @@ div.olControlSaveFeaturesItemInactive {
     opacity: 0.50;
     font-size: 1px;
     filter: alpha(opacity=50);
-}   
+}
 
 .olControlPanPanel {
     top: 10px;
     left: 5px;
-}  
+}
 
 .olControlPanPanel div {
     background-image: url(img/pan-panel.png);
@@ -224,7 +221,7 @@ div.olControlSaveFeaturesItemInactive {
 .olControlZoomPanel {
     top: 71px;
     left: 14px;
-} 
+}
 
 .olControlZoomPanel div {
     background-image: url(img/zoom-panel.png);
@@ -252,9 +249,9 @@ div.olControlSaveFeaturesItemInactive {
     background-position: 0 18px;
 }
 
-/* 
+/*
  * When a potential text is bigger than the image it move the image
- * with some headers (closes #3154) 
+ * with some headers (closes #3154)
  */
 .olControlPanZoomBar div {
     font-size: 1px;
@@ -323,10 +320,8 @@ div.olControlSaveFeaturesItemInactive {
     padding-top: 5px;
     padding-left: 10px;
     padding-bottom: 5px;
-    padding-right: 75px;
+    padding-right: 10px;
     background-color: darkblue;
-    width: 100%;
-    height: 100%;
 }
 
 .olControlLayerSwitcher .layersDiv .baseLbl,
@@ -343,6 +338,8 @@ div.olControlSaveFeaturesItemInactive {
 
 .olControlLayerSwitcher .maximizeDiv,
 .olControlLayerSwitcher .minimizeDiv {
+    width: 18px;
+    height: 18px;
     top: 5px;
     right: 0;
     cursor: pointer;
@@ -431,3 +428,57 @@ span.olGoogleAttribution.hybrid a, span.olGoogleAttribution.satellite a {
 .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;
+}

vendor/assets/openlayers/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);
+}
+}