OpenLayers es una librería JavaScript open source que muestra datos espaciales en cualquier navegador web de escritorio o móvil. Uno de sus puntos fuertes es el trabajo con los estándares de la OGC (WMS, WFS, etc)

Aunque es una librería muy completa, podemos extender su funcionalidad aun más mediante el uso de plugins o complementos. Estos plugins  nos ofrecen funcionalidad adicional, bien extendiendo OpenLayers o integrándose en él.

Aquí encontrarás una lista de los mejores plugins para OpenLayers que consideramos muy recomendables por su utilidad.

Al final del post también te mostramos cómo incorporar estos plugins en nuestros mapas web.

Si aun no sabes cómo crear un mapa web con OpenLayers te recomendamos que repases el pequeño tutorial cómo crear una sencillo mapa con OpenLayers.

1. OL-Cesium

OL-Cesium es una librería para integrar Cesium. Podemos crear nuestros mapas utilizando OpenLayers y visualizarlo en un globo terráqueo a través de cesium.

Cesium es una de las mejores librerías JavaScript para crear mapas web en 3D.

Características

Cambio de modo suavizado entre 2D y 3D y posibilidad de sincronizar:

• Contexto del mapa (cuadro delimitador y nivel de zoom).
• Fuentes de datos raster.
• Fuentes de datos vectoriales en 2D y 3D.
• Selección de mapa (elementos seleccionados).

La biblioteca es configurable y permite:

• Carga lenta o rápida de cesium.
• Limitación del consumo de recursos (detección de inactividad).

Aquí podemos ver algunos ejemplos.

2. OL3-LayerSwitcher

Una de las principales carencias de la versión de OpenLayers 3.x es el control de capas. El layerswitcher que estaba incluido en la versión 2 como un control estándar, no lo está en esta versión.

Matt Walker ha desarrollado una clase nueva (ol.control.LayerSwitcher) para añadir un control de capas en OpenLayers 3.

En esta entrada te mostramos cómo utilizarlo.

3. OL-Popup

De nuevo es Matt Walker el desarrollador de este plugin.

OpenLayers Popup consiste en la implementación de una ventana emergente en un visor de OpenLayers.

En el ejemplo más básico se muestran las coordenadas de un punto al hacer clic sobre el mapa. La ventana emergente puede manejar eventos DOM, se puede personalizar su aspecto mediante CSS, pueden abrirse múltiples pop ups…

Este plugin añade la nueva clase ol.Overlay.Popup().

La fuente de los códigos para ver su uso y aplicación se encuentran en los ejemplos.

4. JSTS

JSTS es una librería JavaScript de predicados y funciones espaciales para realizar procesamiento de geometrías conforme a la Especificación de Características Simples para SQL publicada por el Open Geospatial Consortium.

El objetivo principal del proyecto es proporcionar aplicaciones webmapping con una librería completa para procesar y analizar geometrías simples.

En los ejemplos de OpenLayers tenemos un ejemplo de uso en la que se crean áreas de influencia.

5. OpenLayers Control Geocoder

OpenLayers Control Geocoder es una extensión de geocodificación para OpenLayers.

El plugin soporta (por ahora) los siguientes proveedores:

• OSM/Nominatim — ‘osm’.
• MapQuest Geocoding API — requiere KEY — ‘mapquest’.
• Google Maps Geocoding API — requiere KEY — ‘google’.
• Photon — ‘photon’.
• Mapzen Search/Pelias — requiere KEY — ‘pelias’.
• Bing — requiere KEY — ‘bing’.

Aquí podemos ver un ejemplo.

6. OpenLayers Custom Context Menu

Este plugin nos permite añadir un menú contextual en nuestros visores webmapping creados con OpenLayers 3:

Ejemplo de uso.

7. OL3-Google-Maps

Con el complemento OL3-Google-Maps podemos crear un mapa web utilizando OpenLayers con la posibilidad de utilizar Google Maps como mapa base y mucho más.

Ejemplos del plugin:

• Simple
• Vector
• Label
• Concept

See all other examples at: http://mapgears.github.io/ol3-google-maps/examples/

