Zoom con svg

[pauleija]

Hola que tal quisiera saber si alguien pudiera ayudarme estoy realizando una aplicacion de mapas(gis) y lo estoy implementando kon svg sin embargo no he podido hacer que funcione el zoom todos los foros me envian a cartonet y la verdad no me gusta komo lo implementan yo kiero algo simple no se si alguien tiene un ejemplo simple de zoom y panning se los agradeceria enormemente.
Mi aplicacion:

Postgis (base de datos)
xslt(presentacion del mapa)
jsp(tratamiento de los datos)
svg(visualizacion de los mapas)
algo de xhtml
ajax

[Covids0020]

Hola, ummm... al margen del uso de animaciones nativas o plugins como el de Adobe, o sea scripting; la referencia hasta la fecha creo que va a ser Carto.net sí o sí.

Es cierto, yo uso y he usado algunas de sus librerías y a mí tampoco me gusta demasiado la forma en que las hacen. Muy profesional y todo el rollo pero demasiado espesas, aunque solo es cuestión de tiempo coger los conceptos -que es lo importante- y destriparlas un poco, asustan pero ten paciencia y podrás aprender de ellas para generar tus propios scripts.

---
En concreto, el zoom (y el panning que casi va de la mano) se puede hacer de varias maneras: Estableciendo escalas de los elementos o grupos; o estableciendo el viewport (viewBox) que creo que es la mejor opción ya que evitas complicaciones de posicionamiento relativo con las transformaciones de escala.

Luego, usar un método depende también de si uno quiere escalar objetos y no, por capas, por iconos... por ejemplo.
Y para acabar queda el clásico de buscar la posición (coordenadas) del usuario en la pantalla, en el documento, el en elemento y trasladar el viewbox o el elemento que se quiera a esas coordenadas que nos interesan.

El problema aquí suelen ser los ratios ya que las coordenadas de una imagen por ejemplo hay que trasladarlas a la posición en la pantalla, el cliente... y más complicado aún si los elementos se escalan.
:D
Pero vamos... por esto te decía que Carto.net ayuda mucho a la hora de comprender estos conceptos y como trabaja el sistema de coordenadas en SVG en relación a las escalas y tal. Hay muchos métodos que son muy útiles ahí; como por ejemplo el uso de medidas de viewBox con el mismo ratio. O la obtención de una transformación de un elemento en relación a otro ^^!
Esas son las claves ;)

---
Pero si pides una librería SVG para DOM XML y ECMAScript va a estar complicado a excepción de librerías que ya generan todo el marcado y tal. La mayoría de librerías más conocidas están pensadas para HTML y muchas no soportan el DOM XML puro y en este caso para SVG.
Por ejemplo, muchos scripts que generan una herramienta de dragging crean al vuelo una división (div)... por defecto, sin más; no se preocuparon de otros elementos porque no se hicieron para otros tipos de documentos.
En este caso, y si no fueran librerías tan complejas, grandes y quizá cerradas, se necesitaría generar un rectángulo, un círculo...
O en cualquier caso que tuvieran soporte para NameSpaces que tampoco suele ser el caso :(

Eso al margen de librerías como Prototype o MooTools que pueden abstraerse del tipo de documento. Son más complejas o básicas, no MooTools, pero son robustas.

[Covids0020]

A continuación de dejo uno de los métodos de su librería para navegación y que a mí más me ha servido. Te recomiendo que destripes y leas detenidamente su sección sobre herramientas de navegación para mapas:

Código:

mapApp.prototype.calcCoord = function(evt,ctmNode) {
	var svgPoint = document.documentElement.createSVGPoint();
	svgPoint.x = evt.clientX;
	svgPoint.y = evt.clientY;
	if (!document.documentElement.getScreenCTM) {
		//undo the effect of transformations
		if (ctmNode) {
			var matrix = getTransformToRootElement(ctmNode);
		}
		else {
			var matrix = getTransformToRootElement(evt.target);			
		}
  		svgPoint = svgPoint.matrixTransform(matrix.inverse().multiply(this.m));
	}
	else {
		//case getScreenCTM is available
		if (ctmNode) {
			var matrix = ctmNode.getScreenCTM();
		}
		else {
			var matrix = evt.target.getScreenCTM();		
		}
  	svgPoint = svgPoint.matrixTransform(matrix.inverse());
	}
  //undo the effect of viewBox and zoomin/scroll
	return svgPoint;
}

La función getTransformToRootElement() va en otro archivo de funciones extras pero si usas Firefox por ejemplo no es necesario ya que admite los métodos DOM sobre la matriz, getCTM, getCurrentTranslation, Scale... etc.

También te recomiendo usarla con alguna otra librería, digamos de bajo nivel, como Prototype ya que te permitirá usar eventos, listeners, peticiones AJAX, etc, con compatibilidad de navegadores ;)