logoExtra: script.mapa_hispano_svg_ll

Descripción: Herramientas para actualizar nuestro mapa de España.


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

Mapa de España SVG II: Herramientas
Hemos retocado nuestra herramienta para nuestras nuevas pretenciones.
// Descripción para sindicación:
/*
    [rss]Herramientas para actualizar nuestro mapa de España.[/rss]
*/

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

_colores_ = ["transparent", "red", "lime", "blue", "green", "aqua", "pink"];
_color_ = 0;

_mapa_ = {};
_box_ = "";

function insertAfter(dato, elemento) {
    with(elemento.parentNode)
        (lastChild == elemento) ? appendChild(dato) : insertBefore(dato, elemento.nextSibling);
}

function vb_polygon(puntos)    {
    _puntos_ = puntos.trim().split(" ");
    _mapa_["zonas"][_id_]["poligonos"].push(_puntos_.join(" "));
    _p_ = _puntos_.pop();
    _coor_ = _p_.split(",");
    minx = maxx = parseFloat(_coor_[0]);
    miny = maxy = parseFloat(_coor_[1]);

    while(_puntos_.length > 0)    {
        _coor_ = _puntos_.shift().split(",");
        x = parseFloat(_coor_[0]);
        y = parseFloat(_coor_[1]);
        if (x < minx) minx = x;
        if (x > maxx) maxx = x;
        if (y < miny) miny = y;
        if (y > maxy) maxy = y;
    }
    _vb_ = (minx - 2) + " " + (miny - 2) + " " + (maxx - minx + 4) + " " + (maxy - miny + 4);
    return _vb_;
}

function vb_path(camino)    {
    _d_ = camino.trim();
    _ds_ = _d_.split(" z M ");
    _t_ = _ds_.length;
    _mapa_["zonas"][_id_]["poligonos"] = [];
    _pol_ = _mapa_["zonas"][_id_]["poligonos"];
    reem = /[M|z]/;
    prime = true;

    for (k = 0, total = _ds_.length; k < total; k++)    {
        _poly_ = [];
        _d_ = _ds_[k].replace(reem, "").trim();
        _di_ = _d_.split(" ");

        //alert("editar path_polygon para zoom\npolígono " + k + "\n" + _d_);
        while (_di_.length > 0)    {
            _i_ = _di_.shift();
            _par_ = _i_.split(",");
            switch(_par_.length)    {
                case 1:
                    if (!isNaN(_par_))    {
                        x = _par_;
                        y = _di_.shift();
                        if (!prime)    {
                            if (x < minx)    minx = x;
                            if (x > maxx)    maxx = x;
                            if (y < miny)    miny = y;
                            if (y > maxy)    maxy = y;
                        }
                        if (prime)    {
                            minx = maxx = x;
                            miny = maxy = y;
                            prime = false;
                        }
                        _poly_.push(x, y);

                    }
                break;
                case 2:
                    x = parseFloat(_par_[0]);
                    y = parseFloat(_par_[1]);
                    if (prime)    {
                        minx = maxx = x;
                        miny = maxy = y;
                        prime = false;
                    }
                    else    {
                        _poly_.push(_i_);
                        if (x < minx)    minx = x;
                        if (x > maxx)    maxx = x;
                        if (y < miny)    miny = y;
                        if (y > maxy)    maxy = y;
                    }
                break;
            }//switch
        }//while
        _pol_[_pol_.length] = _poly_.join(" ");
        //_mapa_["zonas"][_id_]["poligonos"].push(_poly_.join(" "));
    }//for
    _vb_ = (minx - 2) + " " + (miny - 2) + " " + (maxx - minx + 4) + " " + (maxy - miny + 4);
    return _vb_;
}

