logoExtra: script.Ceuta_y_Melilla

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

Ceuta y Melilla
Vamos a editar África para conseguir la ubicación de Ceuta y de Melilla en nuestro "Mapa de España".
provincias = [];

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 ordenar_puntos(p, m){
        while (p[0].x != m)    {
            _item = p.shift();
            p.push(_item);
        }
        return p;
    }

    function cadena_puntos(p)    {
        ps = [];
        for (_i = 0, _ti = p.length; _i < _ti; _i++)    ps.push(p[_i].x, p[_i].y)
        return ps;
    }


svgns = "http://www.w3.org/2000/svg";
puntos_africa = [];
objeto_africa = {};
var _color_africa, _puntos_africa;
_menor_x_ = 1000;

function inicio_CyM()    {
    _puntos_africa = document.getElementById("africa").getAttributeNS(null, "points");
    _color_africa = document.getElementById("africa").getAttributeNS(null, "fill");
    _los_puntos = _puntos_africa.split(",");
    while(_los_puntos.length > 1)    {
        _x = _los_puntos.shift();
        if (_x < _menor_x_) _menor_x_ = _x;
        _y = _los_puntos.shift();
        _x_y = {"x": _x, "y": _y};
        puntos_africa.push(_x_y);
        objeto_africa["c_" + _x + "_" + _y] = {"estado" : 0}; 
    }

    puntos_africa = ordenar_puntos(puntos_africa, _menor_x_);
    tag("puntos").innerHTML = cadena_puntos(puntos_africa);
    obtener_provincias("mostrar_provincias");

    nueva = document.createElementNS(svgns, "polygon");
    nueva.setAttributeNS(null, "id", "fondo_africano");
    nueva.setAttributeNS(null, "fill", _color_africa);
    nueva.setAttributeNS(null, "points", _puntos_africa);
    nueva.setAttributeNS(null, "stroke", "black");
    tag("crear_mapa_din").appendChild(nueva);

    nueva = document.createElementNS(svgns, "polygon");
    nueva.setAttributeNS(null, "id", "africa_editable");
    nueva.setAttributeNS(null, "fill", "white");
    nueva.setAttributeNS(null, "points", cadena_puntos(puntos_africa));
    tag("crear_mapa_din").appendChild(nueva);

    // Ceuta
    nueva = document.createElementNS(svgns, "polygon");
    nueva.setAttributeNS(null, "id", "nuevo_Ceuta");
    nueva.setAttributeNS(null, "fill", "lime");
    nueva.setAttributeNS(null, "points", "164,526,163,525,164,525,165,526");
    tag("crear_mapa_din").appendChild(nueva);

    // Melilla
    nueva = document.createElementNS(svgns, "polygon");
    nueva.setAttributeNS(null, "id", "nuevo_Melilla");
    nueva.setAttributeNS(null, "fill", "lime");
    nueva.setAttributeNS(null, "points", "260,559,261,558,262,559,261,560");
    tag("crear_mapa_din").appendChild(nueva);

    for (_i_ = 0, _ti_ = puntos_africa.length; _i_ < _ti_; _i_++)    {
        nueva = document.createElementNS(svgns, "circle");
        nueva.setAttributeNS(null, "id", "xy_" + puntos_africa[_i_].x + "_" + puntos_africa[_i_].y);
        nueva.setAttributeNS(null, "cx", puntos_africa[_i_].x);
        nueva.setAttributeNS(null, "cy", puntos_africa[_i_].y);
        nueva.setAttributeNS(null, "r", .5);
        nueva.setAttributeNS(null, "fill", "red");
        tag("crear_mapa_din").appendChild(nueva);

        refe = document.createElement("span");
        refe.id = "refe_" + puntos_africa[_i_].x + "_" + puntos_africa[_i_].y;
        refe_coor = document.createTextNode("[" + puntos_africa[_i_].x + " x " + puntos_africa[_i_].y + "]");
        refe.appendChild(refe_coor);
        tag("mostrar_puntos").appendChild(refe);
        poner_evento(refe, "click", editar_coor);
        poner_evento(nueva, "click", resaltar_coor);
    }
    poner_evento(tag("zoom"), "change", ampliar_es);
    poner_evento(tag("borrar_seleccion"), "click", borrar_sel);
    poner_evento(tag("seleccion_principio"), "click", sel_prin);
    poner_evento(tag("seleccion_final"), "click", sel_fin);
}

function sel_prin()    {
    terminar = false;
    _indi_ = 0;
    while(!terminar)    {
        _x__y_ = puntos_africa[_indi_];
        _estado_ = objeto_africa["c_" + _x__y_.x + "_" + _x__y_.y];
        if ((_estado_.estado == 1) || (_indi_++ == puntos_africa.length))    {
            terminar = true;
        }
        else    {
            resaltando([_x__y_.x, _x__y_.y]);
        }
    }
}

function sel_fin()    {
    terminar = false;
    _indi_ = puntos_africa.length;
    while(!terminar)    {
        _x__y_ = puntos_africa[--_indi_];
        _estado_ = objeto_africa["c_" + _x__y_.x + "_" + _x__y_.y];
        if ((_estado_.estado == 1) || (_indi_< 0))    {
            terminar = true;
        }
        else    {
            resaltando([_x__y_.x, _x__y_.y]);
        }
    }
}


