Descripción: Conjunto de funciones para manipular un mapa de España
A continuación mostramos los apuntes asociados a este extra:
// 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 76 ocasiones.
Esta extra aún no tiene comentarios.
Valoración de esta página: (extra.script.etiquetando_svg)
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