function desguace(_el_)    {
    _tag_ = _el_.tagName;
    _id_ = _el_.getAttributeNS(null, "id");
    _figura_ = document.createElementNS(svgns, _tag_);
    _mapa_["zonas"][_id_] = {};
    _mapa_["zonas"][_id_]["nombre"] = _id_;
    _mapa_["zonas"][_id_]["tag"] = _tag_;

    _mapa_["zonas"][_id_]["poligonos"] = [];
    for (j = 0, totalj = _el_.attributes.length; j < totalj; j++) {
        _atr_ = _el_.attributes[j].name;
        _val_ = _el_.attributes[j].value;
        _mapa_["zonas"][_id_][_atr_] = _val_;
        if (["id", "d", "points", "stroke", "stroke-width"].indexOf(_atr_) != -1)
            _figura_.setAttributeNS(null, _atr_, _val_);
        if (_atr_ == "style")    {
            _sts_ = _val_.split(";");
            for (k = 0, totalk = _sts_.length; k < totalk; k++)    {
                _st_ = _sts_[k];
                _par_ = _st_.split(":");
                if (_par_[0] == "fill")    {
                    _color_ = _par_[1];
                    sumar_color(_color_);
                }
                switch(_par_[0])    {
                    case "fill":
                    case "stroke":
                    case "stroke-linecap":
                    case "stroke-miterlimit":
                    case "stroke-width":
                        //_figura_.setAttributeNS(null, estilizar(_par_[0]), _par_[1]);
                        _figura_.setAttribute(_par_[0], _par_[1]);
                    break;
                }
            }// for k
        }// if
    }// for j
    _imagen_.appendChild(_figura_);
    _op_ = document.createElement("option");
    _op_.id = "op_" + _id_;
    _op_.value = _id_;
    _op_.text = _id_;
    tag("el_id").appendChild(_op_);
    poner_evento(tag(_id_), "click", editar_id);
    poner_evento(tag(_id_), "dblclick", click_zoom);
}

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];
            for (i = 0, total = _svg_.attributes.length; i < total; i++){
                _mapa_[_svg_.attributes[i].name] = _svg_.attributes[i].value;
            }
            _mapa_["zonas"] = {};

            xmlns = _svg_.getAttribute("xmlns");
            ancho = _svg_.getAttribute("width");
            alto = _svg_.getAttribute("height");
            _box_ = _svg_.getAttribute("viewBox");

            _imagen_ = document.createElementNS(svgns, "svg");
            _imagen_.setAttribute("id", "hispania");
            _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_);
            _imagen_.setAttribute("preserveAspectRatio", "xMidYMid meet");
            _imagen_.style.border = "1px solid black";

            tag(donde).appendChild(_imagen_);

            _tags_ = resultado.getElementsByTagName("*");
            for (i = 0, total = _tags_.length; i < total; i++)    {
                switch(_tags_[i].tagName.toLowerCase())    {
                    case "polyline":
                    case "path":
                    case "polygon":
                        desguace(_tags_[i]);
                    break;
                }// switch
            }// for
//
            for (i in _mapa_["zonas"])    {
                _id_ = _mapa_["zonas"][i].id;
                _tag_ = _mapa_["zonas"][i].tag;
                switch(_tag_)    {
                    case "polyline":
                        polyline_polygon(_id_);
                        _mapa_["zonas"][_id_]["vb"] = vb_polygon(_mapa_["zonas"][_id_]["points"]);
                    break;
                    case "path": //path_polygon(_id_);
                        _mapa_["zonas"][_id_]["vb"] = vb_path(_mapa_["zonas"][_id_]["d"]);
                    break;
                    case "polygon":
                        _mapa_["zonas"][_id_]["vb"] = vb_polygon(_mapa_["zonas"][_id_]["points"]);
                    break;
                }// switch
            }
//
            for (i = 0, total = _colores_.length; i < total; i++) {
                _op_ = document.createElement("option");
                _op_.value = _colores_[i];
                _op_.text = _colores_[i];
                tag("el_color").appendChild(_op_);
            }
            tag("el_color").value = _color_; //alert(_color_);
            mostrar_original(_id_);
            actualizarPestas();
            poner_evento(tag("estilos"), "change", actualizarPestas);
        }// if (ajax.readyState == 4)
    }
    ajax.send(null);
}

function actualizarPestas()    {
    tag("img_svg").innerHTML = imagenSVG();
    tag("codigo_svg").value = imagenSVG();
}

function estilizar(cadena)    {
    function mayus(letra)    {
        return letra[1].toUpperCase();
    }
    return cadena.replace(/-[a-z]/, mayus); 
}

function idzar(cadena){
    txt = cadena;
    for (mala = 0, ts = malos.length; mala < ts; mala++)
        txt = txt.split(malos[mala]).join(buenos[mala]);
    return txt;
}

malos = "ÁáÉéÍíÓóÚúÑñ ";
buenos = "AaEeIiOoUuNn_";

function _iniciando_() {
    tag("copia").style.margin = "1em";
    tag("copia").style.textAlign = "center";
    poner_evento(tag("apertura"), "click", _obtener_svg_);
    poner_evento(tag("el_color"), "change", _cambiar_color_);
    poner_evento(tag("el_id"), "change", _cambiar_el_);
    poner_evento(tag("el_nombre"), "change", _cambiar_nombre_);
    poner_evento(tag("cambiar_nombre"), "click", _c_nombre_);
    poner_evento(tag("poligonear"), "click", poligoneo);
    poner_evento(tag("zoomear"), "click", boton_zoom);
    poner_evento(tag("linea"), "change", linear);
}

function _cambiar_nombre_()    {
    tag("cambiar_nombre").disabled = false;
}

function _c_nombre_()    {
    _id_ = tag("el_id").value;
    _nombre_ = tag("el_nombre").value;
    _ops_ = tag("el_id").options;
    _ops_[_ops_.selectedIndex].text = _nombre_;

    _mapa_["zonas"][_id_]["nombre"] = _nombre_;

    _dato_ = "";
    for (i in _mapa_["zonas"][_id_]) {
        if (_sin_.indexOf(i) == -1)
            _dato_ += i + " = " + _mapa_["zonas"][_id_][i] + '\\n';
    }
    tag("datos").innerHTML = _dato_;

    tag("cambiar_nombre").disabled = true;
    actualizarPestas();
}

function _obtener_svg_()    {
    while (tag("copia").hasChildNodes()) tag("copia").removeChild(tag("copia").firstChild);
    _obtener_tags_svg_(tag("imagen").value, "copia");
    tag("zoomear").disabled = false;
}

_sin_ = ["poligonos", "points", "d"];
_poligonados_ = [];

function mostrar_original(_id_)    {
    tag("el_id").value = _id_;
    tag("el_nombre").value = _mapa_["zonas"][_id_]["nombre"];
    _tag_ = tag(_id_).tagName;
    tag("el_tag").innerHTML = _tag_;
    tag("el_color").value = tag(_id_).getAttributeNS(null, "fill");
    //_dato_ = encodeURIComponent("+") + "\n";
    _dato_ = "";
    for (i in _mapa_["zonas"][_id_])    {
        if (_sin_.indexOf(i) == -1)
            _dato_ += i + " = " + _mapa_["zonas"][_id_][i] + '\\n';
    }
    tag("datos").innerHTML = _dato_;
    tag("linea").checked = (tag(_id_).getAttributeNS(null, "stroke-width") != "0");
    tag("poligonear").disabled = ((_tag_ == "polygon") || (_poligonados_.indexOf(_id_) != -1));
}

function linear()    {
    _id_ = tag("el_id").value;
    _l_ = tag(_id_).getAttribute("stroke-width");
    if (_l_ == "0")    {
        _est_ = _mapa_["zonas"][_id_]["style"].split(";");
        _sw_ = "";
        for (i = 0, total = _est_.length; i < total; i ++)    {
            _par_ = _est_[i].split(":");
            if (_par_[0] == "stroke-width") _sw_ = _par_[1]

        }
        if (_sw_ != "")
            tag(_id_).setAttribute("stroke-width", _sw_);
    }
    else
        tag(_id_).setAttribute("stroke-width", "0");
}

function editar_id()    {
    _id_ = this.id;
    mostrar_original(_id_);
}

function _cambiar_color_()    {
    tag(tag("el_id").value).setAttributeNS(null, "fill", this.value);
}

function _cambiar_el_()    {
    _id_ = this.value;
    mostrar_original(_id_);
    tag("el_color").value = tag(this.value).getAttributeNS(null, "fill");
    _leer_vb_ =  tag("hispania").getAttribute("viewBox");
    if (_leer_vb_ != _box_)
        tag("hispania").setAttribute("viewBox", _mapa_["zonas"][_id_]["vb"]);
}

function sumar_color(cual)    {
    if (_colores_.indexOf(cual) == -1) _colores_.push(cual);
}

poner_evento(window, "load", _iniciando_);

