Manejo de marcadores con OpenLayers

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:

• Crear un mapa con OpenLayers
• Manejo de eventos del mouse con OpenLayers
• Manejo de marcadores  con OpenLayers
• Manejo de Features ( figuras ) con OpenLayers