Añadir puntos de interés a partir de archivo de texto

Se pueden añadir puntos de interés a CartoVisor procedentes de un archivo de texto. Es necesario que el listado de puntos esté en un fichero de texto plano con columnas separadas por tabulaciones y que contenga los siguientes campos:

lat lon title description iconSize icosOffset icon
10 20 titulo1 descripcion1 21,25 -10.-25 ./marker.png
20 30 titulo2 descripcion2 21,25 -10.-25 ./marker.png

lat: Latitud geográfica del punto.

lon: Longitud geográfica del punto.

title: Título del cuadro informativo que se muestra al pulsar sobre el marcador.

description: Contenido del cuadro informativo que se muestra al pulsar sobre el marcador.

iconSize: (width,height) Tamaño de la imagen que se utilizará para mostrar el marcador.

iconOffset: (left,top) Desplazamiento de la imagen para centrarla en el punto.

icon: Imagen que se utilizará para mostrar el marcador (./ representa el directorio raíz donde se encuentra el HTML).


Aquí se puede ver un ejemplo del archivo de puntos de interés.

Una vez creado el fichero de texto y el símbolo con el que se representará el punto de interés (que en el ejemplo anterior es un fichero de tipo .png llamado "marker" y que se encuentra en el mismo directorio que el fichero HTML), hay que incluir el siguiente código fuente en la página web en la que se quiera agregar CartoVisor con esta capa de puntos:


<html>


<head>


<title>txt-test</title>


<script src="http://www.cartociudad.es/VisualizadorCartografico/CartoVisor.js" type="text/javascript"></script>


</head>


<body>


<table>

<tr>

<td id="map_container"></td>

<td id="information"></td>

</tr>

</table>

<div id="map_container"></div>

<script type="text/javascript">

var cartovisor;

var information_area = document.getElementById('information');

function marker_OnClick(data)

{

var detailHtml = '<p>';

detailHtml += '<b>' + data.popup.header + '</b><br/>';

detailHtml += data.popup.body + '<br/><br/>';

for (var key in data)

if (key != 'onClickFunction')

detailHtml += key + " : " + data[key] + "<br/>";

detailHtml += '</p>';

information_area.innerHTML = detailHtml;

}

function loadTxtLayer()

{

var map = cartovisor.getOpenLayersMap();

var newl = new OpenLayers.Layer.CartovisorText( "text",

{location: "./textfile.txt",

popupSize: new OpenLayers.Size(150,70),

onClickFunction:marker_OnClick});

map.addLayer(newl);

cartovisor.setZoom(-3.790,40.462,5);

}

cartovisor = new CartoVisor({elementId:'map_container',

longitude:-4.21571,

latitude:40.307,

zoom:6,

onLoadFunction:loadTxtLayer});

</script>


</body>


</html>


El código marcado es el constructor de la capa de texto. El nombre de la capa "text" y su ubicación "./textfile.txt" (el fichero de texto se llama "textfile.txt" y se encuentra en el mismo directorio que el fichero HTML). La opción popupSize establece el tamaño del cuadro informativo que se muestra al pulsar sobre el marcador.