function path_polygon(_id_)    {
    prime = true;
    _polig_ = true; // poligonable
    _polig_plus_ = true;// multi poligonable
    reem = /[M|z]/;
    _soy_ = tag(_id_);
    _d_ = _soy_.getAttributeNS(null, "d").trim();
    _ds_ = _d_.split(" z M ");
    _t_ = _ds_.length;
    _polig_plus_ = _t_ > 1;
    _mapa_["zonas"][_id_]["poligonos"] = [];

    for (k = 0, total = _ds_.length; k < total; k++)    {
        _poly_ = [];
        _d_ = _ds_[k].replace(reem, "").trim();
        _di_ = _d_.split(" ");

        while (_di_.length > 0)    {
            _i_ = _di_.shift();
            _par_ = _i_.split(",");
            switch(_par_.length)    {
                case 1:
                    _polig_ = _polig_ && (_par_ == "L");
                    if (!isNaN(_par_))    {
                        x = _par_;
                        y = _di_.shift();
                        if (prime)    {
                            minx = maxx = x;
                            miny = maxy = y;
                            prime = false;
                        }
                        else    {
                            _poly_.push(_i_);
                            if (x < minx)    minx = x;
                            if (x > maxx)    maxx = x;
                            if (y < miny)    miny = y;
                            if (y > maxy)    maxy = y;
                        }
                    }
                break;
                case 2:
                    x = parseFloat(_par_[0]);
                    y = parseFloat(_par_[1]);
                    if (prime)    {
                        minx = maxx = x;
                        miny = maxy = y;
                        prime = false;
                    }
                    else    {
                        _poly_.push(_i_);
                        if (x < minx)    minx = x;
                        if (x > maxx)    maxx = x;
                        if (y < miny)    miny = y;
                        if (y > maxy)    maxy = y;
                    }
                break;
            }//switch
        }//while
    }//for
    _vb_ = (minx - 2) + " " + (miny - 2) + " " + (maxx - minx + 4) + " " + (maxy - miny + 4);
    _mapa_["zonas"][_id_]["vb"] = _vb_;
}

function polyline_polygon(_id_)    {
    _soy_ = tag(_id_);
    _ps_ = tag(_id_).getAttributeNS(null, "points").split(" ");
    if (_ps_[0] == _ps_[_ps_.length - 1]) _fantasma_ = _ps_.pop();
    _figura_ = document.createElementNS(svgns, "polygon");

    for (j = 0, totalj = _soy_.attributes.length; j < totalj; j++) {
        _atr_ = _soy_.attributes[j].name;
        _val_ = _soy_.attributes[j].value;
        if (_atr_ == "points")
            _figura_.setAttributeNS(null, "points", _ps_.join(" "))
        else
            _figura_.setAttributeNS(null, _atr_, _val_);
    }
    _soy_.parentNode.replaceChild(_figura_, _soy_);
    poner_evento(_figura_, "click", editar_id);
    poner_evento(_figura_, "dblclick", click_zoom);
    tag("el_tag").innerHTML = "polygon";
    tag("poligonear").disabled = true;
}

function boton_zoom(){
    _id_ = tag("el_id").value;
    zoomeo(_id_)
}

function click_zoom(){
    _id_ = this.id;
    zoomeo(_id_);
}

function zoomeo(_id_)    {
    vb = _mapa_["zonas"][_id_]["vb"];
    _vb_ = vb;

    _leer_vb_ =  tag("hispania").getAttribute("viewBox");
    if (_leer_vb_ == _vb_)
        tag("hispania").setAttribute("viewBox", _box_);
    else
        tag("hispania").setAttribute("viewBox", _vb_);
}

