SimpleZoomControl class
This is a simple zoom control element. It displays two
buttons + and - to increase and decrease the
current zoom level respectively
class SimpleZoomControl extends MapControl{
static const SVG_CONTENT = """<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
version="1.1">
<!-- for styles see CSS file in the assets directory -->
<g class="simple-zoom-control">
<!-- content is created dynamically -->
</g>
</svg>
""";
SimpleZoomControl([MapViewport map]) : super(map);
_zoomIn(evt) => _map.zoomIn();
_zoomOut(evt) => _map.zoomOut();
@override
void build() {
_buildSvg();
_wireEventHandlers();
}
_buildSvg() {
_root = new Element.tag("div");
var svg = new SvgElement.svg(SVG_CONTENT);
svg.attributes["width"] = "40";
svg.attributes["height"] = "250";
var control = svg.query(".simple-zoom-control");
var zoomInNob = new SvgElement.svg("""
<g class="zoom-in-nob">
<rect x="0" y="0" width="20" height="20">
<title>Zoom in</title>
</rect>
<line x1="10" y1="3" x2="10" y2="17" />
<line x1="3" y1="10" x2="17" y2="10" />
</g>
"""
);
var zoomOutNob = new SvgElement.svg("""
<g transform="translate(0, 22)" class="zoom-out-nob">
<rect x="0" y="0" width="20" height="20">
<title>Zoom out</title>
</rect>
<line x1="3" y1="10" x2="17" y2="10"/>
</g>
"""
);
control.children.add(zoomInNob);
control.children.add(zoomOutNob);
_root.children.add(svg);
_root.style
..position = "relative"
..width = "100px"
..height = "100px";
}
_wireEventHandlers() {
_onMouseOver(evt) {
var parent = evt.target.parent;
parent.classes.add("hover");
}
_onMouseOut(evt) {
var parent = evt.target.parent;
parent.classes.remove("hover");
}
[_root.query(".zoom-in-nob"), _root.query(".zoom-out-nob")]
.forEach((el) {
_subscriptions.add(el.onMouseOver.listen(_onMouseOver));
_subscriptions.add(el.onMouseOut.listen(_onMouseOut));
});
_subscriptions.add(_root.query(".zoom-in-nob").onClick.listen(_zoomIn));
_subscriptions.add(_root.query(".zoom-out-nob").onClick.listen(_zoomOut));
}
static var _DEFAULT_POS = new Point2D(10,20);
@override
get defaultPosition => _DEFAULT_POS;
}
Extends
MapControl > SimpleZoomControl
Static Properties
const SVG_CONTENT #
static const SVG_CONTENT = """<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" version="1.1"> <!-- for styles see CSS file in the assets directory --> <g class="simple-zoom-control"> <!-- content is created dynamically --> </g> </svg> """
Constructors
new SimpleZoomControl([MapViewport map]) #
SimpleZoomControl([MapViewport map]) : super(map);
Properties
final defaultPosition #
the default position of the control if no position has been
set explicitly using placeAt.
Override in subclasses.
docs inherited from MapControl
@override get defaultPosition => _DEFAULT_POS;
final MapViewport map #
inherited from MapControl
the map this control is attached to, or null
MapViewport get map => _map;
final Element root #
inherited from MapControl
the root DOM element for this map control
Element get root => _root;
Methods
void applyPosition() #
inherited from MapControl
Applies the current position to the appropriate DOM element.
void applyPosition() {
if (root == null) return;
var pos = _position == null ? defaultPosition : _position;
if (pos == null) {
//TODO: log a warning ?
return;
}
root.style
..left = "${pos.x}px"
..top = "${pos.y}px";
}
void attach(MapViewport viewport) #
inherited from MapControl
Attaches this control to the map viewport.
void attach(MapViewport viewport) {
_require(viewport != null, "viewport must not be null");
// already attached ?
if (_map != null) {
if (_map == viewport) {
return; // don't attach again
} else {
detach(); // detach the currently attached, then attach the new one
}
}
this._map = viewport;
var controlsPane = _map.controlsPane;
//TODO: log a warning?
if (controlsPane == null) return;
build();
controlsPane.controls.add(this);
controlsPane.root.children.add(root);
applyPosition();
}
void build() #
Abstract method which builds the DOM tree for the control. Override in subclasses.
docs inherited from MapControl
@override
void build() {
_buildSvg();
_wireEventHandlers();
}
void detach() #
inherited from MapControl
Detaches this control from the map viewport it is currently attached to (if any).
void detach() {
if (_map == null) return;
if (_root == null) return;
if (_map._controlsPane == null) return;
_map.controlsPane.root.children.remove(root);
_subscriptions.forEach((s) => s.cancel());
_subscriptions.clear();
}
void layout() #
inherited from MapControl
Invoke this to force to (re-)layout the map control in the current map viewport.
void layout() {}
void placeAt(int x, int y) #
inherited from MapControl
Places the control at the position ( x, y).
void placeAt(int x, int y) {
_position = new Point2D(x,y);
applyPosition();
}