La API en Javascript de OpenLayers permite acceder a múltiples fuentes de información geográfica ubicada en la red, con unas simples líneas de código.
En el siguiente ejemplo mostraré cómo utilizarlo con unos simples pasos, pero es necesario tener conocimientos básicos de javascript. Espero sea de utilidad. Empecemos!!!
- Primero, en el contenido del tag <head> de la página html, js, etc., se crea una entrada para empezar a utilizar la librería de OpenLayers.
- Ahora se crea en una nueva entrada <script> con una función que permitirá visualizar la ubicación deseada.
- Finalmente, basta con llamar a la función "loadData()" desde el evento clic (onClick()) de un botón, al cargar la página (<body onload="init();">), etc., para visualizar nuestra nueva coordenada en el mapa.
<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script>
function loadData() {
map = new OpenLayers.Map("basicMap"); //Crea una variable para el nuevo mapa
var mapnik = new OpenLayers.Layer.OSM(); //Inicializa una capa base de OpenStreetMap
map.addLayer(mapnik);//Se añade la capa base al nuevo mapa
var markers = new OpenLayers.Layer.Markers("Markers"); //Almacenar el nuevo marcador
map.addLayer(markers); //Añadiendo la capa de marcadores al mapa
var newLonLat = new OpenLayers.LonLat(-78.6356,-1.2524) //Coordenadas en WGS84 .transform(//Transforma la ubicación al sistema de coordenadas del mapa
new OpenLayers.Projection("EPSG:4326"), // Transformando desde WGS 84
map.getProjectionObject() // a la proyección del mapa
);
var newMaker = new OpenLayers.Marker(newLonLat);//Nuevo marcador para el mapa
markers.addMarker(newMaker);//Agregando el marcador al mapa
map.zoomToExtent(markers.getDataExtent());//Zoom al mapa según el extent del marcador
}
</script>
Listo!
Se ha creado un nuevo marcador para el mapa.
Conclusiones:
Se ha creado un nuevo marcador para el mapa.
Conclusiones:
Como se puede observar, no hace falta tener grandes conocimientos de programación para ocupar la API de Javascript de OpenLayers, es sumamente intuitivo y relativamente sencillo su utilización.
Plus
El ejemplo anterior solo añade un marcador al mapa, pero no una descripción. Para ello, he escrito una sencilla función que les será de utilidad, misma que pueden modificar según su necesidad.
function hintPopup(lonLat, maker, title)
{
var popup;
maker.events.register('mouseover', maker, function(evt) {
popup = new OpenLayers.Popup.FramedCloud("Popup",
lonLat,
null,
"<div>"+title+"</div>",
null,
false);
map.addPopup(popup);
});
maker.events.register('mouseout', maker, function(evt) {popup.hide();});
};
Esta función recibe como parámetros una coordenada, la capa de marcadores y el título para el marcador:
hintPopup(newLonLat, newMaker ,"Título");
Al colocar el mouse sobre el marcador del mapa, la descripción se muestra inmediatamente.
Plus
El ejemplo anterior solo añade un marcador al mapa, pero no una descripción. Para ello, he escrito una sencilla función que les será de utilidad, misma que pueden modificar según su necesidad.
function hintPopup(lonLat, maker, title)
{
var popup;
maker.events.register('mouseover', maker, function(evt) {
popup = new OpenLayers.Popup.FramedCloud("Popup",
lonLat,
null,
"<div>"+title+"</div>",
null,
false);
map.addPopup(popup);
});
maker.events.register('mouseout', maker, function(evt) {popup.hide();});
};
Esta función recibe como parámetros una coordenada, la capa de marcadores y el título para el marcador:
hintPopup(newLonLat, newMaker ,"Título");
Al colocar el mouse sobre el marcador del mapa, la descripción se muestra inmediatamente.
No hay comentarios:
Publicar un comentario