ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Adding Zoom control.

Browse Source 
Tests still missing.
This commit is contained in:
ahocevar
2012-06-22 17:14:22 +02:00
parent d9537b558a
commit 0420d2efb9
6 changed files with 180 additions and 152 deletions
Download Patch File Download Diff File Expand all files Collapse all files

51
css/ol.css
View File

@@ -1,5 +1,6 @@
.ol-viewport { width:100%; height:100%; position:relative; left:0; top:0; }
.ol-renderer-webgl-canvas { width:100%;height:100%; }
.ol-renderer-webgl-canvas { width:100%; height:100%; }
/**
* arrow implementation from http://cssarrowplease.com/ for ol-popup
@@ -22,7 +23,6 @@
height: 17px;
right: 0;
}
.ol-popup-top {}
.ol-popup-top:after, .ol-popup-top:before {
bottom: 100%;
@@ -33,21 +33,18 @@
position: absolute;
pointer-events: none;
}
.ol-popup-top:after {
border-bottom-color: #88b7d5;
border-width: 30px;
left: 50%;
margin-left: -30px;
}
.ol-popup-top:before {
border-bottom-color: #c2e1f5;
border-width: 36px;
left: 50%;
margin-left: -36px;
}
.ol-popup-bottom {}
.ol-popup-bottom:after, .ol-popup-bottom:before {
top: 100%;
@@ -58,7 +55,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-bottom:after {
border-top-color: #88b7d5;
border-width: 30px;
@@ -81,7 +77,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-right:after {
border-left-color: #88b7d5;
border-width: 30px;
@@ -104,7 +99,6 @@
position: absolute;
pointer-events: none;
}
.ol-popup-left:after {
border-right-color: #88b7d5;
border-width: 30px;
@@ -118,3 +112,44 @@
margin-top: -36px;
}
div.ol-control-zoom {
position: absolute;
top: 8px;
left: 8px;
background: rgba(255,255,255,0.4);
border-radius: 4px;
padding: 2px;
}
div.ol-control-zoom 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.ol-control-zoom 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.ol-control-zoom a:hover {
background: rgba(0, 60, 136, 0.5);
}
}
a.ol-control-zoom-in {
border-radius: 4px 4px 0 0;
}
a.ol-control-zoom-out {
border-radius: 0 0 4px 4px;
}

2
demo/map.html
View File

@@ -18,6 +18,6 @@
layers: [ol.layer.osm()],
center: [45, 5],
zoom: 10
});
}).getEvents().register("click", function() {console.log("mapclick")})
</script>
</html>

138
lib/OpenLayers/Control/Zoom.js
View File

@@ -1,138 +0,0 @@
/* Copyright (c) 2006-2012 by OpenLayers Contributors (see authors.txt for
* full list of contributors). Published under the 2-clause BSD license.
* See license.txt in the OpenLayers distribution or repository for the
* full text of the license. */
/**
* @requires OpenLayers/Control.js
* @requires OpenLayers/Events/buttonclick.js
*/
/**
* Class: OpenLayers.Control.Zoom
* The Zoom control is a pair of +/- links for zooming in and out.
*
* Inherits from:
* - <OpenLayers.Control>
*/
OpenLayers.Control.Zoom = OpenLayers.Class(OpenLayers.Control, {
/**
* APIProperty: zoomInText
* {String}
* Text for zoom-in link. Default is "+".
*/
zoomInText: "+",
/**
* APIProperty: zoomInId
* {String}
* Instead of having the control create a zoom in link, you can provide
* the identifier for an anchor element already added to the document.
* By default, an element with id "olZoomInLink" will be searched for
* and used if it exists.
*/
zoomInId: "olZoomInLink",
/**
* APIProperty: zoomOutText
* {String}
* Text for zoom-out link. Default is "-".
*/
zoomOutText: "-",
/**
* APIProperty: zoomOutId
* {String}
* Instead of having the control create a zoom out link, you can provide
* the identifier for an anchor element already added to the document.
* By default, an element with id "olZoomOutLink" will be searched for
* and used if it exists.
*/
zoomOutId: "olZoomOutLink",
/**
* Method: draw
*
* Returns:
* {DOMElement} A reference to the DOMElement containing the zoom links.
*/
draw: function() {
var div = OpenLayers.Control.prototype.draw.apply(this),
links = this.getOrCreateLinks(div),
zoomIn = links.zoomIn,
zoomOut = links.zoomOut,
eventsInstance = this.map.events;
if (zoomOut.parentNode !== div) {
eventsInstance = this.events;
eventsInstance.attachToElement(zoomOut.parentNode);
}
eventsInstance.register("buttonclick", this, this.onZoomClick);
this.zoomInLink = zoomIn;
this.zoomOutLink = zoomOut;
return div;
},
/**
* Method: getOrCreateLinks
*
* Parameters:
* el - {DOMElement}
*
* Return:
* {Object} Object with zoomIn and zoomOut properties referencing links.
*/
getOrCreateLinks: function(el) {
var zoomIn = document.getElementById(this.zoomInId),
zoomOut = document.getElementById(this.zoomOutId);
if (!zoomIn) {
zoomIn = document.createElement("a");
zoomIn.href = "#zoomIn";
zoomIn.appendChild(document.createTextNode(this.zoomInText));
zoomIn.className = "olControlZoomIn";
el.appendChild(zoomIn);
}
OpenLayers.Element.addClass(zoomIn, "olButton");
if (!zoomOut) {
zoomOut = document.createElement("a");
zoomOut.href = "#zoomOut";
zoomOut.appendChild(document.createTextNode(this.zoomOutText));
zoomOut.className = "olControlZoomOut";
el.appendChild(zoomOut);
}
OpenLayers.Element.addClass(zoomOut, "olButton");
return {
zoomIn: zoomIn, zoomOut: zoomOut
};
},
/**
* Method: onZoomClick
* Called when zoomin/out link is clicked.
*/
onZoomClick: function(evt) {
var button = evt.buttonElement;
if (button === this.zoomInLink) {
this.map.zoomIn();
} else if (button === this.zoomOutLink) {
this.map.zoomOut();
}
},
/**
* Method: destroy
* Clean up.
*/
destroy: function() {
if (this.map) {
this.map.events.unregister("buttonclick", this, this.onZoomClick);
}
delete this.zoomInLink;
delete this.zoomOutLink;
OpenLayers.Control.prototype.destroy.apply(this);
},
CLASS_NAME: "OpenLayers.Control.Zoom"
});

