logo El diario de Pepe Molina (Caricatos)

yo

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


Última caricatura

IV Asamblea de la AEC: IV Asamblea General de la Asociación Española de Caricaturistas

IV Asamblea de la AEC

RSS de las imágenes: rss


La Cita

Hemos aprendido a volar como los pájaros, a nadar como los peces; pero no hemos aprendido el sencillo arte de vivir como hermanos

Martin Luther King, Religioso estadounidense (1929-1968).


En esta zona están las páginas personales del autor.


Mis clientes ahora también son mis amigos (aunque les cobre).


En Mis amigos Informáticos hay una pequeña colección de páginas de colegas webmasters..


En Mis amigos artistas podemos encontrar artistas de cualquier índole (dibujantes, pintores, escritores...)


Las recomendaciones que proponemos son de índole variada.


Aquí un cajón de sastre de enlaces.


Nos referencian desde sitios de toda índole.


Puede contribuir a mantener esta página con su donativo.


botón pay-pal

Ceuta y Melilla

emoticón de Caricatos Publicado el día 11 de febrero de 2014
id=132; categorías: Así se hizo, Vicisitudes de un Webmaster, Globalización, Programación

Vamos a editar África para conseguir la ubicación de Ceuta y de Melilla en nuestro "Mapa de España". Con la técnica que vamos a plantear, posiblemente podamos incluso mejorar el mapa que tenemos actualmente, debido a que al poder estudiar cada punto de los polígonos que representan los elementos del mapa (provincias), podremos tal vez eliminar algunas coordenadas intrascendentes o redundantes.

Leyendo coordenadas de un polígono

En otro apunte: SVG: creación dinámica, hemos generado cada provincia basándonos en el listado de puntos que hemos compartido con un ficherito de texto: provincias.txt. Esta labor nos ha enseñado que existen diferencias entre la forma de insertar elementos en una imagen svg y una inserción de otro tipo de nodo o etiqueta html. Evidentemente también habrá alguna diferencia para leer atributos de nodos.

Considerando que el polígono del mapa con las coordenadas que queremos tiene como identificador el valor "africa" (id="africa"), hemos usado el siguiente código:

puntos_africa = [];
function inicio_CyM()	{
	_puntos_africa = document.getElementById("africa").getAttributeNS(null, "points");
	_los_puntos = _puntos_africa.split(",");
	while(_los_puntos.length > 1)	{
		_x = _los_puntos.shift();
		_y = _los_puntos.shift();
		_x_y = {"x": _x, "y": _y};
		puntos_africa.push(_x_y);
	}
};

Teniendo esos puntos en el array, y sabiendo que el mapa tiene un tamaño determinado (625 x 571) vamos a plantear un sistema que permita quitar y/o poner coordenadas.

Planteando nuestro sistema

Teniendo las coordenadas, será necesario que se pueda ampliar la zona para reconocer esos puntos. Para ello usaremos un elemento de bloque html (div), y en su interior la imagen svg, que al tener el atributo viewBox con las características del mapa, bastaría con modificar los valores width y height de la misma.

Para tener una buena referencia duplicaremos África, donde al modificar las coordenadas, podría quedar visible la primera de las versiones insertadas. También mostraremos el resto de las provincias (aunque posiblemente nos valdría solamente la comunidad andaluza). Y por último añadiremos tantos puntos como coordenadas tiene el trozo visible del continente que vamos a editar, para esa labor usaremos círculos.

	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);
	}

Nótese que el radio de los puntos es ".5", así el diámetro será "1", y queda dentro de la línea que hemos definido de color negro.

Controles necesarios

Uno de los controles más importantes será el que nos permita ampliar nuestra imagen. La idea es usar códigos sencillos y eficaces.

En principio pondremos el Mapa de España dentro de una capa con sus mismas dimensiones, y para aplicar una ampliación tan solo modificaremos las dimensiones de la imagen, y la parte visible quedará con barras de desplazamiento que se generan al no caber la imagen dentro de su contenedor. Programaremos un control "select" para que al ser modificado se calculen las dimensiones (ancho x alto), y se apliquen en la imagen.

También necesitaremos un sistema de selección de los puntos para detectar si debemos modificarlos y eliminarlos, y los consiguientes controles de borrado y edición.

:
:

Hemos simplificado los controles para delimitar con facilidad las ciudades motivo de este aapunte.

Paso a paso

Para seleccionar las distintas coordenadas basta con pulsar sobre la referencia circular que vemos en el mapa. Pero para distinguirlas mejor es conveniente ampliar el mapa, hemos creído innecesario ampliaciones superiores a diez (10).

Cuando se selecciona una coordenada, la representación en el mapa se agranda a la vez que cambia de color tanto esa representación como el elemento correspondiente de la lista de coordenadas.

Veamos ahora el primero de nuestros controles: "Borrar puntos seleccionados". Su leyenda es bastante descriptiva y creo innecesario dar más explicaciones. Pero si seleccionamos uno a uno nos resultaría una labor muy ardua, por lo que hemos puesto los siguientes botones.

Luego de seleccionar las coordenadas anterior y posterior más adecuadas, pulsamos cada uno de los botones de selección, y pulsamos el que elimina las coordenadas seleccionadas, dejando acotada la ciudad que hayamos elegido generar.

Si alguna de esas coordenadas no nos convence podemos editar su valor, pulsando sobre la misma en la lista de coordenadas. Destacamos que los valores pueden ser enteros o con decimales.

Zona de comentarios

Este apunte aún no tiene comentarios.

Evaluación

Valoración de esta página: (apunte.132) valor

Valoración evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar evaluar

Respuesta: Zona de mensajes (proceso de evaluación)

Historial de navegación

Esta página ha sido visitada en 8516 ocasiones


Disponemos de rss sindicar

Y del Mapa del sitio, además del sitemap.xml.


Aquí podemos encontrar los apuntes más visitados.

"Top 10" reemplaza a la sección Últimos apuntes.


Una buena forma de buscar un apunte es a partir de su categoría.


También es posible buscar apuntes por medio de las etiquetas (tags).


Hemos decidido poner al alcance de todos algunos comodines.

Adjuntamos una versión reducida del "buscador interno" que vemos en la lista anterior:

Buscar en apuntes

También estamos recopilando antiguas páginas del sitio.


Desde este recuadro se puede hacer una búsqueda cronológica.


Se puede crear una postal nueva desde el enlace del sector "Otras páginas del dominio", o editar la que sale en el recuadro, pulsando sobre ella..

http://www.pepemolina.com/postales/Fondos/FONDO010.gif
http://www.pepemolina.com/postales/Navidad/TgC_Navidad_31.gif
http://www.pepemolina.com/postales/Navidad/snow_anm.gif
http://www.pepemolina.com/postales/Navidad/xmastree2.gif
enlace a la postal
Copyright © 2002-2024 www.pepemolina.com
RSS rss | Ver Mapa del sitio