09 Ene 2020 ¿Leaflet o OpenLayers?

Sin entrar en detalles técnicos, en este post vamos a ver las diferencias de concepción y diseño entre la API de Leaflet y la API de OpenLayers. De este modo, tendremos un punto de partida para ver cuál de las dos API se adaptará mejor a nuestros proyectos futuros.

En el curso de especialización en Programación de aplicaciones web map el estudiante aprenderá a desarrollar aplicaciones de mapas web tanto con la API de Leaflet como de OpenLayers y le permitirá saber cuál de ellas utilizar en nuestros trabajos.

Diferencias de concepción

Para ver cuáles son las diferencias de base entre las dos API vamos a partir de la definición que dan los propios desarrolladores de sus productos y que hemos traducido de sus propias webs.

«Leaflet.js es una librería JavaScript de código abierto para crear mapas interactivos aptos para dispositivos móviles. Con un peso de aproximadamente 38 KB de JS, tiene todas las características de mapeo que la mayoría de desarrolladores necesitan. Leaflet está diseñado teniendo en cuenta la simplicidad, el rendimiento y la usabilidad. Funciona de manera eficiente en todas las principales plataformas móviles y de escritorio, se puede ampliar con muchos complementos. Tiene una API fácil de usar y bien documentada y un código fuente simple y legible al que se puede contribuir.»

Por lo tanto, podemos afirmar que los ejes principales de Leaflet son la simplicidad y la capacidad de dar respuesta a las funcionalidades más utilizadas en las aplicaciones de web map. Considerando que la mayoría de mapas disponibles en la web tienen funcionalidades básicas es lógico entender por qué Leaflet es la librería más extendida en la red.

«OpenLayers.js facilita poner un mapa dinámico en cualquier página web. Puede mostrar mosaicos de mapas, datos vectoriales y marcadores cargados desde cualquier fuente. OpenLayers ha sido desarrollado para promover el uso de información geográfica de todo tipo. Es completamente gratuito, Open Source JavaScript, lanzado bajo la Licencia BSD de 2 cláusulas (también conocida como FreeBSD).»

Por su parte, OpenLayers ha sido desarrollado para promover/profundizar en el uso de información geográfica de todo tipo. Con esta idea, OpenLayer se aleja de la simplicidad pero, paralelamente, incorpora funcionalidades avanzadas (of all kinds)  que pueden quedar fuera, o no, de esas funcionalidades más simples y extendidas que incorpora la API de Leaflet. En la página de ejemplos de OpenLayers podemos encontrar algunas de estas funcionalidades avanzadas.

De lo comentado anteriormente, podemos deducir que las principales diferencias entre ambas API surgen de la simplicidad y del diseño de su funcionalidad. Veamos ahora, algunas consecuencias de esas dos diferencias.

Simplicidad

La mejor forma para comparar la simplicidad entre las dos API es ver las líneas de código JavaScript necesarias para crear un mapa con una sola capa de información y sin ninguna funcionalidad adicional. El código HTML queda excluido de esta comparativa ya que es común a las dos API.

Código JS con Leaflet

[html]
var mymap = L.map('mapid').setView([41.9789, 2.81640], 14);
L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}',{
    attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox/streets-v11',
    accessToken: 'your.mapbox.access.token'
}).addTo(mymap);
[/html]

Código JS con OpenLayers

[html]
var map = new ol.Map({
    target: 'map',
    layers: [
            new ol.layer.Tile({
              source: new ol.source.OSM()
            })
         ],
     view: new ol.View({
              center: ol.proj.fromLonLat([2.81640, 41.9789]),
              zoom: 4
           })
});
[/html]

Incluso en un mapa tan sencillo existen diferencias importantes en cuanto al número de líneas de código, pero la principal diferencia, está en el número de clases (objetos distintos) que se utilizan en cada caso.

En el ejemplo anterior, Leaflet utiliza solo dos tipos de objetos (L.Map y L.tileLayer), mientras que OpenLayers utiliza 5 objetos distintos (ol.Map, ol.layer.Tile, ol.source.OSM, ol.View y ol.proj.fromLonLat).

Un mayor número de objetos implica una mayor dificultad para iniciarse en el uso de una API pero, como contrapartida, implica también una mayor maniobrabilidad (¡más libertad!) durante el proceso de programación. O dicho de otro modo, una mayor capacidad para desarrollar aplicaciones más personalizadas.

Diseño de la funcionalidad

Leaflet

La simplicidad de Leaflet se combina muy bien con el uso de plugins. Tal como hemos visto en la definición de Leaflet, esta API puede extender sus funcionalidades en base al uso de plugins. De este modo, se mantiene la simplicidad y ligereza del núcleo sin renunciar al uso y desarrollo de nuevas funcionalidades.

Cualquier programador experimentado puede desarrollar nuevos plugins, lo cual, es tanto una ventaja como un inconveniente. Lógicamente es una ventaja porque ello facilita el desarrollo de nuevos plugins, pero también es un inconveniente debido a que la funcionalidad de esos plugins (con su adaptación a nuevas versiones de la API, soporte al usuario, etc.) recae en manos de terceros. Si esos terceros dejan de dar soporte, el plugin puede terminar por desaparecer dejándonos colgados durante el proceso de actualización de nuestras aplicaciones.

OpenLayers

La API de OpenLayers tiene el comportamiento contrario.Por una parte, dispone de un núcleo más extenso y con menos desarrolladores, lo cual, conlleva que esos desarrolladores formen parte del núcleo de la API y por lo tanto sea algo más difícil que abandonen el proyecto. 

Por otra parte, al desarrollar con OpenLayers en un entorno como Node.js, podemos utilizar solo aquellas clases necesarias para nuestras aplicaciones tal y como se muestra en esta página. Así, podemos excluir de nuestro código todos aquellos tipos de objeto que no vayamos a utilizar. Dicho de otro modo, podemos mantener nuestras aplicaciones lo más ligeras posibles en función de las funcionalidades utilizadas. Una funcionalidad más avanzada, lógicamente, conlleva una aplicación menos ligera.

Conclusión

Cuando vayamos a desarrollar una aplicación web map, lo más probable, es que se trate de una aplicación para visualizar algún tipo de información espacial sencilla. Este tipo de aplicaciones, sin demasiada complejidad, pueden llevarse a cabo con cualquiera de las dos API analizadas sin requerir el uso de plugins. En este contexto, lo más recomendable, será utilizar la API con mayor simplicidad para ahorrarnos el mayor tiempo posible.

En cambio, cuando estemos ante otro tipo de aplicación web map, con mayor complejidad, que requiera algunas funcionalidades que estén disponibles a modo de plugins, entonces la mejor opción será aquella API que no dependa de terceras partes. O, en su defecto, la que dependa en menor medida.

Aunque parezca poco importante, hay que tener presente que la red en general, y  la web en particular, evolucionan a un ritmo muy acelerado y lo que ayer estaba totalmente extendido hoy está  casi en desuso. En este contexto tan cambiante es importante que, en la medida de nuestras posibilidades, nuestras aplicaciones estén lo más actualizadas posible. Tanto por motivos de seguridad como de rendimiento y usabilidad.