function poligoneo()    {

    function viewB(p)    {
        puntos = _ps_[i].split(" ");
        ps = puntos.shift();
        _par_ = ps.split(",");
        if (_par_.length == 1)    {
            x = minx = maxx = parseFloat(ps);
            y = miny = maxy = parseFloat(puntos.shift());
        }
        else    {
            x = minx = maxx = parseFloat(_par_[0]);
            y = miny = maxy = parseFloat(_par_[1]);
        }
        while (puntos.length > 0)    {
            ps = puntos.shift();
            _par_ = ps.split(",");
            x = parseFloat(_par_[0]);
            if (_par_.length == 1)    {
                x = parseFloat(ps);
                y = parseFloat(puntos.shift())
            }
            else    {
                x = parseFloat(_par_[0]);
                y = parseFloat(_par_[1]);
            }
            if (x < minx) minx = x;
            if (x > maxx) maxx = x;
            if (y < miny) miny = y;
            if (y > maxy) maxy = y;
        }
        vb = (minx - 2) + " " + (miny - 2) + " " + (maxx - minx + 4) + " " + (maxy - miny + 4);
        return vb;
    }

    _soy_ = _actual_ = tag("el_id").value;
    _text_ = tag("el_id").options[tag("el_id").selectedIndex].text;

    _poligonados_.push(_soy_);
    tag("poligonear").disabled = true;

    _tag_ = tag(_soy_).tagName;
    _op_ = tag("op_" + _soy_);
    if (_tag_ == "polygon")
        alert("estamos con un polígono")
    else    {
        _atrs_ = tag(_soy_).attributes;
        _ps_ = _mapa_["zonas"][_soy_]["poligonos"];
        for (i = 0, total = _ps_.length; i < total; i++)    {
            _figura_ = document.createElementNS(svgns, "polygon");
            _id_ = _soy_ + "_" + i;
            _figura_.setAttributeNS(null, "id", _id_);
            poner_evento(_figura_, "click", editar_id);
            poner_evento(_figura_, "dblclick", click_zoom);
            _mapa_["zonas"][_id_] = {};
            _mapa_["zonas"][_id_]["id"] = _id_;
            _mapa_["zonas"][_id_]["nombre"] = _id_;
            _mapa_["zonas"][_id_]["tag"] = "polygon";
            _mapa_["zonas"][_id_]["poligonos"] = [];

            for (j = 0, totalj = _atrs_.length; j < totalj; j++) {
                _atr_ = _atrs_[j].name;
                _val_ = _atrs_[j].value;
                switch(_atr_)    {
                    case "d":
                    //case "points":
                        //_mapa_["zonas"][_id_]["poligonos"].push(_ps_[i]);
                        _mapa_["zonas"][_id_]["poligonos"][i] = _ps_[i];
                        _figura_.setAttribute("points", _ps_[i]);
                        vb = viewB(_ps_[i]);
                        _mapa_["zonas"][_id_]["vb"] = vb;
                    break;

                    case "id":
                        //_figura_.setAttributeNS(null, _atr_, _id_);
                    break;

                    default:
                        _mapa_["zonas"][_id_][_atr_] = _val_;
                        _figura_.setAttributeNS(null, _atr_, _val_);
                    //break;
                }
            }
            insertAfter(_figura_, tag(_actual_));
            _actual_ = _id_;
            _opt_ = document.createElement("option");
            _opt_.value = _id_;
            _opt_.text = _text_ + "_" + i;
            _opt_id = "op_" + _id_;
            insertAfter(_opt_, _op_);
            _op_ = _opt_;            
        }
    }
    actualizarPestas();
}

function imagenSVG()    {
    vals_ = _box_.split(" ");
    hei_ = vals_.pop();
    wid_ = vals_.pop();
    texto = "<svg viewbox='" + _box_ + "' width='" + wid_ + "' height='" + hei_ + "' ";
    texto += "xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' version='1.1'>\\n";
    texto += "<style type='text/css'>\\n";
    texto += tag("estilos").value;

    texto += "</style>\\n";
    for (i = 0, tags_ = tag("hispania").childNodes, total = tags_.length; i < total; i++)    {
        _tag_ = tags_[i].tagName;
        _id_ = tags_[i].id;

        _n_ = _mapa_["zonas"][_id_]["nombre"];
        switch(_id_)    {
            case "polygon852":
                _cl_ = "marco";
            break;
            case "polygon8":
                _cl_ = "marco_canario";
            break;
            case "path7705":
                _cl_ = "linde_canario";
            break;
            case "path778":
                _cl_ = "nada";
            break;
            case "polygon6":
                _cl_ = "marco agua";
            break;
            case "path774":
            case "path772":
            case "path762":
                _cl_ = "exterior";
            break;
            default:
                _cl_ = "provincia";
        }

        //if ((_id_ != _n_) && (_cl_ == "provincia"))
        if (_id_ != _n_)// && (_cl_ == "provincia"))
            texto += "<a xlink:title='" + _n_ + "'>\\n\\t";
            //texto += "<a xlink:title='" + _n_ + "' xlink:href='info.php?provincia=" + encodeURI(_n_) + "'>\\n";
        texto += "<" + _tag_ + " id='";    
        texto += idzar(_n_) + "' class='" + _cl_;
        if (_tag_ == "path")
            texto += "' d='" + _mapa_["zonas"][_id_]["d"] + "' />\\n"
        else    {
            if (_id_.indexOf("_") == -1)
                texto += "' points='" + _mapa_["zonas"][_id_]["points"] + "'/>\\n";
            else    {
                _pareja_ = _id_.split("_");
                _indice_ = parseInt(_pareja_[1]);
                texto += "' points='" + _mapa_["zonas"][_id_]["poligonos"][_indice_] + "'/>\\n";
            }
        }
        if (_id_ != _n_)
            texto += "</a>\\n";
    }
    texto += "</svg>";
    return texto;
}

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

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

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