HtmlMap

class webix.HtmlMap(data)
Arguments:
  • data (object) – A configuration object

Htmlmap component.

References

helpers
proto(), uid().

Referenced by

views
chart().

External references

Official documentation page.

Code

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
webix.HtmlMap = webix.proto({
    $init:function(key){
        this._id = "map_"+webix.uid();
        this._key = key;
        this._map = [];
        this._areas = [];
    },
    addRect: function(id,points,userdata) {
        this._createMapArea(id,"RECT",points,userdata);
    },
    addPoly: function(id,points,userdata) {
        this._createMapArea(id,"POLY",points,userdata);
    },
    _createMapArea:function(id,shape,coords,userdata){
        var extra_data = "";
        if(arguments.length==4)
            extra_data = "userdata='"+userdata+"'";
        this._map.push("<area "+this._key+"='"+id+"' shape='"+shape+"' coords='"+coords.join()+"' "+extra_data+"></area>");
        this._areas.push({index: userdata, points:coords});

    },
    addSector:function(id,alpha0,alpha1,x,y,R,ky,userdata){
        var points = [];
        points.push(x);
        points.push(Math.floor(y*ky));
        for(var i = alpha0; i < alpha1; i+=Math.PI/18){
            points.push(Math.floor(x+R*Math.cos(i)));
            points.push(Math.floor((y+R*Math.sin(i))*ky));
        }
        points.push(Math.floor(x+R*Math.cos(alpha1)));
        points.push(Math.floor((y+R*Math.sin(alpha1))*ky));
        points.push(x);
        points.push(Math.floor(y*ky));

        return this.addPoly(id,points,userdata);
    },
    render:function(obj){
        var d = webix.html.create("DIV");
        d.style.cssText="position:absolute; width:100%; height:100%; top:0px; left:0px;";
        obj.appendChild(d);
        var src = webix.env.isIE?"":"src='data:image/gif;base64,R0lGODlhEgASAIAAAP///////yH5BAUUAAEALAAAAAASABIAAAIPjI+py+0Po5y02ouz3pwXADs='";
        d.innerHTML="<map id='"+this._id+"' name='"+this._id+"'>"+this._map.join("\n")+"</map><img "+src+" class='webix_map_img' usemap='#"+this._id+"'>";

        obj._htmlmap = d; //for clearing routine

        this._map = [];
    }
});