Manejo de zonas con OpenLayers

En esta guía, veremos como podemos crear sobre el mapa de forma dinamia "zonas". Estas zonas son áreas que se muestran con otro color sobre el mapa, que delimitan lo que a nosotros nos apetece, pueden ser "zonas de cuidado", "areas de cobertura", etc.



Para poder crear estas zonas, debemos añadir una capa nueva al mapa, esta capa sera del tipo  Vector

vectors = new OpenLayers.Layer.Vector("Capa Vectorial");
 mapa.addLayer(vectors);

También se usaran 2 variables para determinar que acción se va a realizar:

• drawP: si dibujar una nueva área
• editP: editar una ya existente

drawP=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Polygon)
mapa.addControl(drawP);
editP= new OpenLayers.Control.ModifyFeature(vectors);
mapa.addControl(editP);

En este caso, se instancia la variable drawP, para que pintara un polígono, pero también se puede escoger Point o RegularPolygon (para ver mas información sobre la clase OpenLayers.Handler, visitar la documentación oficial ).

var options =
{
hover: true,
onSelect: serialize
};
select = new OpenLayers.Control.SelectFeature(vectors, options);
mapa.addControl(select);

En esta sección, lo que se hace es agregar un control al evento "SelectFeature", esto con el fin de que cuando se coloque el mouse sobre un área (hover), se pinte su código en el cuadro de dialogo. Para realizar estas acciones se llama a la función "serialize", tal como se describe en la variable options, que se pasa al constructor de la variable select.



La funcion updateFormats es usada para determinar en que formato se mostrara la salida, con formato me refieron a las "medidas " de coordenadas.

Las funciones activarDrawFeacture y activarModifyFeacture son usadas para determina que accion a realizar, si pintar una zona (feature) o modificar una ya existente, para esto, solo basta con llamar dichas funciones desde los botones respectivos.

Para poder realizar todas las acciones anteriomente mencionadas, primero se debe llamar a la funcion iniciarDrawFeacture, que se encarga de iniciar todo lo necesario (capas, variables,controles,etc). Para hacer esto, lo realizamos desde la funcion onLoad del body

<body onload="iniciar(); iniciarDrawFeacture();">

Aqui esta el codigo de la pagina zonas.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" src="js/OpenLayers_features.js"></script>
<style type="text/css">
     .smallmap {
      width: 929px;
      height: 300px;
     }
</style>
</head>
<body <body onLoad="iniciar();iniciarDrawFeacture();">
 <h3>Nuestro primer mapa con OpenLayers</h3>
 <div id="mapa" class="smallmap">

 </div>
 <table width="80%">
         <tr>
          <td align="center">
                 <input type="submit" name="crearFeature" id="crearFeature" value="Crear Zona" onclick="activarDrawFeacture()" /> 
          </td>
                <td align="center">
                 <input type="submit" name="editarFeature" id="editarFeature" value="Editar Zona" onclick="activarModifyFeacture()" />
                </td>
   </tr>
        </table>

        <p align="center"><strong>Coordenadas Zona</strong></p>
        <div align="center">
          <textarea name="coordenadasZona" cols="80" rows="10" id="coordenadasZona"></textarea>
          </input>    
</body>
</html>

Aqui esta el archivo OpenLayers_features.js

var drawP,editP,vectors,select,formats;