Para utilizar OL3-Google-Maps, primero debe cargar Google Maps API. Es importante cargar la API de Google Maps antes de OL3-Google-Maps. También necesitas usar tu propia clave de la API de Google Maps.

OL-ext: Extensiones para OpenLayers

OL-ext es un conjunto de extensiones fabulosas para OpenLayers (ol3/ol5) creado por Jean-Marc Viglino.

El mejor plugin sin duda, contiene decenas de herramientas:

Estilo

8. Iconos de Maki o Font awesome en un mapa:

9. Gráficos estáticos en un mapa:

10. Relleno basado en patrones cartográficos:

11. Muestra fotos en un mapa:

12. Etiquetado siguiendo las líneas:

Animación

13. El plugin OL3-AnimatedCluster proporciona dos clases para crear agrupaciones de puntos cuando trabajamos con una gran número de ellos:

• L.layer.AnimatedCluster es una capa que anima los clústeres en el cambio de zoom. La capa se crea con un ol.source.Cluster como capas de vector de clúster estándar.
• Ol.interaction.SelectCluster es una interacción de selección. En selectos resortes de clúster aparte para revelar las características. Las características reveladas son seleccionables. Las características reveladas son un clúster con un atributo ‘características’ que contienen la característica original.

14. Animaciones de objetos en el mapa:

15. Utiliza un estilo transparente para habilitar la selección de objetos en un bucle de animación:

16. Animación de objetos siguiendo un camino:

17. Creación de pulsaciones en puntos:

Filtros

18. Filtros para añadir efectos de color en capas o mapas:

19. Este filtro aplica una operación de composición en el dibujado de capas:

20. Filtros utilizando un máscara o recorte de mapa utilizando un área:

21. Filtro para añadir  efectos de textura en mapas o capas:

22. Filtro par añadir efecto de mapa doblado:

Canvas

23. Los controles de canvas son controles dibujados en el mapa para que puedan exportarse a imágenes JPEG / PNG.

24. El control «objetivo» dibuja una señal para marcar el centro del mapa:

25. Control para dibujar una brújula:

26. Añade una retícula con las etiquetas de las coordenadas:

27. Añade una malla de referencia sobre el mapa y un índice asociado a él:

Interacciones

28. Interacción para dibujar polígonos regulares:

29. Interacción para hacer algo cuando pasamos el cursor por encima:

30. Interacción para dividir la geometría del objeto haciendo clic en un punto:

31. Interacción que actúa como un corte de geometrías mientra editamos líneas:

32. Interacción para modificar escalas (escala, rotación, traslación):

33. Corta capas utilizando una circunferencia en el mapa:

34. Arrastrar y soltar en el mapa. Interacción de drag & drop. Por ejemplo para añadir capas arrastrándolas sobre el mapa:

Barra de controles

35. Un sencillo control con botones para pulsar:

36. Un control de botones como el anterior con estado activado /desactivado:

37. Barra de controles que contiene otros controles

38. Controles en una barra inferior:

39. Barra de controles de edición de puntos, líneas y polígonos:

Controles

40. Control de capas con visibilidad, opacidad y orden:

41. Control de capas con imágenes como botones para cambiar las capas:

42. Este control añade un globo terráqueo mostrando un marcador de posición:

43. Control de capas como ventana emergente al pasar por encima:

44. Mapa de localización con estilo personalizado  y zoom limitado:

 

45. Control que dibuja un perfil topográfico de una línea 3D (con XYZ):

46. Control que añade una división de la pantalla para comparar dos capas base:

Leyenda

47. Control para vusiazar la leyenda en un mapa:

48. Control para visualizar una leyenda en un mapa estadístico:

49. Visualizar la leyenda con dos columnas:

Búsqueda

50. Control para seleccionar objetos geográficos por atributos:

51. Una barra de búsqueda genérica para buscar en el mapa:

52. Una barra de búsqueda para buscar lugares usando la API photon.

53. Una barra de búsqueda para buscar objetos geográficos en el mapa:

54. Buscar lugares con el servicio de geocodificación de OSM Nominatim:

Enrutamiento

