AMapPartBase

Abstraktní třida pro všechny map party, tedy malé ovladací prvky nacházející se na mapě.  Řeší za nás logiku vytvoření a napozicování obalového divu, ale i jeho vložení do mapy.

Příklad ukazuje, že potomek třídy AMapPartBase musí implementovat alespoň metodu AMapPartBase.mapPartInit, a volitelně metodu AMapPartBase.getDefaultPosition.

O příkladu

Následuje příklad úplně jednoduchého map partu.  HTML je vytvořeno dynamicky, jedno jestli pomocí metody wrapper.innerHTML, nebo wrapper.appendChild.

HTML kód musí být generován dynamicky, protože jen tak je možné zajistit elegantní distribuci hotových komponent, jednoduchým vložením odkazu na komponentu.js do HTML head sekce stránky..

Komplexnější prvky

Pro rychlé vytvoření vlastního map partu existuje také třída AMapPartDraggable, potomek třídy AMapPartBase.  Jak název napovídá, tato komplexnější třída poskytne prázdný dragovatelný map part, do kterého stačí přidat formulářová políčka, tlačítka a vytvoření vlastního partu je tak bleskurychlé.

Příklad

var AZoomInOutPart = AMapPartBase.extend({

    options: {
        duration : 1000,
        transition: Fx.Transitions.Quad.easeInOut
    },

    mapPartInit: function(map, wrapper){
        this.map = map;
        this.wrapper = wrapper;
        this.createButtons();
    },

    createButtons: function() {
        this.btns = {};
        this.btns.zoomInOut = new Element("div")
            .setStyles('width:96px; height:96px; background-image:url(../../design/examples/zoomInOut.png)')
            .injectInside(this.wrapper)
            .fixPng();
        this.btns.zoomIn = new Element("div")
            .setStyles('position: absolute; left: 20px; top: 26px; width:29px; height:28px; cursor:pointer;')
            .addEvent('mouseover', this.doZoom.pass(-1, this))
            .injectInside(this.btns.zoomInOut);
        this.btns.zoomOut = new Element("div")
            .setStyles('position: absolute; left: 62px; top: 30px; width:20px; height:20px; cursor:pointer;')
            .addEvent('mouseover', this.doZoom.pass(1, this))
            .injectInside(this.btns.zoomInOut);
    },

    doZoom: function(direction) {
        var idx = this.map.getCurrentScaleIdx();
        this.map.zoomTo(idx + direction, null, null, this.options);
    },

    // pčepsaná metoda, vrací novou výchozí pozici web partu
    getDefaultPosition: function(){
        return new APosition(ACorner.LEFT_BOTTOM, new ASize(7,0));
    }
});