//Funcion se encarga de agregar los controles para poder dibujar y editar polygonos
function iniciarDrawFeacture()
{

 vectors = new OpenLayers.Layer.Vector("Capa Vectorial");
 mapa.addLayer(vectors);
 drawP=new OpenLayers.Control.DrawFeature(vectors,OpenLayers.Handler.Polygon)
 mapa.addControl(drawP);
 editP= new OpenLayers.Control.ModifyFeature(vectors);
 mapa.addControl(editP);
 updateFormats();
 var options = 
 {
        hover: true,
        onSelect: serialize
    };
    select = new OpenLayers.Control.SelectFeature(vectors, options);
 mapa.addControl(select);

}
//Esta funcion permite dibujar un feature()
function activarDrawFeacture()
{
 editP.deactivate();
 drawP.activate();
 select.activate();

}
//Esta funcion permite obtener el codigo de un poligono y mostrarlo en un string
function serialize(feature) 
{
    var type = "geojson";
    // second argument for pretty printing (geojson only)
    var pretty = 1;
    var str = formats['out'][type].write(feature, pretty);
    // not a good idea in general, just for this demo
    str = str.replace(/,/g, ', ');
 $("#coordenadasZona").attr('value','Codigo Zona: '+str);
    return str;
}
//Esta funcion es para tener unos formatos estandar de codificacion
function updateFormats() 
{
  var in_options = {
                'internalProjection': mapa.baseLayer.projection,
                'externalProjection': new OpenLayers.Projection("EPSG:4326")
            };   
            var out_options = {
                'internalProjection': mapa.baseLayer.projection,
                'externalProjection': new OpenLayers.Projection("EPSG:4326")
            };
            var gmlOptions = {
                featureType: "feature",
                featureNS: "http://example.com/feature"
            };
            var gmlOptionsIn = OpenLayers.Util.extend(
                OpenLayers.Util.extend({}, gmlOptions),
                in_options
            );
            var gmlOptionsOut = OpenLayers.Util.extend(
                OpenLayers.Util.extend({}, gmlOptions),
                out_options
            );
            var kmlOptionsIn = OpenLayers.Util.extend(
                {extractStyles: true}, in_options);
            formats = {
              'in': {
                wkt: new OpenLayers.Format.WKT(in_options),
                geojson: new OpenLayers.Format.GeoJSON(in_options),
                georss: new OpenLayers.Format.GeoRSS(in_options),
                gml2: new OpenLayers.Format.GML.v2(gmlOptionsIn),
                gml3: new OpenLayers.Format.GML.v3(gmlOptionsIn),
                kml: new OpenLayers.Format.KML(kmlOptionsIn),
                atom: new OpenLayers.Format.Atom(in_options),
                gpx: new OpenLayers.Format.GPX(in_options),
                encoded_polyline: new OpenLayers.Format.EncodedPolyline(in_options)
              },
              'out': {
                wkt: new OpenLayers.Format.WKT(out_options),
                geojson: new OpenLayers.Format.GeoJSON(out_options),
                georss: new OpenLayers.Format.GeoRSS(out_options),
                gml2: new OpenLayers.Format.GML.v2(gmlOptionsOut),
                gml3: new OpenLayers.Format.GML.v3(gmlOptionsOut),
                kml: new OpenLayers.Format.KML(out_options),
                atom: new OpenLayers.Format.Atom(out_options),
                gpx: new OpenLayers.Format.GPX(out_options),
                encoded_polyline: new OpenLayers.Format.EncodedPolyline(out_options)
              }
            };
}

function activarModifyFeacture()
{
 editP.activate();
 drawP.deactivate();
 select.deactivate();
 editP.mode = OpenLayers.Control.ModifyFeature.RESHAPE;
 editP.createVertices = true;
}

Si desean el código
fuente completo, con un buen diseño, pueden visitar el siguiente link

Read More...

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

Read More...

Crear un mapa con OpenLayers

Buenos días, en nuestra guía anterior explicábamos como descargar la biblioteca de OpenLayers para poder empezar a trabajar con esta herramienta  (puedes ver la guía aquí ) .



Ahora procederemos a agregar un mapa a nuestra pagina, para luego poder realizar cualquier acción que deseemos (agregar,quitar marcadores, figuras, etc ).

Para poder añadir un mapa a la pagina, debemos primero crear un elemento "div" dentro de la pagina web, que sera el encargado de contener dicho mapa, ese "div" por regla debe tener el atributo id y el atributo class.

El atributo id, no permitirá identificar ese div, para luego con javascript poder pintar el mapa, y el atributo class, nos permitirá enlazarle un css para poder definir la altura y anchura. Tendríamos algo como esto

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="OpenLayers.js"></script>
<style type="text/css">
    	.smallmap {
    		width: 929px;
    		height: 300px;
   		}
