@rxmap/basiclib NPM

@RxMap/basicLib

Libreria de acciones y observadores basicos para RxMap.

Instalación

NPM

Npm install @rxmap\basiclib —save

CDN

<head>
<script type=‘application/javascript’ src=‘https://unpkg.com/@rxmap/basiclib@1.2.1’ 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));

@babel/polyfill @babel/runtime core-js jsdom rxjs url-polyfill

@everything-registry/sub-chunk-795 @zalastax/nolb-_rx @infinitebrahmanuniverse/nolb-_rx

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago