En la siguiente publicación veremos cómo crear nuestro propio mapa mediante la libraría de código libre OpenLayers.
Tabla de contenidos
¿Qué es OpenLayers?
OpenLayers es una librería de mapas hecha totalmente en Javascript, su código fuente es libre. OpenLayers se ha posicionado como la mejor alternativa a la hora de incluir un componente de tipo mapa en cualquier página web. Lo más interesante es que incluso si disponemos de la cartografía de Google, Microsoft (MSN Virtual Earth) o Yahoo, también puedes usar OpenLayers como visor porque es totalmente compatible con tecnologías propietarias, además de cumplir con los estándares WMS y WFS.
Al ser una librería del lado del cliente la descarga de estos se realiza directamente desde el navegador a través de Ajax; no genera tráfico en el servidor, los mapas se descargan directamente del servidor de mapas que suele ser una pieza diferenciada a nivel de sistemas.
OpenLayers permite sobreponer distintas capas sobre una básica, añadir indicadores o puntos en el mapa con leyendas, así como polígonos y proporciona su propio API para dibujarlos de una manera sencilla. Incorpora un set de controles básicos y una toolbar de controles avanzados y podemos incluir nuestros propios controles haciendo uso del API.
Toda la documentación relevante puede ser encontrada en su página oficial.
Primeros pasos con OpenLayers
El primer paso que debemos tener en cuenta en la creación de cualquier mapa web JavaScript es elaborar el marco HTML básico. La estructura que va a tener nuestro HTML será la siguiente:
<<¡DOCTYPE html>
<html>
<head>
<!-- Libreria JS -->
<!-- CSS -->
</head>
<body>
<div id="miMapa">
</div>
</body>
</html>
Descarga y configuración
Tenemos dos vías para hacer uso de OpenLayers_
- Hacer uso de OpenLayer desde la url. En esta opción tendremos que hacer referencia en la cabecera de nuestro HTML a la librería mediante la url de su última versión.
<script type= “text/javascript” src=https://openlayers.org/api/OpenLayers.js> </script>
2. Descarga de la librería. También podremos descargar la librería y hacer referencia a este fichero de nuestro HTML. Lo que haremos será crear un directorio donde ordenar todos los elementos y referencias a la librería. Si queremos descargar una versión concreta de la librería en esta url están todas las que se han liberado hasta el momento: https://openlayers.org/download/
Usando esta opción nos aseguramos de que la aplicación funciona, aunque no tengamos conexión a internet. Para ello copiaremos el fichero OpenLayers.js a nuestro directorio de librerías JavaScript. Podemos usar la siguiente organización para trabajar con los ficheros que iremos creando y configurando en nuestra plantilla mediante Notepad++.
La cabecera (head)
Para crear un mapa con OpenLayers tendremos que incluir en la cabecera <head> de nuestra página web la librería OpenLayers.js (contiene el código de la librería) y la hoja de estilos ol.css (con la hoja de estilos de la librería).
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Visor</title>
<!-- Libreria JS -->
<script type="text/javascript" src="recursos/js/OpenLayers.js"></script>
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="recursos/css/ol.css">
</head>
El Cuerpo (body)
Dentro de la etiqueta <body> crearemos nuestro mapa. Para ello damos al contenedor un atributo id para que podamos hacer referencia a él en nuestro código.
<body> <div id="miMapa">
El Script con el código JavaScript
El siguiente paso será añadir el siguiente código dentro del <script>.
var map = new ol.Map({
target: 'miMapa',
layers: [
new ol.layer.Tile({source: new ol.source.OSM() })
],
view: new ol.View({ center: ol.proj.transform([0, 40], 'EPSG:4326', 'EPSG:3857'), zoom: 5
})
});
Descomponemos el código que estamos insertando en la siguiente tabla:
| Map. Un mapa (map) es el componente central de OpenLayers. Para crear un mapa se necesitan una vista, una o más capas y un contenedor de destino. |
| View. La vista (view) determina como se dibujará el mapa. Se usa para definir la resolución, el encuadre, etc. Es como una cámara a través de la cual se mira el contenido del mapa. |
| Layers. Las capas (Layers) se pueden añadir al mapa de forma superpuesta, es decir, las capas más bajas se dibujan antes que las capas superiores. Las capas pueden ser capas raster (imágenes) o capas vectoriales (puntos/líneas/polígonos). |
| Source. Cada capa tiene una fuente (source) adjuntada, la cual saber cómo cargar el contenido de la capa. En el caso de las capas vectoriales, esta fuente lee los datos vectoriales usando una clase de formato (por ejemplo, GeoJSON o KML) y rellena la capa con un conjunto de entidades. |
El resultado con este simple código es el siguiente:
Para obtener el html y el código haz botón derecho > Guardar enlace como… en el siguiente enlace: https://zonegis.es/wp-content/uploads/2017/04/Prueba-1.html
En RODBERmaps desarrollamos aplicaciones webmapping para empresas que desean ahorrar costes y generar valor y aquellas administraciones que quieran sumarse a la idea de «smart cities» como implementación de la tecnología a todos los procesos que se llevan a cabo en el territorio.
o