logoExtra: script.etiquetando_svg

Descripción: Conjunto de funciones para manipular un mapa de España


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

Etiquetando mapa SVG
El resultado, aunque parece bastante bueno, nos ha movido a estudiar más a fondo el mapa escogido.
// Descripción para sindicación: 
/* 
    [rss]Conjunto de funciones para manipular un mapa de España[/rss] 
*/ 
function objetoAjax()    {
    if (window.XMLHttpRequest)
        _ajax = new XMLHttpRequest();
    else
        if (window.ActiveXObject)
            _ajax = new ActiveXObject("Microsoft.XMLHTTP");
        else
            _ajax = false;
    return _ajax;
}

var resultado = false;
var ancho, alto;
svgns = "http://www.w3.org/2000/svg";

//_colores_ = ["red", "lime", "blue", "green", "aqua"];
_color_ = 0;
_etis_ = [];
_mapa_ = {};
function _obtener_tags_svg_(url, donde) {
    ajax = objetoAjax();
    ajax.open("get", url, true);
    ajax.onreadystatechange = function()    {
        if (ajax.readyState == 4) {
            resultado = ajax.responseXML;

            // elemento raíz

            _svg_ = resultado.getElementsByTagName("svg")[0];
            xmlns = _svg_.getAttribute("xmlns");
            ancho = parseInt(_svg_.getAttribute("width"));
            alto = parseInt(_svg_.getAttribute("height"));
            box = _svg_.getAttribute("viewBox");

            _mapa_.xmlns = xmlns;
            _mapa_.ancho = ancho;
            _mapa_.alto = alto;
            _mapa_.box = box;
            _mapa_.tag = [];

            tag(donde).style.width = ancho + "px";
            tag(donde).style.height = alto + "px";

            _imagen_ = document.createElementNS(svgns, "svg");
            _imagen_.id = "mapa";
            _imagen_.setAttribute("xmlns", xmlns);
            _imagen_.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
            //_imagen_.setAttribute("version", "1.1");
            _imagen_.setAttribute("width", ancho);
            _imagen_.setAttribute("height", alto);
            _imagen_.setAttribute("viewBox", box);

            tag(donde).appendChild(_imagen_);

            _tags_ = resultado.getElementsByTagName("*");
            for (i = 0, total = _tags_.length; i < total; i++)    {
                _id_ = "forma_" + i;

                _shape_ = _tags_[i].tagName.toLowerCase();
                if (_etis_.indexOf(_shape_) == -1)
                    _etis_.push(_tags_[i].tagName);
                switch(_shape_)    {
                    case "polyline":
                    case "polygon":
                        _puntos_ = _tags_[i].getAttributeNS(null, "points");
                        _a_ = document.createElementNS("http://www.w3.org/2000/svg", "a");
                        _figura_ = document.createElementNS(svgns, "polygon");
                        _figura_.setAttributeNS(null, "points", _puntos_);
                        _figura_.setAttributeNS(null, "class", "figura_" + _shape_);
                        _a_.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:title", _shape_);
                        _figura_.id = _id_;
                        _a_.appendChild(_figura_);
                        _imagen_.appendChild(_a_);
                        poner_evento(_figura_, "click", _elegido_)
                        _formar_(i, _shape_);
                        _tag_ = {};
                        _tag_.id = _id_;
                        _tag_.shape = _shape_;
                        _tag_.puntos = _puntos_;
                        _tag_.estilo = "figura";
                        _tag_.nombre = _shape_;
                        _mapa_.tag.push(_tag_);
                    break;

                    case "path":
                        _path_ = _tags_[i].getAttributeNS(null, "d");
                        _a_ = document.createElementNS("http://www.w3.org/2000/svg", "a");
                        _figura_ = document.createElementNS(svgns, "path");
                        _figura_.setAttributeNS(null, "d", _path_);
                        _figura_.setAttributeNS(null, "class", "figura_path");
                        _a_.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:title", _shape_);
                        _figura_.id = _id_;
                        _a_.appendChild(_figura_);
                        _imagen_.appendChild(_a_);
                        poner_evento(_figura_, "click", _elegido_)
                        _formar_(i, _shape_);
                        _tag_ = {};
                        _tag_.id = _id_;
                        _tag_.shape = _shape_;
                        _tag_.puntos = _path_;
                        _tag_.estilo = "figura";
                        _tag_.nombre = _shape_;
                        _mapa_.tag.push(_tag_);
                    break;
                }// switch
            }// for
            tag("nominador").innerHTML = _mapa_.tag[0].nombre;
            _seleccionado_ = _mapa_.tag[0].id;
        }
    }
    ajax.send(null);
}

function _formar_(_i_, forma)    {
    _op_ = document.createElement("option");
    _op_.text = "forma_" + _i_ + " - (" + forma + ")";
    _op_.value = "forma_" + _i_;
    tag("selector").appendChild(_op_);
}

var _seleccionado_ = false;
function _provinciar_()    {
    _seleccionar_(this.value);
}

function _estilar_(estilo)    {
    for (i = 0, ti = _mapa_.tag.length; i < ti; i++)
        if (_mapa_.tag[i].id == _seleccionado_)
            _mapa_.tag[i].estilo = estilo;
}

function _nominar_()    {
    for (i = 0, ti = _mapa_.tag.length; i < ti; i++)
        if (_mapa_.tag[i].id == _seleccionado_)    {
            nombre = _mapa_.tag[i].nombre;
            entrada = prompt("introduzca nuevo nombre", nombre);
            _mapa_.tag[i].nombre = entrada;
            tag("nominador").innerHTML = entrada;
            tag(_seleccionado_).parentNode.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:title", entrada);
        }
}

function _colorear_()    {
    tag(_seleccionado_).setAttributeNS(null, "class", this.value);
    for (i = 0, ti = _mapa_.tag.length; i < ti; i++)
        if (_mapa_.tag[i].id == _seleccionado_){
            _mapa_.tag[i].estilo = this.value;
        }
}

function _seleccionar_(_que_)    {
    _seleccionado_ = _que_;
    for (i = 0, ti = _mapa_.tag.length; i < ti; i++)
        if (_mapa_.tag[i].id == _seleccionado_)    {
            tag("nominador").innerHTML = _mapa_.tag[i].nombre;
            estoy = _mapa_.tag[i].estilo;
            _pon_ = (estoy == "figura") ? tag("estador").value : estoy;
            _mapa_.tag[i].estilo = _pon_;
            tag("estador").value = _pon_;
            tag(_que_).setAttributeNS(null, "class", _pon_);
        }
};

function _mostrar_()    {
    alert(_etis_.join("\n"));
}

function _terminar_(e)    {
    _mapa = "mapa = {\\n";
    for (i in _mapa_)    {
        if (i == "tag")    {
            _mapa += "tag : [" + String.fromCharCode(13);
            for (j = 0, tj = _mapa_[i].length; j < tj; j++)    {
                _mapa += String.fromCharCode(9) + "{" + String.fromCharCode(13);
                for (k in _mapa_[i][j])    {
                    _mapa += String.fromCharCode(9) + "'" + k + "' : '" + _mapa_[i][j][k] + "'," + String.fromCharCode(13);
                }
                _mapa += String.fromCharCode(9) + "}," + String.fromCharCode(13);
            }
            _mapa += "]" + String.fromCharCode(13);
        }
        else    {
            _mapa += "'" + i + "' : '" + _mapa_[i] + "'," + String.fromCharCode(13);
        }
    }
    _mapa+= "};" + String.fromCharCode(13);
    tag("objeto_mapa").innerHTML = unescape(_mapa);
    //tag("todo").style.display ="inline";
    //e.preventDefault();
}

function _zoomear_()    {
    _escala_ = parseInt(this.value);
    tag("mapa").setAttribute("width", ancho * _escala_);
    tag("mapa").setAttribute("height", alto * _escala_);
    tag("el_mapa").style.overflow = (_escala_ == 1) ? "hidden":"auto";
}

function _controlar_()    {
    tag("form_selector").style.visibility = (tag("form_selector").style.visibility == "hidden") ? "visible" : "hidden";
}

function _aprox_()    {
    for (i = 0, ti = mapa.tag.length; i < ti; i++)    {
        _id_ = mapa.tag[i].id;
        _mapa_.tag[i].estilo = mapa.tag[i].estilo;
        _mapa_.tag[i].nombre = mapa.tag[i].nombre;
        tag(_id_).setAttributeNS(null, "class", mapa.tag[i].estilo);
            tag(_id_).parentNode.setAttributeNS("http://www.w3.org/1999/xlink", "xlink:title", mapa.tag[i].nombre);
        if (_seleccionado_ == _id_)    {
            tag("estador").value = mapa.tag[i].estilo;
            tag("nominador").innerHTML = mapa.tag[i].nombre;
        }
    }
}

function _elegido_(){
    tag("selector").value = this.id;
    _seleccionar_(this.id);
}

function _ini_etiquetando_svg_() {
    _obtener_tags_svg_("http://upload.wikimedia.org/wikipedia/commons/3/35/Prov%C3%ADncies_d%27Espanya.svg", "el_mapa");
    poner_evento(tag("selector"), "change", _provinciar_);
    poner_evento(tag("estador"), "change", _colorear_);
    poner_evento(tag("zoom"), "change", _zoomear_);
    poner_evento(tag("ver_etiquetas"), "click", _mostrar_);
    poner_evento(tag("ver_controles"), "click", _controlar_);
    poner_evento(tag("nominador"), "click", _nominar_);
    poner_evento(tag("aprox"), "click", _aprox_);
    poner_evento(tag("form_selector"), "submit", _terminar_);
}

poner_evento(window, "load", _ini_etiquetando_svg_);

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

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

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