function borrar_sel()    {
    nuevos_puntos = [];
    nuevos_puntos_africa = [];
    for (_i = 0, _ti = puntos_africa.length; _i < _ti; _i++)    {
        _x__y_ = puntos_africa[_i];
        _puntos_ = [_x__y_.x, _x__y_.y];
        _estado_ = objeto_africa["c_" + _puntos_.join("_")];
        if (_estado_.estado == 1)    {
            _it_ = _puntos_.join("_");
            delete objeto_africa["c_" + _it_];
            tag("mostrar_puntos").removeChild(tag("refe_" + _it_));
            tag("crear_mapa_din").removeChild(tag("xy_" + _it_));
        }
        else    {
            nuevos_puntos.push(_puntos_.join(","));
            nuevos_puntos_africa.push({"x": _puntos_[0], "y": _puntos_[1]});
        }
    }

    tag("africa_editable").setAttributeNS(null, "points", nuevos_puntos.join(","));
    puntos_africa = nuevos_puntos_africa;
    tag("puntos").innerHTML = cadena_puntos(puntos_africa);
}

function resaltando(_coor_)    {//alert(_coor_);
    _o_ = objeto_africa["c_" + _coor_[0] + "_" + _coor_[1]];
    _o_.estado = (_o_.estado == 0) ? 1:0;
    _p_ = tag("xy_" + _coor_[0] + "_" + _coor_[1]);
    _p_.setAttributeNS(null, "fill", (_o_.estado == 1) ? "blue" : "red");
    _p_.setAttributeNS(null, "r", (_o_.estado == 1) ? "1" : ".5");

    _t_ = tag("refe_" + _coor_[0] + "_" + _coor_[1]);
    _t_.style.color = (_o_.estado == 1) ? "red" : "black";
}

function resaltar_coor()    {
    _coor_ = this.id.split("_");
    _fantasma_ = _coor_.shift();
    resaltando(_coor_);

}

function editar_coor()    {//alert(this.id);
    _id_ = this.id.split("_");
    _fantasma_ = _id_.shift();
    _n_id_ = _id_.join(",");
    _n_coor_ = prompt("Coordenada:", _n_id_);
    if (_n_coor_ != _n_id_)    {
        _coletilla_ =_n_coor_.split(",").join("_");
        if (objeto_africa["c_" + _coletilla_] == undefined)    {
            // nuevo span
            nuevo = document.createElement("span");
            nuevo.id = "refe_" + _coletilla_;
            nuevo.appendChild(document.createTextNode("[" + _n_coor_.split(",").join(" x ") + "]"));

            tag("mostrar_puntos").insertBefore(nuevo, tag("refe_" + _id_.join("_")));
            tag("mostrar_puntos").removeChild(tag("refe_" + _id_.join("_")));
            poner_evento(nuevo, "click", editar_coor);
            nuevo.style.color = (objeto_africa["c_" + _id_.join("_")].estado == 1) ? "red" : "black";

            nueva = document.createElementNS(svgns, "circle");
            nueva.setAttributeNS(null, "id", "xy_" + _coletilla_);
            nueva.setAttributeNS(null, "cx", _coletilla_.split("_")[0]);
            nueva.setAttributeNS(null, "cy", _coletilla_.split("_")[1]);

            nueva.setAttributeNS(null, "r", (objeto_africa["c_" + _id_.join("_")].estado == 0) ? ".5" : "1");
            nueva.setAttributeNS(null, "fill", (objeto_africa["c_" + _id_.join("_")].estado == 0) ? "red" : "blue");
            tag("crear_mapa_din").insertBefore(nueva, tag("xy_" + _id_.join("_")));
            tag("crear_mapa_din").removeChild(tag("xy_" + _id_.join("_")));

            poner_evento(nueva, "click", resaltar_coor);
            _estado_ = objeto_africa["c_" + _id_.join("_")].estado;
            for (_i = 0, _ti = puntos_africa.length; _i < _ti; _i++)    {
                if ((puntos_africa[_i].x == _id_[0]) && (puntos_africa[_i].y == _id_[1]))    {
                    _n_x_y_ = _n_coor_.split(",");
                    puntos_africa[_i].x = _n_x_y_[0];
                    puntos_africa[_i].y = _n_x_y_[1];
                }
            }

            delete objeto_africa["c_" + _id_.join("_")];

            objeto_africa["c_" + _coletilla_] = {"estado" : _estado_}; 

            _n_puntos_ = [];
            __v_puntos_ = tag("africa_editable").getAttributeNS(null, "points");

            _v_puntos_ = __v_puntos_.split(",");

            while(_v_puntos_.length > 1) {
                _x_ = _v_puntos_.shift();
                _y_ = _v_puntos_.shift();
                _somos_ = _x_ + "," + _y_;
                if (_n_id_ == _somos_) _n_puntos_.push(_n_coor_)
                else _n_puntos_.push(_somos_);
            }

            tag("africa_editable").setAttributeNS(null, "points", _n_puntos_.join(","));
            tag("puntos").innerHTML = _n_puntos_.join(",");
        }
        else    {
            alert("coordenada existente...")
        }

    }

}

function ampliar_es()    {
    z = parseFloat(this.value);
    tag("editor_es").style.width = (625 * z) + "px"
    tag("editor_es").style.height = (571 * z) + "px"
}

function mostrar_provincias()    {
    for (_i_ = 0, _ti_ = provincias.length; _i_ < _ti_; _i_++)    {
        nueva = document.createElementNS(svgns, "polygon");
        nueva.setAttributeNS(null, "points", provincias[_i_].puntos);
        nueva.setAttributeNS(null, "fill", "lime");
        nueva.setAttributeNS(null, "stroke", "black");
        tag("crear_mapa_din").appendChild(nueva);
    }
}

poner_evento(window, "load", inicio_CyM);

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

Zona de comentarios

Esta extra aún no tiene comentarios.

Evaluación

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