</style>
</head>
<body>
        <h3>Nuestro primer mapa con OpenLayers</h3>
	<div id="mapa" class="smallmap">

	</div>
</body>
</html>

Pero si abrimos ese código, nos daremos cuenta de que realmente no hace nada, eso es debido a que nos falta implementar el javascript que se encarga de pintar el mapa. Para poder crear el mapa, debemos (en javascript ) crear un objeto del tipo OpenLayers.Map. Dicho constructor recibe un parámetro, que es el id del div que lo contendrá

var mapa=new OpenLayers.Map("mapa");

Luego se debe crear y agregar una "capa" para mostrar, esta capa lo que tendrá es la manera como se visualizara el mapa ( para conocer todos los tipos de capas pueden visitar la documentación oficial ). También debemos centrar el mapa, para que cargue en una zona que queramos, para esto debemos darle las coordenadas de longitud y latitud

capa=new OpenLayers.Layer.OSM("OSM Map");
		mapa.addLayer(capa);
		mapa.setCenter(
                new OpenLayers.LonLat(-74.061674, 4.661464).transform(
                    new OpenLayers.Projection("EPSG:4326"),
                    mapa.getProjectionObject()
                ), 12
            );

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script type="text/javascript">
//Variables a utilizar
var mapa,capa;
function iniciar()
{
//Creando el mapa
mapa=new OpenLayers.Map("mapa");
//Creando la capa
capa=new OpenLayers.Layer.OSM("OSM Map");
//Agregando la capa
mapa.addLayer(capa);
//Establenciendo donde visualizara el mapa, para esto debemos pasarle las coordenadas
//de latitud y longitud, ademas del zoom, que indica que en este caso es 12
mapa.setCenter(
new OpenLayers.LonLat(-74.061674, 4.661464).transform(
new OpenLayers.Projection("EPSG:4326"),
mapa.getProjectionObject()
), 12
);
}
</script>
<style type="text/css">
.smallmap {
width: 929px;
height: 300px;
}
</style>
</head>
<body onload="iniciar()">
<h3>Nuestro primer mapa con OpenLayers</h3>
<div id="mapa" class="smallmap">

</div>
</body>
</html>

Quedándonos lo que sigue:



Pueden descargar el código fuente de Crear un mapa con OpenLayers con un buen Diseño 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

Read More...

OpenLayers, mapas OpenSource para nuestros Proyectos

Buenos días lectores.



Hoy les traigo una herramienta open source que nos permitirá manejar mapas para nuestro proyectos, y lo mejor es que es completamente open source y esta escrito en javascript. La herramienta mencionada se llama OpenLayers.



En esta serie de guías guía les explicare como podemos:

• Crear un mapa.
• Agregar marcadores (puntos en el mapa).
• Pintar marcadores en el mapa.
• Crear zonas de coberturas (pintar áreas en el mapa).
• Modificar zonas de cobertura en el mapa

Lo primero que debemos hacer apenas conocemos una nueva tecnología es irnos a la documentación oficial, la cual podemos conseguir en ingles o español (no actualizada).

• Documentación oficial OpenLayers (ingles)
• Documentación oficial OpenLayers(español)

Iniciando con OpenLayer:

Para poder incrustar un mapa en nuestras paginas web, debemos primero enlazar el javascript correspondiente, para eso podemos descargarlo y almacenarlo en nuestro servidor, o bien podemos enlazarlo de la pagina oficial. Para descargarlo debemos ir a esta pagina y copiar todo el contenido y guardarlo en un archivo que llamaremos OpenLayers.js ubicado en una carpeta "js, script" o en una carpeta cualquiera de nuestra pagina





Luego de esto, podemos enlazar nuestro javascript de la siguiente forma

<script type="text/javascript" src="js/OpenLayers.js"></script>

O si lo que queremos es enlazar la version almacenada en el servidor de OpenLayers podemos hacer lo siguiente:

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>

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

Read More...