logo El diario de Pepe Molina (Caricatos)

yo

Volviendo a las imágenes SVG, vamos a crear nuestro mapa de forma dinámica.


Última caricatura

Andrés Iniesta: Futbolista español. En la actualidad juega en el Barcelona.

Andrés Iniesta

RSS de las imágenes: rss


La Cita

Si te caes siete veces, levántate ocho

Anónimo, proverbio.


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

SVG: creación dinámica

emoticón de Caricatos Publicado el día 01 de febrero de 2013
id=114; categorías: Vicisitudes de un Webmaster, Globalización, Programación

Volviendo a las imágenes SVG, vamos a crear nuestro mapa de forma dinámica. Advertimos que este apunte (al menos lo que intentamos mostrar) depende de que javascript esté habilitado en nuestro navegador (aunque sea lo habitual, está bien aclararlo; es más, aconsejamos hacer páginas navegables sin la dependencia de javascript).

Ya habíamos insertado la provincia de Gerona dinámicamente en el apunte anterior: SVG: más que mapas, pero ahora vamos a insertar todas las provincias; mostrando inicialmente el norte del continente africano, que servirá de referencia.

Para inserta las provincias españolas, pulse el siguiente botón: ... y veremos aparecer pausadamente y de forma caótica todas las provincias españolas.

Vemos que se ha formado el mapa íntegramente, aunque no tenemos enlaces y el efecto de imagen de sustitución se consigue con estilos, que aunque sea correcto, podemos conseguir el efecto con código svg+xml. Así que modificaremos nuestro código.

Insertando polígonos

En principio hemos usado las coordenadas que teníamos guardadas en el fichero provincias.txt, que aunque tenga el formato de los ficheros php solo puede ser visto como código fuente, o también puede ser insertado con una instrucción "include" del lenguaje; y es eso lo que hemos hecho en el fichero "provincias.php", que genera un fichero svg con la imagen que vemos a continuación: mapita español (pulse sobre la miniatura para ampliarla).

Al tratarse de un fichero svg, a la vez es un fichero xml, que nos vale para obtener datos con la tecnología Ajax. El código que genera la imagen lo vemos a continuación:

<?php
	$fill = (isset($_GET["fill"])) ? $_GET["fill"]:"green";
	$ancho = (isset($_GET["ancho"])) ? $_GET["ancho"] : 625;
	$alto = 571 * $ancho / 625;
	include("provincias.txt");
	header("Content-type: image/svg+xml");
	$svg =<<< svg
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
	"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1"
	width="$ancho" height="$alto" preserveAspectRatio="none" viewBox="0 0 625 571">
svg;

	foreach($provincias as $p => $item)	{
	$pr = htmlspecialchars($p);
	$svg .=<<< p

		<polygon id="$p" fill="$fill" stroke="black" points="$item" />

p;
}
echo <<< mapa
$svg
</svg>

mapa;
?>

Teniendo las provincias y sus coordenadas en nuestro fichero xml+svg, tan solo nos queda insertarlas con javascript.

A diferencia de elementos normales html, los elementos xml se crean con "document.createElementNS", y los atributos se asignan con setAttributeNS. La coletilla "NS" viene de namespace o Espacio de nombres, y será el primero de los parámetros que tendrá la instrucción createElementNS.

Antes de continuar, explicaremos cómo hemos llegado a esto. El código que habíamos utilizado es el siguiente:

provincias = [];

function suma_provincia()	{
	if (provincias.length > 0)	{
		p = provincias.pop();
		provincia = p.provincia;
		puntos = p.puntos;
		nueva = document.createElementNS(svgns, "polygon");
		nueva.setAttributeNS(null, "id", provincia);
		nueva.setAttributeNS(null, "fill", "lime");
		nueva.setAttributeNS(null, "points", puntos);
		nueva.setAttributeNS(null, "stroke", "black");

		tag("crear_mapa_din").appendChild(nueva);
		setTimeout(suma_provincia, Math.floor(Math.random() * 200));
	}
	else	{

		tag("espera").style.display = "none";
		tag("restar_provincias").disabled = false;
	}
}

function obtener_provincias(continuar) {
	ajax = objetoAjax();
	ajax.open("get", "ficheros/provincias.php", true);
	ajax.onreadystatechange = function()	{
		if (ajax.readyState == 4) {
			resultado = ajax.responseXML;
			polys = resultado.getElementsByTagName("polygon");
			for (i = 0, total = polys.length; i < total; i++)
				provincias.push({"provincia": polys[i].getAttribute("id"), "puntos": polys[i].getAttribute("points")});
			window[continuar]();
		}
	}
	ajax.send(null);
}

function crear_mapa()	{
	tag("espera").style.display = "inline";
	tag("sumar_provincias").disabled = true;
	tag("sumar_provincias_link").disabled = true;
	obtener_provincias("suma_provincia");
}

Podemos ver que el espacio de nombres es usado en la creación del elemento "polygon", pero no debe especificarse en los atributos del elemento. Pero con los enlaces debemos usar otra táctica.

Ahora los enlaces

Hasta ahora hemos usado "null" para espacio de nombres de los atributos de los polígonos, pero si bien al insertar una etiqueta "a", seguimos creándola con el espacio de nombres svg; tanto el atributo href como el title es parte del lenguaje XLink, así que al definirlos, debemos asociarlos a esa otra librería.

svgns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";

function suma_provincia_link()	{
	if (provincias.length > 0)	{
		p = provincias.caos();
		provincia = p.provincia;
		puntos = p.puntos;
		nueva = document.createElementNS(svgns, "polygon");
		nueva.setAttributeNS(null, "id", provincia);
		nueva.setAttributeNS(null, "fill", "lime");
		nueva.setAttributeNS(null, "points", puntos);
		nueva.setAttributeNS(null, "stroke", "black");

		enlace = document.createElementNS(svgns, "a");
		enlace.setAttributeNS(xlinkns, "href", "diario.jocker.php?extra=info_hispano&provincia=" + escape(provincia));
		enlace.setAttributeNS(xlinkns, "title", provincia);

		setenlace = document.createElementNS(svgns, "set");
		setenlace.setAttributeNS(null, "attributeName", "fill");
		setenlace.setAttributeNS(null, "begin", "mouseover");
		setenlace.setAttributeNS(null, "end", "mouseout");
		setenlace.setAttributeNS(null, "from", "lime");
		setenlace.setAttributeNS(null, "to", "blue");

		nueva.appendChild(setenlace);

		enlace.appendChild(nueva);

		tag("crear_mapa_din").appendChild(enlace);
		setTimeout(suma_provincia_link, Math.floor(Math.random() * 300));
	}
	else	{

		tag("espera_link").style.display = "none";
		tag("restar_provincias").disabled = false;
	}
}

function crear_mapa_link()	{
	tag("espera_link").style.display = "inline";
	tag("sumar_provincias").disabled = true;
	tag("sumar_provincias_link").disabled = true;
	obtener_provincias(suma_provincia_link);
}

Para probar el código expuesto, en primer lugar limpiaremos el mapa que acabamos de crear pulsando en el botón .

Y ahora podemos crear la nueva versión pulsando el botón que vemos a continuación:


En próximos apuntes veremos más cosas sobre estas imágenes.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.114) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 3618 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/santa.gif
http://www.pepemolina.com/postales/animales/gato8t.gif
Feliz Navidad
Feliz Navidad
enlace a la postal
Copyright © 2002-2017 www.pepemolina.com
RSS rss | Ver Mapa del sitio