Descripción: Herramientas para actualizar nuestro mapa de España.
A continuación mostramos los apuntes asociados a este extra:
// 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 106 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.mapa_hispano_svg_ll)
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