@antv/l7-map 2.9.32-alpha.2 → 2.9.33

package/lib/camera.js

@@ -0,0 +1,533 @@
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target, mod));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/camera.ts
+var camera_exports = {};
+__export(camera_exports, {
+  default: () => Camera
+});
+module.exports = __toCommonJS(camera_exports);
+var import_eventemitter3 = require("eventemitter3");
+var import_lodash = require("lodash");
+var import_lng_lat = __toESM(require("./geo/lng_lat"));
+var import_lng_lat_bounds = __toESM(require("./geo/lng_lat_bounds"));
+var import_point = __toESM(require("./geo/point"));
+var import_transform = __toESM(require("./geo/transform"));
+var import_event = require("./handler/events/event");
+var import_util = require("./util");
+var Camera = class extends import_eventemitter3.EventEmitter {
+  constructor(options) {
+    super();
+    this.renderFrameCallback = () => {
+      const t = Math.min(((0, import_util.now)() - this.easeStart) / this.easeOptions.duration, 1);
+      this.onEaseFrame(this.easeOptions.easing(t));
+      if (t < 1) {
+        this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback);
+      } else {
+        this.stop();
+      }
+    };
+    this.options = options;
+    const { minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies } = options;
+    this.moving = false;
+    this.zooming = false;
+    this.bearingSnap = options.bearingSnap;
+    this.pitchEnabled = options.pitchEnabled;
+    this.rotateEnabled = options.rotateEnabled;
+    this.transform = new import_transform.default(minZoom, maxZoom, minPitch, maxPitch, renderWorldCopies);
+  }
+  requestRenderFrame(cb) {
+    return 0;
+  }
+  cancelRenderFrame(_) {
+    return;
+  }
+  getCenter() {
+    const { lng, lat } = this.transform.center;
+    return new import_lng_lat.default(lng, lat);
+  }
+  getZoom() {
+    return this.transform.zoom;
+  }
+  getPitch() {
+    return this.transform.pitch;
+  }
+  setCenter(center, eventData) {
+    return this.jumpTo({ center }, eventData);
+  }
+  setPitch(pitch, eventData) {
+    this.jumpTo({ pitch }, eventData);
+    return this;
+  }
+  getBearing() {
+    return this.transform.bearing;
+  }
+  panTo(lnglat, options, eventData) {
+    return this.easeTo((0, import_lodash.merge)({
+      center: lnglat
+    }, options), eventData);
+  }
+  zoomOut(options, eventData) {
+    this.zoomTo(this.getZoom() - 1, options, eventData);
+    return this;
+  }
+  setBearing(bearing, eventData) {
+    this.jumpTo({ bearing }, eventData);
+    return this;
+  }
+  setZoom(zoom, eventData) {
+    this.jumpTo({ zoom }, eventData);
+    return this;
+  }
+  zoomIn(options, eventData) {
+    this.zoomTo(this.getZoom() + 1, options, eventData);
+    return this;
+  }
+  zoomTo(zoom, options, eventData) {
+    return this.easeTo((0, import_lodash.merge)({
+      zoom
+    }, options), eventData);
+  }
+  getPadding() {
+    return this.transform.padding;
+  }
+  setPadding(padding, eventData) {
+    this.jumpTo({ padding }, eventData);
+    return this;
+  }
+  rotateTo(bearing, options, eventData) {
+    return this.easeTo((0, import_lodash.merge)({
+      bearing
+    }, options), eventData);
+  }
+  resetNorth(options, eventData) {
+    this.rotateTo(0, (0, import_lodash.merge)({ duration: 1e3 }, options), eventData);
+    return this;
+  }
+  resetNorthPitch(options, eventData) {
+    this.easeTo((0, import_lodash.merge)({
+      bearing: 0,
+      pitch: 0,
+      duration: 1e3
+    }, options), eventData);
+    return this;
+  }
+  fitBounds(bounds, options, eventData) {
+    return this.fitInternal(this.cameraForBounds(bounds, options), options, eventData);
+  }
+  cameraForBounds(bounds, options) {
+    bounds = import_lng_lat_bounds.default.convert(bounds);
+    return this.cameraForBoxAndBearing(bounds.getNorthWest(), bounds.getSouthEast(), 0, options);
+  }
+  snapToNorth(options, eventData) {
+    if (Math.abs(this.getBearing()) < this.bearingSnap) {
+      return this.resetNorth(options, eventData);
+    }
+    return this;
+  }
+  jumpTo(options = {}, eventData) {
+    this.stop();
+    const tr = this.transform;
+    let zoomChanged = false;
+    let bearingChanged = false;
+    let pitchChanged = false;
+    if (options.zoom && tr.zoom !== +options.zoom) {
+      zoomChanged = true;
+      tr.zoom = +options.zoom;
+    }
+    if (options.center !== void 0) {
+      tr.center = import_lng_lat.default.convert(options.center);
+    }
+    if (options.bearing && tr.bearing !== +options.bearing) {
+      bearingChanged = true;
+      tr.bearing = +options.bearing;
+    }
+    if (options.pitch && tr.pitch !== +options.pitch) {
+      pitchChanged = true;
+      tr.pitch = +options.pitch;
+    }
+    if (options.padding != null && !tr.isPaddingEqual(options.padding)) {
+      tr.padding = options.padding;
+    }
+    this.emit("movestart", new import_event.Event("movestart", eventData));
+    this.emit("move", new import_event.Event("move", eventData));
+    if (zoomChanged) {
+      this.emit("zoomstart", new import_event.Event("zoomstart", eventData));
+      this.emit("zoom", new import_event.Event("zoom", eventData));
+      this.emit("zoomend", new import_event.Event("zoomend", eventData));
+    }
+    if (bearingChanged) {
+      this.emit("rotatestart", new import_event.Event("rotatestart", eventData));
+      this.emit("rotate", new import_event.Event("rotate", eventData));
+      this.emit("rotateend", new import_event.Event("rotateend", eventData));
+    }
+    if (pitchChanged) {
+      this.emit("pitchstart", new import_event.Event("pitchstart", eventData));
+      this.emit("pitch", new import_event.Event("pitch", eventData));
+      this.emit("pitchend", new import_event.Event("pitchend", eventData));
+    }
+    return this.emit("moveend", new import_event.Event("moveend", eventData));
+  }
+  easeTo(options = {}, eventData) {
+    options = (0, import_lodash.merge)({
+      offset: [0, 0],
+      duration: 500,
+      easing: import_util.ease
+    }, options);
+    if (options.animate === false || !options.essential && (0, import_util.prefersReducedMotion)()) {
+      options.duration = 0;
+    }
+    const tr = this.transform;
+    const startZoom = this.getZoom();
+    const startBearing = this.getBearing();
+    const startPitch = this.getPitch();
+    const startPadding = this.getPadding();
+    const zoom = options.zoom ? +options.zoom : startZoom;
+    const bearing = options.bearing ? this.normalizeBearing(options.bearing, startBearing) : startBearing;
+    const pitch = options.pitch ? +options.pitch : startPitch;
+    const padding = options.padding ? options.padding : tr.padding;
+    const offsetAsPoint = import_point.default.convert(options.offset);
+    let pointAtOffset = tr.centerPoint.add(offsetAsPoint);
+    const locationAtOffset = tr.pointLocation(pointAtOffset);
+    const center = import_lng_lat.default.convert(options.center || locationAtOffset);
+    this.normalizeCenter(center);
+    const from = tr.project(locationAtOffset);
+    const delta = tr.project(center).sub(from);
+    const finalScale = tr.zoomScale(zoom - startZoom);
+    let around;
+    let aroundPoint;
+    if (options.around) {
+      around = import_lng_lat.default.convert(options.around);
+      aroundPoint = tr.locationPoint(around);
+    }
+    const currently = {
+      moving: this.moving,
+      zooming: this.zooming,
+      rotating: this.rotating,
+      pitching: this.pitching
+    };
+    this.zooming = this.zooming || zoom !== startZoom;
+    this.rotating = this.rotating || startBearing !== bearing;
+    this.pitching = this.pitching || pitch !== startPitch;
+    this.padding = !tr.isPaddingEqual(padding);
+    this.easeId = options.easeId;
+    this.prepareEase(eventData, options.noMoveStart, currently);
+    clearTimeout(this.easeEndTimeoutID);
+    this.ease((k) => {
+      if (this.zooming) {
+        tr.zoom = (0, import_util.interpolate)(startZoom, zoom, k);
+      }
+      if (this.rotating && this.rotateEnabled) {
+        tr.bearing = (0, import_util.interpolate)(startBearing, bearing, k);
+      }
+      if (this.pitching && this.pitchEnabled) {
+        tr.pitch = (0, import_util.interpolate)(startPitch, pitch, k);
+      }
+      if (this.padding) {
+        tr.interpolatePadding(startPadding, padding, k);
+        pointAtOffset = tr.centerPoint.add(offsetAsPoint);
+      }
+      if (around) {
+        tr.setLocationAtPoint(around, aroundPoint);
+      } else {
+        const scale = tr.zoomScale(tr.zoom - startZoom);
+        const base = zoom > startZoom ? Math.min(2, finalScale) : Math.max(0.5, finalScale);
+        const speedup = Math.pow(base, 1 - k);
+        const newCenter = tr.unproject(from.add(delta.mult(k * speedup)).mult(scale));
+        tr.setLocationAtPoint(tr.renderWorldCopies ? newCenter.wrap() : newCenter, pointAtOffset);
+      }
+      this.fireMoveEvents(eventData);
+    }, (interruptingEaseId) => {
+      this.afterEase(eventData, interruptingEaseId);
+    }, options);
+    return this;
+  }
+  flyTo(options = {}, eventData) {
+    if (!options.essential && (0, import_util.prefersReducedMotion)()) {
+      const coercedOptions = (0, import_util.pick)(options, [
+        "center",
+        "zoom",
+        "bearing",
+        "pitch",
+        "around"
+      ]);
+      return this.jumpTo(coercedOptions, eventData);
+    }
+    this.stop();
+    options = (0, import_lodash.merge)({
+      offset: [0, 0],
+      speed: 1.2,
+      curve: 1.42,
+      easing: import_util.ease
+    }, options);
+    const tr = this.transform;
+    const startZoom = this.getZoom();
+    const startBearing = this.getBearing();
+    const startPitch = this.getPitch();
+    const startPadding = this.getPadding();
+    const zoom = options.zoom ? (0, import_util.clamp)(+options.zoom, tr.minZoom, tr.maxZoom) : startZoom;
+    const bearing = options.bearing ? this.normalizeBearing(options.bearing, startBearing) : startBearing;
+    const pitch = options.pitch ? +options.pitch : startPitch;
+    const padding = "padding" in options ? options.padding : tr.padding;
+    const scale = tr.zoomScale(zoom - startZoom);
+    const offsetAsPoint = import_point.default.convert(options.offset);
+    let pointAtOffset = tr.centerPoint.add(offsetAsPoint);
+    const locationAtOffset = tr.pointLocation(pointAtOffset);
+    const center = import_lng_lat.default.convert(options.center || locationAtOffset);
+    this.normalizeCenter(center);
+    const from = tr.project(locationAtOffset);
+    const delta = tr.project(center).sub(from);
+    let rho = options.curve;
+    const w0 = Math.max(tr.width, tr.height);
+    const w1 = w0 / scale;
+    const u1 = delta.mag();
+    if ("minZoom" in options) {
+      const minZoom = (0, import_util.clamp)(Math.min(options.minZoom, startZoom, zoom), tr.minZoom, tr.maxZoom);
+      const wMax = w0 / tr.zoomScale(minZoom - startZoom);
+      rho = Math.sqrt(wMax / u1 * 2);
+    }
+    const rho2 = rho * rho;
+    function r(i) {
+      const b = (w1 * w1 - w0 * w0 + (i ? -1 : 1) * rho2 * rho2 * u1 * u1) / (2 * (i ? w1 : w0) * rho2 * u1);
+      return Math.log(Math.sqrt(b * b + 1) - b);
+    }
+    function sinh(n) {
+      return (Math.exp(n) - Math.exp(-n)) / 2;
+    }
+    function cosh(n) {
+      return (Math.exp(n) + Math.exp(-n)) / 2;
+    }
+    function tanh(n) {
+      return sinh(n) / cosh(n);
+    }
+    const r0 = r(0);
+    let w = (s) => {
+      return cosh(r0) / cosh(r0 + rho * s);
+    };
+    let u = (s) => {
+      return w0 * ((cosh(r0) * tanh(r0 + rho * s) - sinh(r0)) / rho2) / u1;
+    };
+    let S = (r(1) - r0) / rho;
+    if (Math.abs(u1) < 1e-6 || !isFinite(S)) {
+      if (Math.abs(w0 - w1) < 1e-6) {
+        return this.easeTo(options, eventData);
+      }
+      const k = w1 < w0 ? -1 : 1;
+      S = Math.abs(Math.log(w1 / w0)) / rho;
+      u = () => {
+        return 0;
+      };
+      w = (s) => {
+        return Math.exp(k * rho * s);
+      };
+    }
+    if ("duration" in options) {
+      options.duration = +options.duration;
+    } else {
+      const V = "screenSpeed" in options ? +options.screenSpeed / rho : +options.speed;
+      options.duration = 1e3 * S / V;
+    }
+    if (options.maxDuration && options.duration > options.maxDuration) {
+      options.duration = 0;
+    }
+    this.zooming = true;
+    this.rotating = startBearing !== bearing;
+    this.pitching = pitch !== startPitch;
+    this.padding = !tr.isPaddingEqual(padding);
+    this.prepareEase(eventData, false);
+    this.ease((k) => {
+      const s = k * S;
+      const easeScale = 1 / w(s);
+      tr.zoom = k === 1 ? zoom : startZoom + tr.scaleZoom(easeScale);
+      if (this.rotating) {
+        tr.bearing = (0, import_util.interpolate)(startBearing, bearing, k);
+      }
+      if (this.pitching) {
+        tr.pitch = (0, import_util.interpolate)(startPitch, pitch, k);
+      }
+      if (this.padding) {
+        tr.interpolatePadding(startPadding, padding, k);
+        pointAtOffset = tr.centerPoint.add(offsetAsPoint);
+      }
+      const newCenter = k === 1 ? center : tr.unproject(from.add(delta.mult(u(s))).mult(easeScale));
+      tr.setLocationAtPoint(tr.renderWorldCopies ? newCenter.wrap() : newCenter, pointAtOffset);
+      this.fireMoveEvents(eventData);
+    }, () => this.afterEase(eventData), options);
+    return this;
+  }
+  fitScreenCoordinates(p0, p1, bearing, options, eventData) {
+    return this.fitInternal(this.cameraForBoxAndBearing(this.transform.pointLocation(import_point.default.convert(p0)), this.transform.pointLocation(import_point.default.convert(p1)), bearing, options), options, eventData);
+  }
+  stop(allowGestures, easeId) {
+    if (this.easeFrameId) {
+      this.cancelRenderFrame(this.easeFrameId);
+      delete this.easeFrameId;
+      delete this.onEaseFrame;
+    }
+    if (this.onEaseEnd) {
+      const onEaseEnd = this.onEaseEnd;
+      delete this.onEaseEnd;
+      onEaseEnd.call(this, easeId);
+    }
+    return this;
+  }
+  normalizeBearing(bearing, currentBearing) {
+    bearing = (0, import_util.wrap)(bearing, -180, 180);
+    const diff = Math.abs(bearing - currentBearing);
+    if (Math.abs(bearing - 360 - currentBearing) < diff) {
+      bearing -= 360;
+    }
+    if (Math.abs(bearing + 360 - currentBearing) < diff) {
+      bearing += 360;
+    }
+    return bearing;
+  }
+  normalizeCenter(center) {
+    const tr = this.transform;
+    if (!tr.renderWorldCopies || tr.lngRange) {
+      return;
+    }
+    const delta = center.lng - tr.center.lng;
+    center.lng += delta > 180 ? -360 : delta < -180 ? 360 : 0;
+  }
+  fireMoveEvents(eventData) {
+    this.emit("move", new import_event.Event("move", eventData));
+    if (this.zooming) {
+      this.emit("zoom", new import_event.Event("zoom", eventData));
+    }
+    if (this.rotating) {
+      this.emit("rotate", new import_event.Event("rotate", eventData));
+    }
+    if (this.pitching) {
+      this.emit("rotate", new import_event.Event("pitch", eventData));
+    }
+  }
+  prepareEase(eventData, noMoveStart = false, currently = {}) {
+    this.moving = true;
+    if (!noMoveStart && !currently.moving) {
+      this.emit("movestart", new import_event.Event("movestart", eventData));
+    }
+    if (this.zooming && !currently.zooming) {
+      this.emit("zoomstart", new import_event.Event("zoomstart", eventData));
+    }
+    if (this.rotating && !currently.rotating) {
+      this.emit("rotatestart", new import_event.Event("rotatestart", eventData));
+    }
+    if (this.pitching && !currently.pitching) {
+      this.emit("pitchstart", new import_event.Event("pitchstart", eventData));
+    }
+  }
+  afterEase(eventData, easeId) {
+    if (this.easeId && easeId && this.easeId === easeId) {
+      return;
+    }
+    delete this.easeId;
+    const wasZooming = this.zooming;
+    const wasRotating = this.rotating;
+    const wasPitching = this.pitching;
+    this.moving = false;
+    this.zooming = false;
+    this.rotating = false;
+    this.pitching = false;
+    this.padding = false;
+    if (wasZooming) {
+      this.emit("zoomend", new import_event.Event("zoomend", eventData));
+    }
+    if (wasRotating) {
+      this.emit("rotateend", new import_event.Event("rotateend", eventData));
+    }
+    if (wasPitching) {
+      this.emit("pitchend", new import_event.Event("pitchend", eventData));
+    }
+    this.emit("moveend", new import_event.Event("moveend", eventData));
+  }
+  ease(frame, finish, options) {
+    if (options.animate === false || options.duration === 0) {
+      frame(1);
+      finish();
+    } else {
+      this.easeStart = (0, import_util.now)();
+      this.easeOptions = options;
+      this.onEaseFrame = frame;
+      this.onEaseEnd = finish;
+      this.easeFrameId = this.requestRenderFrame(this.renderFrameCallback);
+    }
+  }
+  cameraForBoxAndBearing(p0, p1, bearing, options) {
+    const defaultPadding = {
+      top: 0,
+      bottom: 0,
+      right: 0,
+      left: 0
+    };
+    options = (0, import_lodash.merge)({
+      padding: defaultPadding,
+      offset: [0, 0],
+      maxZoom: this.transform.maxZoom
+    }, options);
+    if (typeof options.padding === "number") {
+      const p = options.padding;
+      options.padding = {
+        top: p,
+        bottom: p,
+        right: p,
+        left: p
+      };
+    }
+    options.padding = (0, import_lodash.merge)(defaultPadding, options.padding);
+    const tr = this.transform;
+    const edgePadding = tr.padding;
+    const p0world = tr.project(import_lng_lat.default.convert(p0));
+    const p1world = tr.project(import_lng_lat.default.convert(p1));
+    const p0rotated = p0world.rotate(-bearing * Math.PI / 180);
+    const p1rotated = p1world.rotate(-bearing * Math.PI / 180);
+    const upperRight = new import_point.default(Math.max(p0rotated.x, p1rotated.x), Math.max(p0rotated.y, p1rotated.y));
+    const lowerLeft = new import_point.default(Math.min(p0rotated.x, p1rotated.x), Math.min(p0rotated.y, p1rotated.y));
+    const size = upperRight.sub(lowerLeft);
+    const scaleX = (tr.width - (edgePadding.left + edgePadding.right + options.padding.left + options.padding.right)) / size.x;
+    const scaleY = (tr.height - (edgePadding.top + edgePadding.bottom + options.padding.top + options.padding.bottom)) / size.y;
+    if (scaleY < 0 || scaleX < 0) {
+      return;
+    }
+    const zoom = Math.min(tr.scaleZoom(tr.scale * Math.min(scaleX, scaleY)), options.maxZoom);
+    const offset = import_point.default.convert(options.offset);
+    const paddingOffsetX = (options.padding.left - options.padding.right) / 2;
+    const paddingOffsetY = (options.padding.top - options.padding.bottom) / 2;
+    const offsetAtInitialZoom = new import_point.default(offset.x + paddingOffsetX, offset.y + paddingOffsetY);
+    const offsetAtFinalZoom = offsetAtInitialZoom.mult(tr.scale / tr.zoomScale(zoom));
+    const center = tr.unproject(p0world.add(p1world).div(2).sub(offsetAtFinalZoom));
+    return {
+      center,
+      zoom,
+      bearing
+    };
+  }
+  fitInternal(calculatedOptions, options, eventData) {
+    if (!calculatedOptions) {
+      return this;
+    }
+    options = (0, import_lodash.merge)(calculatedOptions, options);
+    delete options.padding;
+    return options.linear ? this.easeTo(options, eventData) : this.flyTo(options, eventData);
+  }
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {});

