Como customizar os controis do mapa

27 septiembre 2008

Cando chames ó modelo carte_gis, podes definir o tipo de controis do mapa usando a variable control.

 
[(#MODELE{carte_gis}{id_carte_gis}{id_article}{id_rubrique}{id_mot}{id_auteur}
{recherche} {latit}{lonxit}{zoom}{type}{width}{height}{control})]

Esta variable pode tomar tres valores: Utiliza «small» para poñer un control pequeno estándar con botóns para mover o mapa e facer zoom. Utiliza «large» para poñer un control completo estándar cun control deslizable do zoom. E finalmente, utiliza «custom» para poñer un control completo customizado.

 
{ control = 'small' | 'large' | 'custom' }

Todas as opcións anteriores inclúen por defecto un control para seleccionar o tipo vista entre normal, satélite, híbrido e mapa físico. Se por algunha razón desexas eliminar este control, xunto coa variable control, podes utilizar a variable control_type e asignarlle o valor «non». Deste xeito evitaremos que apareza o control de tipo de vista en calquera das tres opcións anteriores.

 
{ control_type = 'non' }

¿Como modificar o aspecto do control customizado?

Cando escollas «custom» como valor da variable control este será o aspecto que tomen os controis do mapa. Nesta opción, os botóns dos controis foron substituidos por imaxes co fin de mellorar o deseño e que os usuarios podan intercambiadas con facilidade por outras, para adaptar o aspecto dos controis a cada sitio web.

 
{ control = 'custom' }

O control customizado ten tres partes: Un sub-control para seleccionar o tipo de vista, outro sub-control para mover o mapa e outro sub-control para seleccionar o nivel de zoom. Cada un dos sub-controis está composto por unha serie de imaxes, aloxadas en (plugins/googlemap_api/img_pack/png/), que podes modificar directamente para cambiar o deseño.

O primeiro sub-control, mapTypeControl(), permite seleccionar o tipo vista entre normal, satélite, híbrido e mapa físico.

ctlMap.png (botón superior para seleccionar a vista normal)
ctlSat.png (botón superior para seleccionar a vista de satélite)
cctlHyb.png (botón superior para seleccionar a vista híbrida)
ctlPhy.png (botón superior para seleccionar a vista física)

O segundo sub-control, mapMoveControl(), permite mover o mapa nas catro direccións do espazo e despois volver ó punto inicial.

ctlTopLeft.png (esquina superior esquerda)
ctlTop.png (botón para mover o mapa cara arriba)
ctlTopLeft.png (esquina superior dereita)
ctlTop.png (botón para mover o mapa cara a esquerda)
ctlCenter.png (botón para volver ao punto inicial)
ctlRight.png (botón para mover o mapa cara a dereita)
ctlBotLeft.png (esquina inferior esquerda)
ctlBot.png (botón para mover o mapa cara abaixo)
ctlBotRight.png (esquina inferior dereita)

O terceiro sub-control, mapZoomControl(), permite seleccionar o nivel de zoom mediante un control deslizable.

ctlZoomIn.png (botón superior para aumentar o zoom)
ctlZoomNotch.png (nodo intermedio)
ctlZoomSel.png (nodo seleccionado)
ctlZoomOut.png (botón inferior para reducir o zoom)

¿Como modificar a posición das imaxes?

Unha vez cambies as imaxes dos sub-controis, podes ser que necesites hackear o documento javascript que conten o control customizado, para correxir a posición dos sub-controis e de cada unha das imaxes. Atoparás dito documento en (plugins/googlemap_api/js/customControls.js).

Cada sub-control foi creado a partir dun prototipo do obxecto GControl() da API de Google. Modifica os valores de GSize(x, y) para cambiar a posición global de cada un dos sub-controis.

 
function mapNewControl() {
}
mapNewControl.prototype = new GControl();
mapNewControl.prototype.initialize = function(map) {
...
}
mapNewControl.prototype.getDefaultPosition = function() {
return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(0, 0));
}

Cada imaxe foi creada como un elemento «img» e embebida dentro dun elemento «div».

 
var customImg = document.createElement("img");
var customDiv = document.createElement("div");
customDiv.appendChild(customImg);

Busca a propiedade left ou top do estilo de cada un dos elementos «img» ou «div» para variar a posición das imaxes.

 
customDiv.style.left= "10px";
customDiv.style.top= "10px";

¿Como eliminar algún dos sub-controis?

Ó igual que a variable control_type permite eliminar o control para seleccionar o tipo vista, existen dúas variables mais, chamadas control_move e control_zoom, que permiten evitar que aparezan os sub-controis de movemento e de zoom. ¡Ollo estas dúas últimas variables só funcionan nos controis customizados!

Podes asignar o valor «non» as segintes variables para eliminar cada un dos sub-controis, canto esteas utilizando un control customizado.

 
{control_type='non'} // Elimina o sub-control que permite seleccionar o tipo vista.
{control_move='non'} // Elimina o sub-control permite mover o mapa.
{control_zoom='non'} // Elimina o sub-control que permite seleccionar o nivel de zoom.

Este é o aspecto dos controis de Escoitar.org ))) unha vez modificadas as imaxes, cambiada a súa posición e eliminado o sub-control para mover o mapa.