@rxmap/rxmap v0.6.0
RxMap
RxMap es una "Wrapper" para las librerías de mapas que añade programación funcional y reactiva usando observables(RxJs) , permite fácilmente anidar llamadas asyncronas , permite disponer de diferentes libreras de mapas con la misma interfaz y incluye la opcion de trabajar offline.
RxMap no sustituye al visor sino que añade a los visores actuales una capa adicional para poder mejorar el mantenimiento de tus proyectos. Y añade funcionalidades adicionales para mejorar la performance y la escalabilidad de tu código.
RxMap se basa en tres conceptos acciones , observadores y funciones para organizar tu código en pequeños bloques. Y también te permite escribir middlewares para desacoplar mejor tu código.
De facto incluye observables sobre las acciones y un store obsevable, para poder observar los cambios sobre datos que guardes.
RxMap añade una capa de abstracción sobre las librerías de mapas, esta diseñada para desacoplarte y evitarte tener que actualizar tu código con cada cambio de librerías o utilizar una mapa diferente según el entorno. Podrás centrarte en desarrollar tus funcionalidades.
RxMap te permite cargar el código en diferido cuando la utilizas para mejorar los tiempos de carga, es recomendable desplegarlo en http2.
Ventajas
- Cargar en diferido de las acciones y los observadores (Lazy Loader).
- Trabajar con observadores. (RxJs).
- Trabajar de manara asyncrona.
- Programación funcional.
- Store Observable.
- Trabaja con multiples mapas, sin cambiar tu código.
- Reutilización de código entre diferentes proyectos.
- Offline
Instalación
NPM
Npm install @rxmap\rxmap —saveCDN
<head>
<script type=‘application/javascript’ src=‘https://unpkg.com/@rxmap/rxmap@0.5.0’ defer/>
</head>Como utilizarla
Lo ideal es tener las acciones y los observadores en librerías externas, lo primero seria registrar estas librerías para poder utilizarlas
import rxLib from '@rxmap/basiclib';
registerLib(...rxLib);Una vez registradas las librerías o las acciones a utilizar. Lo primero es cargar el mapa que se quiera utilizar Y después ya se pueden invocar las acciones o observadores a utilizar.
import { RxMap } from ‘@rxmap/rxmap’;
await RxMap.load(‘leaflet’);
RxMap.create(‘mapId’,2.45,41.56,10);
RxMap.marker(2.45,41.56).popup(‘hello’);O para versión de CDN.
R.RxMap.load(‘leaflet’);
R.RxMap.create(‘mapId’,2.45,41.56,10);
R.RxMap.marker(2.45,41.56).popup(‘hello’);La primera acción que se tiene que invocar debe devolver el mapa inicial inicializado, normalmente esta acción se llama ‘create’ y debe ser sincrona, es decir no devolver una promesa. Es recomendable no anidar las llamadas a create, sino volver a hacer llamadas sobre RxMap, como se observa en los ejemplos anteriores.
Documentación
Puedes encontrar más Documentación aquí:
- Overview
- Instalar
- Como Utilizar Acciones Funciones Observadores Librerías Middlewares Observar acciones * Store
- Como crear Acciones Funciones Observadores Middlewares * Librería
- Build
Examples
Librerias
Librerías para añadir acciones y observadores:
Para añadir una nueva librería enviar un mail a rxmap@xlab.tech o realiza un pullRequest de la documentación con la libreria añadida. Para hacer un PullRequest:
- Haz un fork del repositorio.
- Haz commit y push de los cambios en tu reposition.
- Crear un PullRequest .
Mapas Soportados
Offline
El offline funciona a través de un serviceWorker que se encarga de cachear todas las peticiones para que posteriormente puedas acceder a ellas sin cobertura.
Para poder trabajar offline hay que incluir el fichero sw.js en la misma ruta donde esta RxMap. El fichero sw.js debe incluir esta linea
importScripts('https://unpkg.com/@rxmap/offlinestorage@0.4.0/dist/esm/offline-sw.js')para poder activar al serviceWorker que se encargara de cachear las peticiones.