package/lib/css/l7.css

@@ -0,0 +1,98 @@
+.l7-map {
+  font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+  overflow: hidden;
+  position: relative;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+.l7-canvas {
+  position: absolute;
+  left: 0;
+  top: 0;
+}
+
+.l7-map:-webkit-full-screen {
+  width: 100%;
+  height: 100%;
+}
+
+.l7-canary {
+  background-color: salmon;
+}
+
+.l7-canvas-container.l7-interactive,
+.l7-ctrl-group button.l7-ctrl-compass {
+  cursor: -webkit-grab;
+  cursor: -moz-grab;
+  cursor: grab;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+.l7-canvas-container.l7-interactive.l7-track-pointer {
+  cursor: pointer;
+}
+
+.l7-canvas-container.l7-interactive:active,
+.l7-ctrl-group button.l7-ctrl-compass:active {
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+  cursor: grabbing;
+}
+
+.l7-canvas-container.l7-touch-zoom-rotate,
+.l7-canvas-container.l7-touch-zoom-rotate .l7-canvas {
+  touch-action: pan-x pan-y;
+}
+
+.l7-canvas-container.l7-touch-drag-pan,
+.l7-canvas-container.l7-touch-drag-pan .l7-canvas {
+  touch-action: pinch-zoom;
+}
+
+.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan,
+.l7-canvas-container.l7-touch-zoom-rotate.l7-touch-drag-pan .l7-canvas {
+  touch-action: none;
+}
+
+.l7-ctrl-top-left,
+.l7-ctrl-top-right,
+.l7-ctrl-bottom-left,
+.l7-ctrl-bottom-right { position: absolute; pointer-events: none; z-index: 2; }
+.l7-ctrl-top-left     { top: 0; left: 0; }
+.l7-ctrl-top-right    { top: 0; right: 0; }
+.l7-ctrl-bottom-left  { bottom: 0; left: 0; }
+.l7-ctrl-bottom-right { right: 0; bottom: 0; }
+
+.l7-ctrl {
+  clear: both;
+  pointer-events: auto;
+
+  /* workaround for a Safari bug https://github.com/mapbox/mapbox-gl-js/issues/8185 */
+  transform: translate(0, 0);
+}
+.l7-ctrl-top-left .l7-ctrl     { margin: 10px 0 0 10px; float: left; }
+.l7-ctrl-top-right .l7-ctrl    { margin: 10px 10px 0 0; float: right; }
+.l7-ctrl-bottom-left .l7-ctrl  { margin: 0 0 10px 10px; float: left; }
+.l7-ctrl-bottom-right .l7-ctrl { margin: 0 10px 10px 0; float: right; }
+
+
+.l7-crosshair,
+.l7-crosshair .l7-interactive,
+.l7-crosshair .l7-interactive:active {
+    cursor: crosshair;
+}
+
+.l7-boxzoom {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 0;
+    height: 0;
+    background: #fff;
+    border: 2px dotted #202020;
+    opacity: 0.5;
+    z-index: 10;
+}