alion

static/floppyforms/js/MapWidget.js

@@ -0,0 +1,377 @@
+(function() {
+/**
+ * Transforms an array of features to a single feature with the merged
+ * geometry of geom_type
+ */
+OpenLayers.Util.properFeatures = function(features, geom_type) {
+	if (features.constructor == Array) {
+		var geoms = [];
+		for (var i=0; i<features.length; i++) {
+			geoms.push(features[i].geometry);
+		}
+		var geom = new geom_type(geoms);
+		features = new OpenLayers.Feature.Vector(geom);
+	}
+	return features;
+}
+
+/**
+ * @requires OpenLayers/Format/WKT.js
+ */
+
+/**
+ * Class: OpenLayers.Format.DjangoWKT
+ * Class for reading Well-Known Text, with workarounds to successfully parse
+ * geometries and collections as returnes by django.contrib.gis.geos.
+ *
+ * Inherits from:
+ *  - <OpenLayers.Format.WKT>
+ */
+
+OpenLayers.Format.DjangoWKT = OpenLayers.Class(OpenLayers.Format.WKT, {
+	initialize: function(options) {
+		OpenLayers.Format.WKT.prototype.initialize.apply(this, [options]);
+		this.regExes.justComma = /\s*,\s*/;
+	},
+
+	parse: {
+		'point': function(str) {
+			var coords = OpenLayers.String.trim(str).split(this.regExes.spaces);
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.Point(coords[0], coords[1])
+			);
+		},
+
+		'multipoint': function(str) {
+			var point;
+			var points = OpenLayers.String.trim(str).split(this.regExes.justComma);
+			var components = [];
+			for(var i=0, len=points.length; i<len; ++i) {
+				point = points[i].replace(this.regExes.trimParens, '$1');
+				components.push(this.parse.point.apply(this, [point]).geometry);
+			}
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.MultiPoint(components)
+			);
+		},
+
+		'linestring': function(str) {
+			var points = OpenLayers.String.trim(str).split(',');
+			var components = [];
+			for(var i=0, len=points.length; i<len; ++i) {
+				components.push(this.parse.point.apply(this, [points[i]]).geometry);
+			}
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.LineString(components)
+			);
+		},
+
+		'multilinestring': function(str) {
+			var line;
+			var lines = OpenLayers.String.trim(str).split(this.regExes.parenComma);
+			var components = [];
+			for(var i=0, len=lines.length; i<len; ++i) {
+				line = lines[i].replace(this.regExes.trimParens, '$1');
+				components.push(this.parse.linestring.apply(this, [line]).geometry);
+			}
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.MultiLineString(components)
+			);
+		},
+
+		'polygon': function(str) {
+			var ring, linestring, linearring;
+			var rings = OpenLayers.String.trim(str).split(this.regExes.parenComma);
+			var components = [];
+			for(var i=0, len=rings.length; i<len; ++i) {
+				ring = rings[i].replace(this.regExes.trimParens, '$1');
+				linestring = this.parse.linestring.apply(this, [ring]).geometry;
+				linearring = new OpenLayers.Geometry.LinearRing(linestring.components);
+				components.push(linearring);
+			}
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.Polygon(components)
+			);
+		},
+
+		'multipolygon': function(str) {
+			var polygon;
+			var polygons = OpenLayers.String.trim(str).split(this.regExes.doubleParenComma);
+			var components = [];
+			for(var i=0, len=polygons.length; i<len; ++i) {
+				polygon = polygons[i].replace(this.regExes.trimParens, '$1');
+				components.push(this.parse.polygon.apply(this, [polygon]).geometry);
+			}
+			return new OpenLayers.Feature.Vector(
+				new OpenLayers.Geometry.MultiPolygon(components)
+			);
+		},
+
+		'geometrycollection': function(str) {
+			// separate components of the collection with |
+			str = str.replace(/,\s*([A-Za-z])/g, '|$1');
+			var wktArray = OpenLayers.String.trim(str).split('|');
+			var components = [];
+			for(var i=0, len=wktArray.length; i<len; ++i) {
+				components.push(OpenLayers.Format.WKT.prototype.read.apply(this,[wktArray[i]]));
+			}
+			return components;
+		}
+	},
+
+	extractGeometry: function(geometry) {
+		var type = geometry.CLASS_NAME.split('.')[2].toLowerCase();
+		if (!this.extract[type]) {
+			return null;
+		}
+		if (this.internalProjection && this.externalProjection) {
+			geometry = geometry.clone();
+			geometry.transform(this.internalProjection, this.externalProjection);
+		}
+		var wktType = type == 'collection' ? 'GEOMETRYCOLLECTION' : type.toUpperCase();
+		var data = wktType + '(' + this.extract[type].apply(this, [geometry]) + ')';
+		return data;
+	},
+
+	/**
+	 * Patched write: successfully writes WKT for geometries and
+	 * geometrycollections.
+	 */
+	write: function(features) {
+		var collection, geometry, type, data, isCollection;
+		isCollection = features.geometry.CLASS_NAME == "OpenLayers.Geometry.Collection";
+		var pieces = [];
+		if (isCollection) {
+			collection = features.geometry.components;
+			pieces.push('GEOMETRYCOLLECTION(');
+			for (var i=0, len=collection.length; i<len; ++i) {
+				if (i>0) {
+					pieces.push(',');
+				}
+				pieces.push(this.extractGeometry(collection[i]));
+			}
+			pieces.push(')');
+		} else {
+			pieces.push(this.extractGeometry(features.geometry));
+		}
+		return pieces.join('');
+	},
+
+	CLASS_NAME: "OpenLayers.Format.DjangoWKT"
+});
+
+function MapWidget(options) {
+	this.map = null;
+	this.controls = null;
+	this.panel = null;
+	this.layers = {};
+	this.wkt_f = new OpenLayers.Format.DjangoWKT();
+
+	// Default options
+	this.options = {
+		base_layer: new OpenLayers.Layer.WMS('OpenLayers WMS', 'http://vmap0.tiles.osgeo.org/wms/vmap0', {layers: 'basic'}),
+		color: 'ee9900',
+		default_lat: 0,
+		default_lon: 0,
+		default_zoom: 4,
+		is_collection: false,
+		is_linestring: false,
+		is_point: false,
+		is_polygon: false,
+		layerswitcher: false,
+		map_options: {},
+		map_srid: 4326,
+		modifiable: true,
+		mouse_position: false,
+		opacity: 0.4,
+		point_zoom: 12,
+		scale_text: false,
+		scrollable: true
+	};
+	// Altering using user-provied options
+	for (var property in options) {
+		if (options.hasOwnProperty(property)) {
+			this.options[property] = options[property];
+		}
+	}
+
+	this.map = new OpenLayers.Map(this.options.map_id, this.options.map_options);
+	this.layers.base = this.options.base_layer;
+	this.map.addLayer(this.layers.base);
+
+	var defaults_style = {
+		'fillColor': '#' + this.options.color,
+		'fillOpacity': this.options.opacity,
+		'strokeColor': '#' + this.options.color
+	};
+	if (this.options.is_linestring) {
+		defaults_style['strokeWidth'] = 3;
+	}
+	var styleMap = new OpenLayers.StyleMap({'default': OpenLayers.Util.applyDefaults(defaults_style, OpenLayers.Feature.Vector.style['default'])});
+	this.layers.vector = new OpenLayers.Layer.Vector(" " + this.options.name, {styleMap: styleMap});
+	this.map.addLayer(this.layers.vector);
+	wkt = document.getElementById(this.options.id).value;
+	if (wkt) {
+		var feat = OpenLayers.Util.properFeatures(this.read_wkt(wkt), this.options.geom_type);
+		this.write_wkt(feat);
+		if (this.options.is_collection) {
+			for (var i=0; i<this.num_geom; i++) {
+				this.layers.vector.addFeatures([new OpenLayers.Feature.Vector(feat.geometry.components[i].clone())]);
+			}
+		} else {
+			this.layers.vector.addFeatures([feat]);
+		}
+		this.map.zoomToExtent(feat.geometry.getBounds());
+		if (this.options.is_point) {
+			this.map.zoomTo(this.options.point_zoom);
+		}
+	} else {
+		this.map.setCenter(this.defaultCenter(), this.options.default_zoom);
+	}
+	this.layers.vector.events.on({'featuremodified': this.modify_wkt, scope: this});
+	this.layers.vector.events.on({'featureadded': this.add_wkt, scope: this});
+
+	this.getControls(this.layers.vector);
+	this.panel.addControls(this.controls);
+	this.map.addControl(this.panel);
+	this.addSelectControl();
+
+	if (this.options.mouse_position) {
+		this.map.addControl(new OpenLayers.Control.MousePosition());
+	}
+	if (this.options.scale_text) {
+		this.map.addControl(new OpenLayers.Control.Scale());
+	}
+	if (this.options.layerswitcher) {
+		this.map.addControl(new OpenLayers.Control.LayerSwitcher());
+	}
+	if (!this.options.scrollable) {
+		this.map.getControlsByClass('OpenLayers.Control.Navigation')[0].disableZoomWheel();
+	}
+	if (wkt) {
+		if (this.options.modifiable) {
+			this.enableEditing();
+		}
+	} else {
+		this.enableDrawing();
+	}
+}
+
+MapWidget.prototype.get_ewkt = function(feat) {
+	return "SRID=" + this.options.map_srid + ";" + this.wkt_f.write(feat);
+};
+
+MapWidget.prototype.read_wkt = function(wkt) {
+	var prefix = 'SRID=' + this.options.map_srid + ';'
+	if (wkt.indexOf(prefix) === 0) {
+		wkt = wkt.slice(prefix.length);
+	}
+	return this.wkt_f.read(wkt);
+};
+
+MapWidget.prototype.write_wkt = function(feat) {
+	feat = OpenLayers.Util.properFeatures(feat, this.options.geom_type);
+	if (this.options.is_collection) {
+		this.num_geom = feat.geometry.components.length;
+	} else {
+		this.num_geom = 1;
+	}
+	document.getElementById(this.options.id).value = this.get_ewkt(feat);
+};
+
+MapWidget.prototype.add_wkt = function(event) {
+	if (this.options.is_collection) {
+		var feat = new OpenLayers.Feature.Vector(new this.options.geom_type());
+		for (var i=0; i<this.layers.vector.features.length; i++) {
+			feat.geometry.addComponents([this.layers.vector.features[i].geometry]);
+		}
+		this.write_wkt(feat);
+	} else {
+		if (this.layers.vector.features.length > 1) {
+			old_feats = [this.layers.vector.features[0]];
+			this.layers.vector.removeFeatures(old_feats);
+			this.layers.vector.destroyFeatures(old_feats);
+		}
+		this.write_wkt(event.feature);
+	}
+};
+
+MapWidget.prototype.modify_wkt = function(event) {
+	if (this.options.is_collection) {
+		if (this.options.is_point) {
+			this.add_wkt(event);
+			return;
+		} else {
+			var feat = new OpenLayers.Feature.Vector(new this.options.geom_type());
+			for (var i=0; i<this.num_geom; i++) {
+				feat.geometry.addComponents([this.layers.vector.features[i].geometry]);
+			}
+			this.write_wkt(feat);
+		}
+	} else {
+		this.write_wkt(event.feature);
+	}
+};
+
+MapWidget.prototype.deleteFeatures = function() {
+	this.layers.vector.removeFeatures(this.layers.vector.features);
+	this.layers.vector.destroyFeatures();
+};
+
+MapWidget.prototype.clearFeatures = function() {
+	this.deleteFeatures();
+	document.getElementById(this.options.id).value = '';
+	this.map.setCenter(this.defaultCenter(), this.options.default_zoom);
+};
+
+MapWidget.prototype.defaultCenter = function() {
+	var center = new OpenLayers.LonLat(this.options.default_lon, this.options.default_lat);
+	if (this.options.map_srid) {
+		return center.transform(new OpenLayers.Projection("EPSG:4326"), this.map.getProjectionObject());
+	}
+	return center;
+};
+
+MapWidget.prototype.addSelectControl = function() {
+	var select = new OpenLayers.Control.SelectFeature(this.layers.vector, {'toggle': true, 'clickout': true});
+	this.map.addControl(select);
+	select.activate();
+};
+
+MapWidget.prototype.enableDrawing = function () {
+	this.map.getControlsByClass('OpenLayers.Control.DrawFeature')[0].activate();
+};
+
+MapWidget.prototype.enableEditing = function () {
+	this.map.getControlsByClass('OpenLayers.Control.ModifyFeature')[0].activate();
+};
+
+MapWidget.prototype.getControls = function(layer) {
+	this.panel = new OpenLayers.Control.Panel({'displayClass': 'olControlEditingToolbar'});
+	var nav = [new OpenLayers.Control.Navigation()];
+	var draw_ctl;
+	if (this.options.is_linestring) {
+		draw_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {'displayClass': 'olControlDrawFeaturePath'});
+	} else if (this.options.is_polygon) {
+		draw_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {'displayClass': 'olControlDrawFeaturePolygon'});
+	} else if (this.options.is_point) {
+		draw_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {'displayClass': 'olControlDrawFeaturePoint'});
+	} else { // generic geometry
+		var point_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Point, {'displayClass': 'olControlDrawFeaturePoint'});
+		var path_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Path, {'displayClass': 'olControlDrawFeaturePath'});
+		var poly_ctl = new OpenLayers.Control.DrawFeature(layer, OpenLayers.Handler.Polygon, {'displayClass': 'olControlDrawFeaturePolygon'});
+		draw_ctl = [point_ctl, path_ctl, poly_ctl];
+	}
+	if (this.options.modifiable) {
+		var mod = [new OpenLayers.Control.ModifyFeature(layer, {'displayClass': 'olControlModifyFeature'})];
+		this.controls = nav.concat(draw_ctl, mod);
+	} else {
+		if (!layer.features.length) {
+			this.controls = nav.concat(draw_ctl);
+		} else {
+			this.controls = nav;
+		}
+	}
+};
+window.MapWidget = MapWidget;
+})();

