ZoomControl class
A control element for controling the zoom level.
class ZoomControl 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="zoom-control">
<!-- content is created dynamically -->
</g>
</svg>
""";
ZoomControl([MapViewport map]) : super(map);
_zoomIn(evt) => _map.zoomIn();
_zoomOut(evt) => _map.zoomOut();
_onZoomLevelClick(evt) {
try {
var zoom = int.parse(evt.target.dataset["zoom"]);
print("setting zoom: $zoom");
_map.zoom = zoom;
} catch(e) {
print(e);
}
}
_onZoomChanged(evt) {
var levels = _root.queryAll(".zoom-level");
levels.forEach((l) => l.classes.remove("current"));
levels.firstWhere((el) => el.dataset["zoom"] == "${evt.newValue}")
.classes.add("current");
}
@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(".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, 200)" 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>
"""
);
var levels = [];
for (int i = 0; i<=20; i++) {
var level = new SvgElement.svg("""
<rect x="0" y="${25 + (i * 8)}" width="20" height="6" data-zoom="${20-i}">
<title>Set zoom level ${20-i}</title>
</rect>
""");
level.classes.add("zoom-level");
if (_map.zoom == (20 -i)) level.classes.add("current");
levels.add(level);
}
control.children.add(zoomInNob);
control.children.add(zoomOutNob);
levels.forEach((l) => control.children.add(l));
_root.children.add(svg);
_root.style
..position = "relative"
..left = "20px"
..top = "100px"
..width ="200px"
..height = "100px";
}
_wireEventHandlers() {
_root.queryAll(".zoom-level").forEach((el) {
_subscriptions.add(el.onMouseOver.listen((evt) {
evt.target.classes.add("hover");
}));
_subscriptions.add(el.onMouseOut.listen((evt) {
evt.target.classes.remove("hover");
}));
_subscriptions.add(el.onClick.listen(_onZoomLevelClick));
});
_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));
_subscriptions.add(
_map.onPropertyChanged
.where((e) => e.name == "zoom")
.listen(_onZoomChanged)
);
}
static var _DEFAULT_POS = new Point2D(60,150);
@override
get defaultPosition => _DEFAULT_POS;
}
Extends
MapControl > ZoomControl
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="zoom-control"> <!-- content is created dynamically --> </g> </svg> """
Constructors
new ZoomControl([MapViewport map]) #
ZoomControl([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();
}