Adsence

lunes, 21 de octubre de 2013

Crear un mapa con OpenLayers

By Jorge Andres Moreno , , , , , , Leave a Comment


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:
Ubicación: Bogotá, Colombia

0 comentarios :

Publicar un comentario