Crear una capa de puntos sobre CartoVisor

Sobre CartoVisor es posible localizar un punto en el mapa e insertar posteriormente un marcador en la posición introducida. Estos puntos se almacenan en un fichero que, o bien está creado previamente, o bien se generará en la ruta y con el nombre que se indique. Previamente debe existir el icono o marcador que se visualizará sobre el mapa.
Habría que incluir el siguiente código en la página web:


<html>


<head>


<title>insert-marker-test</title>


<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">


<script src="http://www.cartociudad.es/VisualizadorCartografico/CartoVisor.js"

type="text/javascript"></script>


</head>


<body>


<table>

<tr>

<td>

<button id="markerbutton" onclick="newMarker();">Nuevo marcador</button>

<button                                                                                                  id="cancelbutton"

onclick="cartovisor.cancelQueryMapPoint();markerbutton.disabled = false;">Cancelar</button>

</td>

</td></td>

</tr>

<tr>

<td id="container"></td>

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

</tr>

</table>

<script type="text/javascript">

var cartovisor;

var markerbutton = document.getElementById('markerbutton');

var cancelbutton = document.getElementById('cancelbutton');

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

var marker_counts = 0;

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 addMarker(data)

{

markerbutton.disabled = false;

cancelbutton.disabled = true;

marker_counts++;

var marker = cartovisor.createMarker({'longitude':data.longitude,

'latitude':data.latitude,

'layername':'marcadores',

'width':15,

'height':23,

'offset_left':-6,

'offset_top':-21,

'url':'./mapmarker.png',

'onClickFunction':marker_OnClick,

'tooltip':'Marcador '+ marker_counts,

'customData':'Información personalizada',

'popup':{'header':'Marcador '+ marker_counts,

'body':'Detalle de Marcador '+ marker_counts,

'width':150,

'height':70}

});

}

function newMarker()

{

markerbutton.disabled = true;

cancelbutton.disabled = false;

cartovisor.queryMapPoint({prompt:'Seleccione ubicació para el nuevo marcador',

callbackFunction:addMarker});

}

function loadFunction()

{

cartovisor.activateLayerSwitcherControl(true);

}

markerbutton.disabled = false;

cancelbutton.disabled = true;

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

longitude:-3.6935,

latitude:40.5308,

zoom:3,

onLoadFunction:loadFunction});

</script>


</body>


</html>

Los parámetros de la función createMarker son los siguientes:

longitude y latitude: (Obligatorios): Coordenadas geográficas del punto donde insertar el marcador (expresadas como tipo float).

layername: (Obligatorio) Nombre de la capa de OpenLayers donde será creado el marcador. Si no existe una capa con ese nombre será creada.

width y height: (Obligatorios) Tamaño en píxeles del marcador.

offset_left y offset_top: (Obligatorios) Desplazamiento en píxeles para colocar la imagen sobre el punto del mapa (valores 0,0 se corresponden con la esquina superior izquierda de la imagen).

url: (Obligatorio) Url de la imagen correspondiente al marcador.

onClickFunction: (Opcional) Si se establece este parámetro, la función JavaScript especificada será llamada cuando el usuario pulse sobre el marcador. Esta función recibirá como parámetro un objeto JavaScript que contiene toda la información relacionada con el mismo.

tooltip: (Opcional) Tooltip (etiqueta emergente) deseado para el marcador.

popup: (Opcional) Datos para popup (mensaje emergente) mostrado al hacer clic sobre el marcador.

displayLayerInLayerSwitcherIfNewLayer: (Opcional) En caso que la capa de nombre indicado por el parámetro layername no exista, esta capa será creada. El parámetro displayLayerInLayerSwitcherIfNewLayer establece si esta capa será mostrada o no en el cuadro de apagar/encender capas.

El fichero con el icono que representa los puntos se llama en este caso "mapmarker", es de tipo .png y se encuentra ubicado en el directorio donde se encuentra el HTML.