Force all OpenLayers resources to load through the asset pipeline
This commit is contained in:
Tom Hughes
parent
3266d0bd03
commit
477b765c42
3 changed files with 470 additions and 3 deletions
|
|
@ -20,7 +20,8 @@ function createMap(divName, options) {
|
|||
units: "m",
|
||||
maxResolution: 156543.0339,
|
||||
numZoomLevels: 20,
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326")
|
||||
displayProjection: new OpenLayers.Projection("EPSG:4326"),
|
||||
theme: "<%= asset_path 'theme/default/style.css' %>"
|
||||
});
|
||||
|
||||
var mapnik = new OpenLayers.Layer.OSM.Mapnik(i18n("javascripts.map.base.mapnik"), {
|
||||
|
|
|
|||
|
|
@ -1,6 +1,39 @@
|
|||
//= require OpenLayers
|
||||
//= require OpenStreetMap
|
||||
|
||||
OpenLayers._getScriptLocation = function() {
|
||||
return "/assets/";
|
||||
OpenLayers.Util.imageURLs = {
|
||||
"img/404.png": "<%= asset_path '404.png' %>",
|
||||
"img/blank.gif": "<%= asset_path 'blank.gif' %>",
|
||||
"img/cloud-popup-relative.png": "<%= asset_path 'cloud-popup-relative.png' %>",
|
||||
"img/drag-rectangle-off.png": "<%= asset_path 'drag-rectangle-off.png' %>",
|
||||
"img/drag-rectangle-on.png": "<%= asset_path 'drag-rectangle-on.png' %>",
|
||||
"img/east-mini.png": "<%= asset_path 'east-mini.png' %>",
|
||||
"img/layer-switcher-maximize.png": "<%= asset_path 'layer-switcher-maximize.png' %>",
|
||||
"img/layer-switcher-minimize.png": "<%= asset_path 'layer-switcher-minimize.png' %>",
|
||||
"img/marker-blue.png": "<%= asset_path 'marker-blue.png' %>",
|
||||
"img/marker-gold.png": "<%= asset_path 'marker-gold.png' %>",
|
||||
"img/marker-green.png": "<%= asset_path 'marker-green.png' %>",
|
||||
"img/marker.png": "<%= asset_path 'marker.png' %>",
|
||||
"img/measuring-stick-off.png": "<%= asset_path 'measuring-stick-off.png' %>",
|
||||
"img/measuring-stick-on.png": "<%= asset_path 'measuring-stick-on.png' %>",
|
||||
"img/north-mini.png": "<%= asset_path 'north-mini.png' %>",
|
||||
"img/panning-hand-off.png": "<%= asset_path 'panning-hand-off.png' %>",
|
||||
"img/panning-hand-on.png": "<%= asset_path 'panning-hand-on.png' %>",
|
||||
"img/slider.png": "<%= asset_path 'slider.png' %>",
|
||||
"img/south-mini.png": "<%= asset_path 'south-mini.png' %>",
|
||||
"img/west-mini.png": "<%= asset_path 'west-mini.png' %>",
|
||||
"img/zoombar.png": "<%= asset_path 'zoombar.png' %>",
|
||||
"img/zoom-minus-mini.png": "<%= asset_path 'zoom-minus-mini.png' %>",
|
||||
"img/zoom-plus-mini.png": "<%= asset_path 'zoom-plus-mini.png' %>",
|
||||
"img/zoom-world-mini.png": "<%= asset_path 'zoom-world-mini.png' %>"
|
||||
};
|
||||
|
||||
OpenLayers.Util.origCreateImage = OpenLayers.Util.createImage;
|
||||
|
||||
OpenLayers.Util.createImage = function(id, px, sz, imgURL, position, border,
|
||||
opacity, delayDisplay) {
|
||||
imgURL = OpenLayers.Util.imageURLs[imgURL] || imgURL;
|
||||
|
||||
return OpenLayers.Util.origCreateImage(id, px, sz, imgURL, position,
|
||||
border, opacity, delayDisplay);
|
||||
};
|
||||
|
|
|
|||
433
app/assets/openlayers/theme/default/style.css.scss
Normal file
433
app/assets/openlayers/theme/default/style.css.scss
Normal file
|
|
@ -0,0 +1,433 @@
|
|||
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: 0em;
|
||||
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 {
|
||||
right: 0;
|
||||
bottom: 80px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.olControlOverviewMapMaximizeButton {
|
||||
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-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: 75px;
|
||||
background-color: darkblue;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.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 {
|
||||
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;
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue