@rxmap/basiclib
v1.3.0
Published
Libreria de funciones basicas para rxMap
Downloads
45
Readme
@RxMap/basicLib
Libreria de acciones y observadores basicos para RxMap.
Instalación
NPM
Npm install @rxmap\basiclib —saveCDN
<head>
<script type=‘application/javascript’ src=‘https://unpkg.com/@rxmap/[email protected]’ defer/>
</head>
Nombre de la librearia: RxMapsBasicLib
Soporta las siguientes librerias de Mapas:
Acciones
create:
Permite crear un mapa basico, pasandole lat, long y zoom
RxMap.create('map', 51.505, -0.09, 13);marker:
Permite crear un marcador en un punto concreto Se le puede pasar el icono y el tamaño del icono a mostrar como marcador
RxMap.marker({ lat: 52.1, lng: -0.09 },{},{test:'asfdaf'}); RxMap.observer('click') .marker((data => ({ lat: data.lat, lng: data.lng }))) .subscribe(data => console.log(data));point:
Permite añadir un punto ( circulo ) en un punto concreto. se le puden pasar los estilos con el que se quiere pintar.
RxMap.point({ lat: 52.1, lng: -0.09 },{fillColor:'#ff'});popup:
Permite añadir un popup a un marker o un point. y mostar la infromación que se quiera.
RxMap.marker({ lat: 51.5, lng: -0.09 }) .popup('adios Mundo'); RxMap.marker({ lat: 52.1, lng: -0.09 },{},{test:'asfdaf'}) .popup(props => `<br> Esto es un ejemplo <b>${props.test}</b>`);find: Permite buscar objetos por sus atributos o por su geometria, soporta regex al buscar por atributos
RxMap.find('position',{lat:3,lng:4}).subscribe((res)=>console.log()) RxMap.find('test','').subscribe((res)=>console.log())remove: Permite borrar objetos puedes borrar desde una busqueda o se pueden borrar todos. Si se hacen desde una busqueda es necesario añadir true como tercer parametro en la funcion find
RxMap.find('position',{lat:3,lng:4},true).remove();Borrar Todos
RxMap.remove(true);update: Permite actualizar la posicion de los elementos, sus propiedades o su estilo. Si se hacen desde una busqueda es necesario añadir true como tercer parametro en la funcion find
update acepta un objecto con las siguientes opciones point, style, properties, las opciones son opcionales. En stye se puede pasar un objeto con el stilo o un texto con el nombre de un data Type
RxMap.find('@rxmapDataType', 'test', true).update({ style: 'pre' }); RxMap.find('id', 'prueba', true).update({ style: 'pre' });setCenter:
Permite mover el mapa a un punto que se quiera.
RxMap.observer('gps') .pipe(take(1)) .setCenter(res => ({ lat: res.latitude, lng: res.longitude })) .subscribe(data => console.log('GPS', data));addData:
Permite añadir datos al mapa en lote ( marker, points) con un mismo estilo.
RxMap.addData('mar', dataMar); RxMap.addData('test', dataTest).popup(props => `<br> Esto es un ejemplo <b>${props.test}</b>`); RxMap.addData('pre', dataPre) .observer('click') .subscribe(data => console.log('subscribe CLICK DATA PRE', data));
Observadores
center:
Permite observar cuando se mueve el mapa.
RxMap.observer('center') .pipe(take(5)) .subscribe(data => console.log('subscribe Center', data));click:
Permite observar cuando se hace click sobre el mapa, o un marker o un point.
RxMap.observer('click') .marker((data => ({ lat: data.lat, lng: data.lng }))) .subscribe(data => console.log('subscribe CLICK', data)); RxMap.addData('pre', dataPre) .observer('click') .subscribe(data => console.log('subscribe CLICK DATA PRE', data));gps:
Permite observar el gps del dispositivo.
RxMap.observer('gps') .pipe(take(1)) .setCenter(res => ({ lat: res.latitude, lng: res.longitude })) .subscribe(data => console.log('GPS', data));