Use a custom OpenLayers theme
authorTom Hughes <tom@compton.nu>
Wed, 1 Aug 2012 20:40:40 +0000 (21:40 +0100)
committerTom Hughes <tom@compton.nu>
Thu, 2 Aug 2012 18:15:12 +0000 (19:15 +0100)
Instead of having a customised copy of the default theme in the
app assets, use a custom theme that pulls in the default one and
then overrides things as needed.

app/assets/javascripts/map.js.erb
app/assets/openlayers/theme/default/style.css.scss [deleted file]
app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss [moved from app/assets/openlayers/theme/default/SimpleLayerSwitcher.css.scss with 91% similarity]
app/assets/openlayers/theme/openstreetmap/img/carat.png [moved from app/assets/openlayers/theme/default/img/carat.png with 100% similarity]
app/assets/openlayers/theme/openstreetmap/img/missing-tile.png [moved from app/assets/openlayers/theme/default/img/missing-tile.png with 100% similarity]
app/assets/openlayers/theme/openstreetmap/style.css.scss [new file with mode: 0644]

index d645f06f043c8de9713c3015d4b42737d4b9fc96..82826ebfbf5cf43e4a19cdf527bf245bd95d3868 100644 (file)
@@ -19,7 +19,7 @@ function createMap(divName, options) {
       ],
       numZoomLevels: 20,
       displayProjection: new OpenLayers.Projection("EPSG:4326"),
-      theme: "<%= asset_path 'theme/default/style.css' %>"
+      theme: "<%= asset_path 'theme/openstreetmap/style.css' %>"
    });
 
    var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.standard"), {
diff --git a/app/assets/openlayers/theme/default/style.css.scss b/app/assets/openlayers/theme/default/style.css.scss
deleted file mode 100644 (file)
index 6c833ae..0000000
+++ /dev/null
@@ -1,478 +0,0 @@
-/*
- *= require theme/default/SimpleLayerSwitcher
- */
-
-div.olMap {
-    z-index: 0;
-    padding: 0 !important;
-    margin: 0 !important;
-    cursor: default;
-}
-
-div.olMapViewport {
-    text-align: left;
-}
-
-div.olLayerDiv {
-   -moz-user-select: none;
-   -khtml-user-select: none;
-}
-
-.olLayerGoogleCopyright {
-    left: 2px;
-    bottom: 2px;
-}
-.olLayerGoogleV3.olLayerGoogleCopyright {
-    right: auto !important;
-}
-.olLayerGooglePoweredBy {
-    left: 2px;
-    bottom: 15px;
-}
-.olLayerGoogleV3.olLayerGooglePoweredBy {
-    bottom: 15px !important;
-}
-.olControlAttribution {
-    font-size: smaller;
-    right: 3px;
-    bottom: 4.5em;
-    position: absolute;
-    display: block;
-}
-.olControlScale {
-    right: 3px;
-    bottom: 3em;
-    display: block;
-    position: absolute;
-    font-size: smaller;
-}
-.olControlScaleLine {
-   display: block;
-   position: absolute;
-   left: 10px;
-   bottom: 15px;
-   font-size: xx-small;
-}
-.olControlScaleLineBottom {
-   border: solid 2px black;
-   border-bottom: none;
-   margin-top:-2px;
-   text-align: center;
-}
-.olControlScaleLineTop {
-   border: solid 2px black;
-   border-top: none;
-   text-align: center;
-}
-
-.olControlPermalink {
-    right: 3px;
-    bottom: 1.5em;
-    display: block;
-    position: absolute;
-    font-size: smaller;
-}
-
-div.olControlMousePosition {
-    bottom: 0;
-    right: 3px;
-    display: block;
-    position: absolute;
-    font-family: Arial;
-    font-size: smaller;
-}
-
-.olControlOverviewMapContainer {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-}
-
-.olControlOverviewMapElement {
-    padding: 10px 18px 10px 10px;
-    background-color: #00008B;
-    -moz-border-radius: 1em 0 0 0;
-}
-
-.olControlOverviewMapMinimizeButton,
-.olControlOverviewMapMaximizeButton {
-    height: 18px;
-    width: 18px;
-    right: 0;
-    bottom: 80px;
-    cursor: pointer;
-}
-
-.olControlOverviewMapExtentRectangle {
-    overflow: hidden;
-    background-image: image-url("theme/default/img/blank.gif");
-    cursor: move;
-    border: 2px dotted red;
-}
-.olControlOverviewMapRectReplacement {
-    overflow: hidden;
-    cursor: move;
-    background-image: image-url("theme/default/img/overview_replacement.gif");
-    background-repeat: no-repeat;
-    background-position: center;
-}
-
-.olLayerGeoRSSDescription {
-    float:left;
-    width:100%;
-    overflow:auto;
-    font-size:1.0em;
-}
-.olLayerGeoRSSClose {
-    float:right;
-    color:gray;
-    font-size:1.2em;
-    margin-right:6px;
-    font-family:sans-serif;
-}
-.olLayerGeoRSSTitle {
-    float:left;font-size:1.2em;
-}
-
-.olPopupContent {
-    padding:5px;
-    overflow: auto;
-}
-
-.olControlNavigationHistory {
-   background-image: image-url("theme/default/img/navigation_history.png");
-   background-repeat: no-repeat;
-   width:  24px;
-   height: 24px;
-
-}
-.olControlNavigationHistoryPreviousItemActive {
-  background-position: 0 0;
-}
-.olControlNavigationHistoryPreviousItemInactive {
-   background-position: 0 -24px;
-}
-.olControlNavigationHistoryNextItemActive {
-   background-position: -24px 0;
-}
-.olControlNavigationHistoryNextItemInactive {
-   background-position: -24px -24px;
-}
-
-div.olControlSaveFeaturesItemActive {
-    background-image: image-url("theme/default/img/save_features_on.png");
-    background-repeat: no-repeat;
-    background-position: 0 1px;
-}
-div.olControlSaveFeaturesItemInactive {
-    background-image: image-url("theme/default/img/save_features_off.png");
-    background-repeat: no-repeat;
-    background-position: 0 1px;
-}
-
-.olHandlerBoxZoomBox {
-    border: 2px solid red;
-    position: absolute;
-    background-color: white;
-    opacity: 0.50;
-    font-size: 1px;
-    filter: alpha(opacity=50);
-}
-.olHandlerBoxSelectFeature {
-    border: 2px solid blue;
-    position: absolute;
-    background-color: white;
-    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");
-    height: 18px;
-    width: 18px;
-    cursor: pointer;
-    position: absolute;
-}
-
-.olControlPanPanel .olControlPanNorthItemInactive {
-    top: 0;
-    left: 9px;
-    background-position: 0 0;
-}
-.olControlPanPanel .olControlPanSouthItemInactive {
-    top: 36px;
-    left: 9px;
-    background-position: 18px 0;
-}
-.olControlPanPanel .olControlPanWestItemInactive {
-    position: absolute;
-    top: 18px;
-    left: 0;
-    background-position: 0 18px;
-}
-.olControlPanPanel .olControlPanEastItemInactive {
-    top: 18px;
-    left: 18px;
-    background-position: 18px 18px;
-}
-
-.olControlZoomPanel {
-    top: 71px;
-    left: 14px;
-}
-
-.olControlZoomPanel div {
-    background-image: image-url("theme/default/img/zoom-panel.png");
-    position: absolute;
-    height: 18px;
-    width: 18px;
-    cursor: pointer;
-}
-
-.olControlZoomPanel .olControlZoomInItemInactive {
-    top: 0;
-    left: 0;
-    background-position: 0 0;
-}
-
-.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
-    top: 18px;
-    left: 0;
-    background-position: 0 -18px;
-}
-
-.olControlZoomPanel .olControlZoomOutItemInactive {
-    top: 36px;
-    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 {
-  background: image-url("theme/default/img/close.gif") no-repeat;
-  cursor: pointer;
-}
-
-.olFramedCloudPopupContent {
-    padding: 5px;
-    overflow: auto;
-}
-
-.olControlNoSelect {
- -moz-user-select: none;
- -khtml-user-select: none;
-}
-
-.olImageLoadError {
-    background: image-url("theme/default/img/missing-tile.png") no-repeat;
-}
-
-/**
- * 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: image-url("theme/default/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: black;
-    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: #ffffff;
-    border: 1px solid #cccccc;
-}
-div.olControlZoom a:hover {
-    background: #f5f5f5;
-}
-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;
-}
similarity index 91%
rename from app/assets/openlayers/theme/default/SimpleLayerSwitcher.css.scss
rename to app/assets/openlayers/theme/openstreetmap/SimpleLayerSwitcher.css.scss
index fc9a33775aeef7b8fc9df0e0a7f9f4bc8349e15d..48e730f6c455c4374846b4e22b62ed4cbf8c6512 100644 (file)
@@ -18,7 +18,7 @@
 .SimpleLayerSwitcher a.basey-on {
   color: #000;
   background-color: #fff;
-  background-image: image-url("theme/default/img/carat.png");
+  background-image: image-url("theme/openstreetmap/img/carat.png");
   background-repeat: no-repeat;
   background-position: 7px 9px;
 }
diff --git a/app/assets/openlayers/theme/openstreetmap/style.css.scss b/app/assets/openlayers/theme/openstreetmap/style.css.scss
new file mode 100644 (file)
index 0000000..6c6cf3c
--- /dev/null
@@ -0,0 +1,60 @@
+/*
+ *= require theme/default/style
+ *= require theme/openstreetmap/SimpleLayerSwitcher
+ */
+
+.olControlOverviewMapExtentRectangle {
+    background-image: image-url("theme/default/img/blank.gif");
+}
+
+.olControlOverviewMapRectReplacement {
+    background-image: image-url("theme/default/img/overview_replacement.gif");
+}
+
+.olControlNavigationHistory {
+    background-image: image-url("theme/default/img/navigation_history.png");
+}
+
+div.olControlSaveFeaturesItemActive {
+    background-image: image-url("theme/default/img/save_features_on.png");
+}
+
+div.olControlSaveFeaturesItemInactive {
+    background-image: image-url("theme/default/img/save_features_off.png");
+}
+
+.olControlPanPanel div {
+    background-image: image-url("theme/default/img/pan-panel.png");
+}
+
+.olControlZoomPanel div {
+    background-image: image-url("theme/default/img/zoom-panel.png");
+}
+
+.olPopupCloseBox {
+    background: image-url("theme/default/img/close.gif") no-repeat;
+}
+
+.olImageLoadError {
+    // remove opacity?
+    // remove filter?
+    background: image-url("theme/openstreetmap/img/missing-tile.png") no-repeat;
+}
+
+.olControlNavToolbar div,
+.olControlEditingToolbar div {
+    background-image: image-url("theme/default/img/editing_tool_bar.png");
+}
+
+div.olControlZoom a {
+    color: black;
+    background: #ffffff;
+    border: 1px solid #cccccc;
+    // remove filter
+}
+
+div.olControlZoom a:hover {
+    background: #f5f5f5;
+}
+
+// remove max-width hover?