55. Usa el algoritmo Dijkstra en una capa vectorial:

Popup

56. Muestra una venta emergente en un mapa con un estilo definido:

57. Ventana emergente que muestra los atributos del objeto geográfico:

58. El control de superposición (overlay) se puede usar para mostrar información sobre el mapa:

59. Muestra un efecto de rebote en la ventana emergente:

Capas / fuentes

60. Capa de teselas vectoriales que usa RDF:

61. Georreferenciación de imágenes en un mapa:

62. Función que recupera una vista previa de una capa:

Móvil

63. Pensado para usar en dispositivos móviles, gestiona el movimiento desplazando la brújula:

64. Dibujar geometrías en dispositivos móviles mediante toques:

Geometría

65. Dibujado de curvas suaves:

Miscelánea

66. Efecto de iluminación en el movimiento del ratón:

67. Efecto de lupa de aumento:

68. Añade efecto de nubes animadas:

69. Efecto de ondas de agua en el mapa:

70. Mapas sincronizados que incluye marcador de posición el el mapa sincronizado:

Full map

71. Capa de BDpedia con agrupaciones para mostrar fotografías en un mapa:

72. Representa información en 2.5 /3D en un mapa:

73. Efecto mapa antiguo con renderizado canvas:

Merece especial atención revisar los ol3-games, juegos basados en OpenLayers. También creado por Viglino:

74. ol3-games

Por un lado, muchos juegos usan mapas como área de juegos y algunos se basan en un mapa. Por otro lado, OpenLayers es una librería repleta de alto rendimiento con muchas herrramientas para crear mapas interactivos en la web.

Este proyecto tiene como objetivo probar y agregar mecanismos de juego dentro de OL3 (Openlayers 3).

No es un juego completo o un motor de juego completo, pero encontramos algunas cosas sobre el desarrollo de juegos en un mapa de OL3.

Ver ejemplos online

Bueno hasta aquí los que a nuestro juicio son los mejores plugins para OpenLayers.

Echa un vistazo al repositorio oficial donde se encuentra la lista completa:

http://openlayers.org/3rd-party/

¿Cómo incorporo los plugins en mi mapa de OpenLayers?

1. En primer lugar debemos ir a la página del plugin que queremos instalar. Por ejemplo, vamos a instalar uno de los plugins más completos: ol-Ext: https://github.com/Viglino/ol-ext

2. A continuación nos descargamos el plugin haciendo clic sobre el botón Download ZIP:

3. Descomprimimos el archivo y lo colocamos en el directorio en el que se encuentra nuestro HTML.

5. Añadimos la librería jQuery, la librería de OpenLayers y la nueva librería:

<!-- jQuery -->
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

<!-- OL3 -->
<link rel="stylesheet" href="http://openlayers.org/en/master/css/ol.css" />
<script type="text/javascript" src="http://openlayers.org/en/master/build/ol.js"></script>
	
<!-- Plugin-->
<link rel="stylesheet" href="ol3-ext-gh-pages/control/piratecontrol.css" />
<script type="text/javascript" src="ol3-ext-gh-pages/control/piratecontrol.js"></script>

6. A continuación, creamos el elemento HTML div en el que incluiremos el mapa:

<!-- Map div -->
<div id="map" ></div>

7. Creamos el mapa con la vista (view), las capas (layers), etc:

<script type="text/javascript">

	// The map
	var map = new ol.Map
		({	target: 'map',
			view: new ol.View
		      ({	zoom: 14,
				center: [-302537, 6001071]
			}),
			layers: [new ol.layer.Tile(
				{	name: "OSM",
					source: new ol.source.OSM(),
					visible: true
				})]
		});
	map.getView().fit ([-375917, 5976764, -229158, 6025378], map.getSize());
</script>

8. Por último añadimos el nuevo control que nos proporciona la librería piratecontrol.js del complemento ol3-ext. Creamos una variable que contenga el control:

var ctrl = new ol.control.PirateMap();

9. Añadimos la capa de Google en el mapa:

map.addControl(ctrl);

Listo!

Tenemos nuestro mapa de OpenLayers con el fondo pirata: