PanControl class
An instance of PanControl represents a map control to pan the map viewport ~100 pixels north, east, west, or south.
Example
var map = new MapViewport("#container");
// this creates the control and adds it to the
// map's controls pane, and registers
var panControl = new PanControl();
panControl.attachTo(map);
// to detach the control from the map
panControl.detachFrom(map);
class PanControl extends MapControl{
static var _DEFAULT_POS = new Point2D(20,20);
static const SVG_CONTENT = """
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="100"
height="100"
version="1.1">
<g class="pan-control">
<circle class="pan-nob" cx="50" cy="50" r="30"/>
<path class="pan-button pan-north" d="M50 25 l10 10 l-20 0 Z">
<title>pan north</title>
</path>
<path class="pan-button pan-east" d="M75 50 l-10 -10 l0 20 Z">
<title>pan east</title>
</path>
<path class="pan-button pan-south" d="M50 75 l-10 -10 l20 0 Z">
<title>pan south</title>
</path>
<path class="pan-button pan-west" d="M25 50 l10 -10 l0 20 Z">
<title>pan west</title>
</path>
</g>
</svg>
""";
_wireEventHandlers() {
register(cls, handler) {
_subscriptions.add(
_root.query(".pan-button.$cls").onClick.listen(handler)
);
}
register("pan-north", (e) => _map.panNorth(animate: true));
register("pan-east", (e)=>_map.panEast(animate: true));
register("pan-south", (e)=>_map.panSouth(animate: true));
register("pan-west", (e)=>_map.panWest(animate: true));
_root.queryAll(".pan-button").forEach((b) {
_subscriptions.add(b.onMouseOver.listen((e) => b.classes.add("hover")));
_subscriptions.add(b.onMouseOut.listen((e) => b.classes.remove("hover")));
});
}
_buildSvg() {
_root = new Element.tag("div");
_root.style
..position = "absolute"
..left = "20px"
..top = "20px"
..width="100px"
..height = "100px";
var svg = new SvgElement.svg(SVG_CONTENT);
_root.children.add(svg);
}
@override
void build() {
_buildSvg();
_wireEventHandlers();
}
@override
get defaultPosition => _DEFAULT_POS;
PanControl([MapViewport viewport]) : super(viewport);
}
Extends
MapControl > PanControl
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"
width="100"
height="100"
version="1.1">
<g class="pan-control">
<circle class="pan-nob" cx="50" cy="50" r="30"/>
<path class="pan-button pan-north" d="M50 25 l10 10 l-20 0 Z">
<title>pan north</title>
</path>
<path class="pan-button pan-east" d="M75 50 l-10 -10 l0 20 Z">
<title>pan east</title>
</path>
<path class="pan-button pan-south" d="M50 75 l-10 -10 l20 0 Z">
<title>pan south</title>
</path>
<path class="pan-button pan-west" d="M25 50 l10 -10 l0 20 Z">
<title>pan west</title>
</path>
</g>
</svg>
"""
Constructors
new PanControl([MapViewport viewport]) #
PanControl([MapViewport viewport]) : super(viewport);
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();
}