imageMapster: renderizado "diferentes" estilos para diferentes clases de áreas

Question

¿Es posible diseñar diferentes áreas en diferentes estilos en ImageMapster?Para EXAMPL: Cuando tengo un plan de una casa, un usuario puede hacer clic en diferentes habitaciones: salas de estar, habitaciones, baño, ....Cualquier sala de estar seleccionada debe ser procesada en rojo, cualquier habitación de servicio seleccionada debe seleccionarse azul ... Gracias Kurt

Answer 1

No hay un camino incorporado en este momento para crear un perfil que se aplique a un grupo de áreas independientes, pero puede hacerlo usted mismo con un poco de trabajo. Aquí hay un ejemplo de trabajo:

http://jsfiddle.net/jamietre/rysscw/

Primero configuró una referencia cruzada:

var profiles = [
{ 
    areas: "ME,VT,CT,NH,RI,DE,MA",
    options: {
        fillColor: '0000ff'   
    }
},
{
    areas: "UT,CO,AZ,NM",
    options: {
        fillColor: '00ff00'   
    }
}
];

Luego, mapea los perfiles a un nuevo objeto para facilitar acceder a ellos usando el "MAPYKEY" para cada área:

var optionsXref = {};

$.each(profiles,function(i,e) {
    var areas = e.areas.split(',');

    $.each(areas,function(j,key) {
        optionsXref[key]=e.options;
    });        
});

Esto convierte la estructura simple que acaba de crear en un objeto que se parece a esto:

{ "ME": { reference to first option group },
  "VT": { reference to first option group },
  ... 
  "UT": { reference to 2nd option group },
  ..
}

Finalmente, intercepte "clics" y seleccione el área manualmente usando las opciones específicas:

image.mapster({
    mapKey: 'data-state',
    onClick: function(e) {
        if (e.selected) {

            // the 4th parameter is the options that area mapped to that area.

            image.mapster('set',true,e.key, optionsXref[e.key]);       
            return false;
        }            
    }
});

El return false hace que ImageMapster cancele su propio manejo de clics. Eso es todo.

También por completo: podría simplemente hacer esto lo antiguo y asignar las opciones a cada área:

La forma directa de hacer esto es agregar información específica a cada área por adelantado, por ejemplo,

$('img').mapster({
    areas: [{ 
        mapKey: 'living-room-1',
        fillColor: 'ff0000'
    },
    {
        mapKey: 'living-room-2',
        fillColor: 'ff0000'
    }, ...
    ]
);

Esto obviamente sería muchos datos si tuvieras muchas áreas, con mucha repetición. Es más eficiente y mucho menos hacerlo al otro lado.