Uno de los puntos fuertes de ReactJS es su versatilidad a la hora de integrar diferentes tipos de librerías. En este caso vamos a ver cómo instalar la librería de OpenLayers, una de las más utilizadas para el desarrollo de visores cartográficos.

Antes que nada debes saber que tienes que tener instalado Node  y  create-react-app, puedes verlo en anteriores entradas  nuestro blog. Puedes asegurarte de ello con este comando:

A continuación, crearemos una nueva aplicación dónde se configurará nuestro proyecto, lo denominamos “olmap”:

C:\reactjs>npx create-react-app olmap

Y ya tendremos instalada la carpeta con todas sus dependencias si lo lanzamos con “npm start” podremos ver en el navegador lo que vamos haciendo

C:\reactjs\openlayers>npm start

El siguiente paso es instalar la librería de OpenLayers” con la siguiente instancia:

C:\reactjs\openlayers>npm install ol –save

Si vamos a una IDE como Visual Code podemos desplegar todas las carpetas que se han instalado. Ya podremos empezar a desarrollar nuestro código para crear un visor con OpenLayers y ReactJS.

Existe mucho código libre y muchos proyectos que puedes utilizar de otras fuentes, para no empezar desde cero, por ejemplo, he integrado este proyecto de GitHub para que veas un ejemplo rápido, si lo mostramos en el navegador este es el resultado:

Puedes integrar muchas otras librerías, trabajar con Mapbox, Leaflet, esto sólo es una muestra.

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (1 votos, promedio: 5,00 de 5)

Cargando...

Formación de calidad impartida por profesionales