logoExtra: script.mapas_plus

Descripción: Cargaremos nuevos polígonos al mapa de españa svg.


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

SVG: más que mapas
Hemos usado el formato svg para crear mapas interactivos muy sencillos; ahora iremos ampliando las posibilidades de este formato.
// Descripción para sindicación:
/*
    [rss]Cargaremos nuevos polígonos 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_plus);

function iniciar_mapas_plus()    {
    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++)
                if (polys[i].getAttribute("id") == "Gerona")    {
                    puntos = polys[i].getAttribute("points");

                    Gerona = document.createElementNS(svgns, "polygon");
                    Gerona.setAttributeNS(null, "points", puntos);
                    Gerona.setAttributeNS(null, "fill", "lime");
                    Gerona.setAttributeNS(null, "stroke", "red");
                    Gerona.setAttributeNS(null, "stroke-width", "1");

                    linkGerona = document.createElementNS(svgns, "a");
                    linkGerona.setAttributeNS(xlinkns, "class", "normal");
                    linkGerona.setAttributeNS(xlinkns, "href", "?titulo=Congreso+de+Caricaturistas+en+Gerona");
                    linkGerona.setAttributeNS(xlinkns, "title", "ir al apunte sobre el\\nCongreso de Caricaturistas acontecido en Gerona.");
                    linkGerona.appendChild(Gerona);

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

                    Gerona.appendChild(setGerona);


                    document.getElementById("mapa_plus").appendChild(linkGerona);
                }
        }
    }
    ajax.send(null);
}

function objetoAjax()    {
    if (window.XMLHttpRequest)
        _ajax = new XMLHttpRequest();
    else
        if (window.ActiveXObject)
            _ajax = new ActiveXObject("Microsoft.XMLHTTP");
        else
            _ajax = false;
    return _ajax;
}

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

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

Valoración de esta página: (extra.script.mapas_plus) 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