En esta guía, veremos como podemos hacer uso del evento clic del mouse para poder agregar marcadores a nuestro mapa, los marcadores no son mas que unas pequeñas imágenes que aparecen en el mapa indicándonos que hay se encuentra algo, un ejemplo muy claro lo pueden ver en la siguiente imagen.
Para este caso se ha creado un archivo llamado OpenLayers_marcadores.js, que tendrá una función encargada de crear los marcadores.
//Variable para determinar el tamaño de los popup
AtoSizeAnchoredMinSize = OpenLayers.Class(OpenLayers.Popup.Anchored, {
'autoSize': true,
'minSize': new OpenLayers.Size(400,400)
});
//Se encarga de agregar un marcador en la posicion dada
/**
Longitud: Longitud en el mapa
Latitud: Latitud en el mapa
MensajeHtml: Codigo html que se mostrara en el popup
*/
function agregarMarcador(longitud,latitud,mensajeHtml,closeBox,overflow)
{
ll = new OpenLayers.LonLat(longitud,latitud);
var popupClass = AutoSizeAnchoredMinSize;
var popupContentHTML = mensajeHtml;
var feature = new OpenLayers.Feature(markers, ll);
feature.closeBox = closeBox;
feature.popupClass = popupClass;
feature.data.popupContentHTML = popupContentHTML;
feature.data.overflow = (overflow) ? "auto" : "hidden";
var marker = feature.createMarker();
var markerClick = function (evt) {
if (this.popup == null)
{
this.popup = this.createPopup(this.closeBox);
mapa.addPopup(this.popup);
this.popup.show();
} else {
this.popup.toggle();
}
currentPopup = this.popup;
OpenLayers.Event.stop(evt);
};
marker.events.register("mousedown", feature, markerClick);
markers.addMarker(marker);
}
Dicha clase tiene una función principal que se llama agregarMarcador, esta funcion recibe 5 parametros, pero de los cuales solo 3 son necesarios:
- Longitud: Longitud en el mapa
- Latitud: Latitud en el mapa
- MensajeHtml: Codigo html que se mostrara en el popup
Aparte de lo anterior se ha modificado el archivo OpenLayes_base.js
var mapa,capa,controls,markers;
var centerWGS84, centerOSM;
var projWGS84, projSphericalMercator;
var activarMensaje=0,activarMarcadores=0;
function iniciar()
{
//Para tener coordenadas estandar
projWGS84 = new OpenLayers.Projection("EPSG:4326");
projSphericalMercator = new OpenLayers.Projection("EPSG:900913");
//Centrar el mapa en el punto dado
centerWGS84=new OpenLayers.LonLat(-74.061674,4.661464);
//Transformar coordenadas anteriores
centerOSM = transformToSphericalMercator(centerWGS84);
//Creacion del mapa
mapa=new OpenLayers.Map("mapa");
//Creacion de capas
capa=new OpenLayers.Layer.OSM("Capa OSM");
markers= new OpenLayers.Layer.Markers( "Marcadores" );
//Adicion de capas al mapa
mapa.addLayer(capa);
mapa.addLayer(markers);
//Centro el mapa en la posicion dada
mapa.setCenter(centerOSM, 15);
//Adicion de controles al mapa
//Evento para el movimiento del mouse
mapa.events.register("mousemove", mapa, mouseMoveHandler);
//Control para el click del mouse en el mapa
var click = new OpenLayers.Control.Click();
mapa.addControl(click);
click.activate();
mapa.addControl(new OpenLayers.Control.LayerSwitcher());
}
//Funcion que registrar el movimiento del mouse
function mouseMoveHandler(e)
{
var position = this.events.getMousePosition(e);
var lonlat = mapa.getLonLatFromPixel(position);
//Tras obtener las coordenadas, podemos hacer lo que deseemos
$("#coordenadas").attr('value','Evento MouseMove: '+transformMouseCoords(lonlat));
}
function transformMouseCoords(lonlat)
{
var newlonlat=transformToWGS84(lonlat);
var x = Math.round(newlonlat.lon*10000)/10000;
var y = Math.round(newlonlat.lat*10000)/10000;
newlonlat = new OpenLayers.LonLat(x,y);
return newlonlat;
}
function transformToWGS84( sphMercatorCoords)
{
// Transforma desde SphericalMercator a WGS84
// Devuelve un OpenLayers.LonLat con el pto transformado
var clon = sphMercatorCoords.clone(); // Si no uso un clon me transforma el punto original
var pointWGS84= clon.transform(
new OpenLayers.Projection("EPSG:900913"), // to Spherical Mercator Projection;
new OpenLayers.Projection("EPSG:4326")); // transform from WGS 1984
return pointWGS84;
}
function transformToSphericalMercator( wgs84LonLat)
{
// Transforma desde SphericalMercator a WGS84
// Devuelve un OpenLayers.LonLat con el pto transformado
var clon = wgs84LonLat.clone(); // Si no uso un clon me transforma el punto original
var pointSphMerc= clon.transform(
new OpenLayers.Projection("EPSG:4326"), // transform from WGS 1984
new OpenLayers.Projection("EPSG:900913")); // to Spherical Mercator Projection;
return pointSphMerc;
}
//Es un evento que se activa cuando se da clic sobre el mapa
OpenLayers.Control.Click = OpenLayers.Class(OpenLayers.Control,
{
defaultHandlerOptions:
{
'single': true,
'double': false,
'pixelTolerance': 0,
'stopSingle': false,
'stopDouble': false
},
initialize: function(options)
{
this.handlerOptions = OpenLayers.Util.extend({}, this.defaultHandlerOptions);
OpenLayers.Control.prototype.initialize.apply(this, arguments);
this.handler = new OpenLayers.Handler.Click(this,{'click': this.trigger}, this.handlerOptions);
},
trigger: function(e)
{
//Convierto la posicion del mouse, a coordenadas
var lonlat = mapa.getLonLatFromPixel(e.xy);
//Luego de obtener las coordenadas, podemos hacer lo que deseemos, en este caso, para mantener la compatibilidad con los ejemplos anteriores, se crea variables para saber que hacer al momento de dar un click, si se muestra un mensaje o se agrega un marcador
if(activarMensaje==1){
alert("Evento MouseClick: "+transformMouseCoords(lonlat));
}
//INICIO AGREGAR MARCADORES
if(activarMarcadores==1)
{
var htmlStr='<div style="height: 200px; width: 400px; border: 1px solid black;"> Titulo</br> Contenido, puedo digitar lo que desee y lo mejor es que puede ser codigo html, asi que podemos colocar imagenes, fondos, links, etc </div>';
//Esta funcion se encuentra en el archivo OpenLayers_marcadores
agregarMarcador(lonlat.lon,lonlat.lat,htmlStr,true,true);
}
//FIN AGREGAR MARCADORES
}
});
Dicho archivo, ya había sido usado en las guías anteriores, por ende solo se explicaran las modificaciones (si no entiendes algo, puedes probar ir a los
tutoriales anteriores y ver la información necesaria).
- Se creo una nueva variable llamada markers, que se una capa que contendrá los marcadores
var markers;
markers= new OpenLayers.Layer.Markers( "Marcadores" );
mapa.addLayer(markers);
- Se crearon dos nuevas variables, con el fin de determinar que acción realizar al momento de dar el clic, si se muestra un mensaje, o se agrega un marcador. Dichas variables son analizadas en el controlador clic del mouse, para determinar la accion
var activarMensaje
=0,activarMarcadores
=0;
.
.
.
if(activarMensaje==1){
alert("Evento MouseClick: "+transformMouseCoords(lonlat));
}
//INICIO AGREGAR MARCADORES
if(activarMarcadores==1)
{
var htmlStr='<div style="height: 200px; width: 400px; border: 1px solid black;"> Titulo</br> Contenido, puedo digitar lo que desee y lo mejor es que puede ser codigo html, asi que podemos colocar imagenes, fondos, links, etc </div>';
//Esta funcion se encuentra en el archivo OpenLayers_marcadores
agregarMarcador(lonlat.lon,lonlat.lat,htmlStr,true,true);
}
Por ultimo esta la pagina web que llamara a los javascript, dicha pagina, se llama marcadors.html
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript" src="js/OpenLayers_base.js"></script>
<script type="text/javascript">
//Habilito que se creen marcadores al dar clic en el mapa
activarMarcadores=1;
</script>
<script type="text/javascript" src="js/OpenLayers_marcadores.js"></script>
<style type="text/css">
.smallmap {
width: 929px;
height: 300px;
}
</style>
</head>
<body <body onLoad="iniciar()">
<h3>Nuestro primer mapa con OpenLayers</h3>
<div id="mapa" class="smallmap">
</div>
<h4>Coordenadas: </h4>
<input name="coordenadas" type="text" id="coordenadas" size="50"></input>
</body>
</html>
Y eso es todo, hay tiene un script que les permite agregar fácilmente marcadores a un mapa. Si desean descargar el código fuente, lo pueden obtener en el siguiente enlace.
Y eso es todo por el momento, en las siguiente guías encontraran mas información sobre como iniciarse en OpenLayers:
