logoExtra: script.crear_mapa

Descripción: Añadimos las provincias españolas dinámicamente al mapa de españa svg.


A continuación mostramos los apuntes asociados a este extra:

SVG: creación dinámica
Volviendo a las imágenes SVG, vamos a crear nuestro mapa de forma dinámica.
// Descripción para sindicación:
/*
    [rss]Añadimos las provincias españolas dinámicamente al mapa de españa svg.[/rss]
*/
svgns = "http://www.w3.org/2000/svg";
xlinkns = "http://www.w3.org/1999/xlink";

poner_evento(window, "load", iniciar_mapas_din);
provincias = [];

function suma_provincia()    {
    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");

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

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

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 iniciar_mapas_din()    {
    poner_evento(tag("sumar_provincias"), "click", crear_mapa);
    poner_evento(tag("sumar_provincias_link"), "click", crear_mapa_link);
    poner_evento(tag("restar_provincias"), "click", borrar_mapa);
}

function borrar_mapa()    {
    while (tag("crear_mapa_din").hasChildNodes())
        tag("crear_mapa_din").removeChild(tag("crear_mapa_din").lastChild);
    tag("restar_provincias").disabled = true;
    tag("sumar_provincias").disabled = false;
    tag("sumar_provincias_link").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")});
            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);
}

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);
}

Este código ha sido leído en 98 ocasiones.

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.crear_mapa) valor

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

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

Listados: imágenes, categorías, etiquetas, extras | Anuarios: 2010, 2011, 2012, 2013, 2014, 2015, 2016, 2017, 2018, 2019, 2020, 2021, 2022, 2023, 2024 | Otros enlaces: buscador