static/floppyforms/openlayers/theme/default/google.css

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

static/floppyforms/openlayers/theme/default/ie6-style.css

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

static/floppyforms/openlayers/theme/default/style.css

@@ -0,0 +1,516 @@
+div.olMap {
+    z-index: 0;
+    padding: 0 !important;
+    margin: 0 !important;
+    cursor: default;
+}
+
+div.olMapViewport {
+    text-align: left;
+    -ms-touch-action: none;
+}
+
+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;
+}
+/* GMaps should not set styles on its container */
+.olForeignContainer {
+    opacity: 1 !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: url("img/blank.gif");
+    cursor: move;
+    border: 2px dotted red;
+}
+.olControlOverviewMapRectReplacement {
+    overflow: hidden;
+    cursor: move;
+    background-image: url("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: url("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: url(img/save_features_on.png);
+    background-repeat: no-repeat;
+    background-position: 0 1px;
+}
+div.olControlSaveFeaturesItemInactive {
+    background-image: url(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: url(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: url(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: url("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: 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;
+}
+
+/* Turn on GPU support where available */
+.olTileImage {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    -ms-perspective: 1000;
+    perspective: 1000;
+}
+
+/* when replacing tiles, do not show tile and backbuffer at the same time */
+.olTileReplacing {
+    display: none;
+}
+
+/* override any max-width image settings (e.g. bootstrap.css) */
+img.olTileImage {
+    max-width: none;
+}

static/floppyforms/openlayers/theme/default/style.mobile.css

@@ -0,0 +1,70 @@
+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);
+    }
+}
+div.olMapViewport {
+    -ms-touch-action: none;
+}
+.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;
+}
+/* Turn on GPU support where available */
+.olTileImage {
+    -webkit-transform: translateZ(0);
+    -moz-transform: translateZ(0);
+    -o-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-backface-visibility: hidden;
+    -moz-backface-visibility: hidden;
+    -ms-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000;
+    -moz-perspective: 1000;
+    -ms-perspective: 1000;
+    perspective: 1000;
+}