Google maps nos saca del apuro muchas veces, pero a veces necesitamos usar nuestras propias imagenes (mapas), es por eso que comenzé a desarrollar este controlillo.
El control en acción:
Antes de comenzar es necesario hacer pruebas de CSS para ver que atributos necesitamos para que el mapa aparezc adentro de un cuadrito (DIV), para esto es necesario poner un div (al que llamaré wrapper) y es necesario que tenga posición "relative" y overflow: hidden. Esto es para que la imagen no se aplaste dentro del wrapper. Despues, a la imagen le ponemos posición "absolute" y listo, ya tenemos una imagen encerrada dentro de un div igual que google maps. Lo que sigue es agregarle la funcionalidad drag a la imagen interna para poder moverla dentro del div. Lo que todos sabemos es que si ponemos un elemento del DOM en posicion absoluta, este ignorará la jerarquia del DOM y "flotará" por encima de los demás, sin embargo, si su padre tiene posición relativa (como el wrapper), entonces este quedará atrapado dentro de su padre.
Esta algo confuso, pero asi funciona y eso no lo sabia jojo.
Apenas llevo la primera etapa, ya funciona el "Drag" del mapa para moverlo y cuando das click pone una marker, el siguiente paso es guardar toda la info de las markers y serializarlas para poder enviarlas al server, tambien falta el setValues, para que puedas regresar las markers desde el server y mostrarlas en el mapa, pero bueno, esto me lo eche en una noche, espero terminarlo pronto y subirlo completo.
Pero bueno, el codigo del control es el siguiente:
Ext.ns('Ext.ux.ImageMap');
Ext.ux.ImageMap = Ext.extend(Ext.form.Field, {
initComponent : function(){
/*Apply modified Properties, Listeners dont work here*/
Ext.apply(this,{
autoCreate : {tag:'div', style:'position:relative; overflow:hidden; border:1px solid black;'}
});
this.markers = [];
/*Change Normal Events*/
Ext.ux.ImageMap.superclass.initComponent.apply(this, arguments);
}
,onRender : function (){
Ext.ux.ImageMap.superclass.onRender.apply(this, arguments);
var me = this;
/*Main Overflown wrapper*/
this.wrapper = this.el;
/*Create inner wrapper with image inside */
this.innerwrapper = this.wrapper.createChild({
tag : 'div'
,style : 'position:absolute;'
,children : [{
id : this.mapId = Ext.id() + 'map'
,tag : 'img'
,src : this.bgimage
}]
});
/*Add click event*/
this.innerwrapper.on({
click: function(evt){
if(!me.endDrag){
me.addMarker(evt.xy);
}else{
//Reste drag flag
me.endDrag = false;
}
}
})
/*Set Draggable Actions*/
this.dd = new Ext.dd.DD(this.innerwrapper, 'group');
Ext.apply(this.dd,{
endDrag : function(e){
/*Flag to avoid firing the click event when its a drag*/
me.endDrag = e.getTarget().id == me.mapId ? true : false;
}
});
}
,addMarker : function(p){
var m = this.innerwrapper.createChild({
tag : 'div'
,html :' '
,cls : this.markerImgClass
});
this.markers.push(m);
var ctXY = this.wrapper.getXY();
var imgXY = this.innerwrapper.getXY(); //absolute to frame
//Calculate position
var pos = [];
pos[0] = ctXY[0] - imgXY[0];
pos[1] = ctXY[1] - imgXY[1];
p[0] = pos[0] + (p[0] - ctXY[0])-8;
p[1] = pos[1] + (p[1] - ctXY[1])-8;
m.setLeftTop(p[0], p[1]);
console.log(this.markers);
}
});
Ext.onReady(function(){
/*To use the control just add it to a form or render it to a div*/
var form = new Ext.form.FormPanel({
renderTo :'container'
,title : 'Image Control'
,items : [
new Ext.ux.ImageMap({
height :200
,width :300
,hideLabel : true
,bgimage : '../assets/images/map.jpg' //map image you want to use
,markerImgClass : 'markerImgClass' //marker image
})
]
});
});
Jerry ;)