2
src/ol.js
View File

@@ -2,8 +2,8 @@ goog.provide("ol");
goog.require('ol.base');
goog.require('ol.bounds');
goog.require('ol.control.Control');
goog.require('ol.control.Navigation');
goog.require('ol.control.Zoom');
goog.require('ol.event.Drag');
goog.require('ol.event.Events');
goog.require("ol.map");

36
src/ol/Map.js
View File

@@ -108,8 +108,6 @@ ol.Map = function() {
*/
this.container_ = null;
this.setControls(ol.Map.DEFAULT_CONTROLS);
};
/**
@@ -136,7 +134,7 @@ ol.Map.DEFAULT_TILE_SIZE = 256;
@const
@type {Array.<string>}
*/
ol.Map.DEFAULT_CONTROLS = ["navigation"];
ol.Map.DEFAULT_CONTROLS = ["navigation", "zoom"];
/**
* @return {ol.Loc} Location.
@@ -355,9 +353,19 @@ ol.Map.prototype.setMaxRes = function(res) {
* @param {Element} container the container to render the map to
*/
ol.Map.prototype.setContainer = function(container) {
this.events_.setElement(container);
this.container_ = container;
this.setViewport();
this.createRenderer();
//TODO Controls could be set earlier, but we need to deal with content that
// controls place on overlays.
this.setControls(ol.Map.DEFAULT_CONTROLS);
};
/**
* @return {Element}
*/
ol.Map.prototype.getViewport = function() {
return this.viewport_;
};
ol.Map.prototype.setViewport = function() {
@@ -367,9 +375,21 @@ ol.Map.prototype.setViewport = function() {
this.staticOverlay_ = goog.dom.createDom('div', 'ol-overlay-static');
goog.dom.append(this.viewport_, this.mapOverlay_, this.staticOverlay_);
}
this.events_.setElement(this.viewport_);
goog.dom.appendChild(this.container_, this.viewport_);
};
ol.Map.prototype.createRenderer = function() {
/*var registeredRenderers = ol.renderer.RENDERER_MAP,
candidate;
for (var r in registeredRenderers) {
if (registeredRenderers[r].isSupported()) {
break;
}
}
this.renderer_ = new registeredRenderers[r](this.viewport_);*/
};
/**
* @return {ol.event.Events} the events instance for this map
*/
@@ -385,6 +405,14 @@ ol.Map.prototype.moveByPx = function(dx, dy) {
// call moveByPx on renderers
};
ol.Map.prototype.zoomIn = function() {
this.setZoom(this.zoom_++);
};
ol.Map.prototype.zoomOut = function() {
this.setZoom(this.zoom_--);
};
/**
* @param {ol.geom.Point} loc the location being requested
* @returns {Object} the

103
src/ol/control/Zoom.js Normal file
View File

@@ -0,0 +1,103 @@
goog.provide('ol.control.Zoom');
goog.require('ol.control.Control');
goog.require('goog.dom');
/**
* @constructor
* @extends {ol.control.Control}
* @param {boolean|undefined} opt_autoActivate
*/
ol.control.Zoom = function(opt_autoActivate) {
goog.base(this, opt_autoActivate);
/**
* Activate this control when it is added to a map. Default is true.
*
* @type {boolean} autoActivate
*/
this.autoActivate_ =
goog.isDef(opt_autoActivate) ? opt_autoActivate : true;
};
goog.inherits(ol.control.Zoom, ol.control.Control);
/**
* @param {ol.Map} map
*/
ol.control.Zoom.prototype.setMap = function(map) {
goog.base(this, 'setMap', map);
var container = goog.dom.createDom('div', ol.control.Zoom.RES.CLS);
var inButton = goog.dom.createDom(
'div', ol.control.Zoom.RES.IN_CLS,
goog.dom.createDom('a', {'href': '#zoomIn'})
);
goog.dom.setTextContent(
/** @type {Element} */ (inButton.firstChild),
ol.control.Zoom.RES.IN_TEXT
);
var outButton = goog.dom.createDom(
'div', ol.control.Zoom.RES.OUT_CLS,
goog.dom.createDom('a', {'href': '#zoomOut'})
);
goog.dom.setTextContent(
/** @type {Element} */ (outButton.firstChild),
ol.control.Zoom.RES.OUT_TEXT
);
goog.dom.append(container, inButton, outButton);
var viewport = /** @type {Node} */ map.getViewport();
if (goog.isDefAndNotNull(viewport)) {
goog.dom.append(viewport, container);
}
};
/** @inheritDoc */
ol.control.Zoom.prototype.activate = function() {
var active = goog.base(this, 'activate');
if (active) {
this.getMap().getEvents().register("click", this.handle, this);
}
return active;
};
/** @inheritDoc */
ol.control.Zoom.prototype.deactivate = function() {
var inactive = goog.base(this, 'deactivate');
if (inactive) {
this.getMap().getEvents().unregister("click", this.handle, this);
}
return inactive;
};
/**
* @param {Event} evt
*/
ol.control.Zoom.prototype.handle = function(evt) {
var target = /** @type {Node} */ evt.target,
handled = false;
if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.IN_CLS)) {
this.getMap().zoomIn();
handled = true;
} else
if (goog.dom.getAncestorByClass(target, ol.control.Zoom.RES.OUT_CLS)) {
this.getMap().zoomOut();
handled = true;
}
if (handled) {
evt.preventDefault();
}
return !handled;
};
ol.control.addControl('zoom', ol.control.Zoom);
ol.control.Zoom.RES = {
CLS: 'ol-control-zoom',
IN_CLS: 'ol-control-zoom-in',
OUT_CLS: 'ol-control-zoom-out',
IN_TEXT: '+',
OUT_TEXT: '\u2013'
};