Use base64 for pan zoom bar image. Added a transparent png to use to …

…load button (need an image). Slider is still an mage because the call is in openlayers.js.
wet-boew · Mar 19, 2013 · 31e501c · 31e501c
1 parent ace90cf
commit 31e501c
Show file tree

Hide file tree

Showing 3 changed files with 124 additions and 7 deletions.
diff --git a/src/js/images/geomap/transparent.png b/src/js/images/geomap/transparent.png
diff --git a/src/js/sass/includes/_geomap.scss b/src/js/sass/includes/_geomap.scss
@@ -15,6 +15,90 @@
 	font-size: 1px;
 }
 
+div {
+  &.olControlpanup {
+    height: 18px;
+    width: 18px;
+    left: 15px;
+    top: 4px;
+  }
+  &.olControlpanleft {
+    height: 18px;
+    width: 18px;
+    left: 1px;
+    top: 22px;
+  }
+  &.olControlpandown {
+    height: 18px;
+    width: 18px;
+    left: 15px;
+    top: 40px;
+  }
+  &.olControlpanright {
+    height: 18px;
+    width: 18px;
+    left: 29px;
+    top: 22px;
+  }
+  &.olControlzoomin {
+    height: 18px;
+    width: 18px;
+    left: 15px;
+    top: 63px;
+  }
+  &.olControlzoomout {
+    height: 18px;
+    width: 18px;
+    left: 15px;
+    top: 213px;
+  }
+  &.olControlzoomworld {
+    height: 18px;
+    width: 18px;
+    left: 15px;
+    top: 234px;
+  }
+  &.olControlSlider {
+    height: 9px;
+    width: 18px;
+  }
+  &.olControlBar {
+    background-image: url("../images/geomap/zoombar.png") !important;
+    height: 18px;
+    width: 132px;
+    left: 15px !important;
+    top: 81px !important;
+  }
+}
+
+img {
+  &.olControlpanup {
+    content: url("../images/geomap/north-mini.png");
+  }
+  &.olControlpanleft {
+    content: url("../images/geomap/west-mini.png");
+  }
+  &.olControlpandown {
+    content: url("../images/geomap/south-mini.png");
+  }
+  &.olControlpanright {
+    content: url("../images/geomap/east-mini.png");
+  }
+  &.olControlzoomin {
+    content: url("../images/geomap/zoom-plus-mini.png");
+  }
+  &.olControlzoomout {
+    content: url("../images/geomap/zoom-minus-mini.png");
+  }
+  &.olControlzoomworld {
+    content: url("../images/geomap/zoom-world-mini.png");
+  }
+  &.olControlSlider {
+    height: 9px;
+    width: 18px;
+  }
+}
+
 div {
 	&.olMap {	
 		z-index: 0;

diff --git a/src/js/workers/geomap.js b/src/js/workers/geomap.js
@@ -119,11 +119,44 @@
 
 			return elm; // end of exec
 		}, // end of exec
-		accessibilize: function() {
+
+		addPanZoomBar: function() {
+
+			var mapControl = _pe.dic.get('%geo-mapcontrol');
+			var panZoomBar = new OpenLayers.Control.PanZoomBar();
+
+			OpenLayers.Util.extend(panZoomBar, {
+				draw: function(px) {
+					// initialize our internal div
+					var oButtons = this;
+					var centered = new OpenLayers.Pixel(7.5, 81);
+					OpenLayers.Control.prototype.draw.apply(oButtons, arguments);
+
+					// place the controls
+					oButtons.buttons = [];
+
+					oButtons._addButton('panup', 'transparent.png');
+					oButtons._addButton('panleft', 'transparent.png');
+					oButtons._addButton('panright', 'transparent.png');
+					oButtons._addButton('pandown', 'transparent.png');				
+					oButtons._addButton('zoomin', 'transparent.png');
+					oButtons._addZoomBar(centered.add(7.5,0));
+					oButtons._addButton('zoomout', 'transparent.png');
+					oButtons._addButton('zoomworld', 'transparent.png');
+
+					// add custom CSS styles
+					$(oButtons.slider).attr('class', 'olControlSlider');
+					$(oButtons.slider).find('img').attr('class', 'olControlSlider');
+					$(oButtons.zoombarDiv).attr('class', 'olControlBar');
+					return oButtons.div;
+				}
+			});
+
+			map.addControl(panZoomBar);
+
 			/*
 			 *	Add alt text to map controls and make tab-able
 			 */
-			var mapControl = _pe.dic.get('%geo-mapcontrol');
 			$('div.olButton').each(function() {
 				var $div = $(this),
 					$img = $div.find('img.olAlphaImg'),
@@ -135,8 +168,8 @@
 
 					// add alt text
 					altTxt = _pe.dic.get('%geo-' + actn);
-					$img.attr('alt', altTxt);
-					$div.attr('title', altTxt);
+					$img.attr('alt', altTxt).addClass('olControl' + actn);
+					$div.attr('title', altTxt).addClass('olControl' + actn);
 				}
 			});			
 
@@ -1180,7 +1213,7 @@
 			if (opts.useScaleLine) {
 				map.addControl(new OpenLayers.Control.ScaleLine());
 			}
-			map.addControl(new OpenLayers.Control.PanZoomBar({ zoomWorldIcon: true }));
+
 			map.addControl(new OpenLayers.Control.Navigation({ zoomWheelEnabled: true }));
 
 			map.addControl(new OpenLayers.Control.KeyboardDefaults());			
@@ -1206,8 +1239,8 @@
 				}
 			});
 
-			// add accessibility enhancements
-			this.accessibilize();					
+			// add pan zoom bar
+			_pe.fn.geomap.addPanZoomBar();					
 
 			// zoom to the maximum extent specified
 			map.zoomToMaxExtent();