xyMap example

HTML

<script src="https://unpkg.com/rbush@2.0.1/rbush.min.js"></script>
<button onclick="zoom('in')">Zoom In</button>
<button onclick="zoom('out')">Zoom Out</button>
<button onclick="caption()">Hide/show captions</button>
<button onclick="select()">Select random object</button>

<div id="map" style="width: 400px; height: 400px; border: solid 1px gray;"></div>
<div id="selected"></div>

<script type="text/javascript">
    var min = 1000, max = 10000,
        x, y, obj;

    var xyMap = new XyMap('map');

    obj = { 
        id: 0, 
        type: 'shape', 
        layer: 0, 
        caption: 'Fig-'+1, 
        colorFill: 'green', 
        colorStroke: 'black',
        widthStroke: 1,
        koords: [
            {x:2000,y:4000},{x:7000,y:2000},{x:6000,y:4500}
        ] 
    };
    xyMap.add(obj);

    let layerId = xyMap.addLayer({
                            alpha: 0.6, 
                            visible: true,
                            visibleCaption: true,
                            caption: { offsetX: -20, offsetY: - 9, font: '8pt arial', color: 'black' },
                            selectable: true,
                            selectChangeStoke: true,
                            selectStrokeWidth: 2,
                            selectStrokeColor: 'black',
                            selectChangeFill: true,
                            selectFillColor: 'red',
                            onSelect: d=>{ document.getElementById("selected").innerHTML = d.caption; }
                        });
    for (var i = 1; i < 100; i++) {
        x = Math.random() * (max - min) + min;
        y = Math.random() * (max - min) + min;
        obj = { 
            id: i, 
            layer: layerId, 
            type: 'circe', 
            caption: 'Obj-'+i, 
            x: x, y: y, r: 5, 
            colorFill: 'blue', 
            colorStroke: 'black',
            widthStroke: 1
        };
        xyMap.add(obj);
    };
    xyMap.init();
    xyMap.show();

    function...

JavaScript

/*
 * xyMap
 * @author Maxim Petrichuk
 * @version 0.2.1
 * @date Dec 10th, 2016
 * @repo https://github.com/MaximPetrichuk/xyMap
 *
 *   - Dependencies: https://github.com/mourner/rbush
 * 
 * sample usage in index.html
 */


/**
 * Class Viewport
 */
class Viewport {
  /**
   * @param  {object}: {
                          update: updateCallback, //function ({ x1, x2, y1, y2, zX, zY})
                          size = { w: 0, h: 0},
                          map = { xMin: 0, yMin: 0, xMax: 0, yMax: 0 },
                          oneZoom = true
                        }
   * @return {Viewport object}
   */
  constructor(param) {
    this.updateCallback = param.update;
    if (typeof this.updateCallback !== 'function') {
      throw new Error('VIEWPORT: update function not defined.');
    };
    this.size = param.size;
    this.map = param.map;
    this.oneZoom = param.oneZoom;
    this.zoomMax = {x: null, y: null};
    this.zoom = {x: null, y: null};
    this.center = {x: null, y: null};
    this.calcMaxZoom();
    this.zoom = this.zoomMax;
    this.calcCenter();
    this.caclViewPort();
  };
  
  set Center(koordXY) {
    this.center.x = koordXY.x;
    this.center.y = koordXY.y;
    this.caclViewPort();
  };

  get Center() { return this.center; };

  set Zoom(zoomShift) {
    let oldZoom = {x: this.zoom.x, y: this.zoom.y};
    this.zoom.x = this.zoom.x + this.zoom.x * zoomShift.x;
    this.zoom.y = this.zoom.y + this.zoom.y * zoomShift.y;
    this.caclViewPort();
  };

  get Zoom() { return this.zoom; };

  set Size(sizeWH) {
    this.size = sizeWH;
    this.caclViewPort();
  };

  get Size() { return this.size; };
  // koords of start viewport
  get startX() { return this.vX; };
  get startY() { return this.vY; };

  show() {
    this.vp = {
      x1: this.vX,
      x2: this.vX + this.size.w / this.zoom.x,
      y1: this.vY,
      y2: this.vY + this.size.h / this.zoom.y,
      zX: this.zoom.x,
      zY: this.zoom.y
    };
    this.updateCallback(this.vp);
 ...