Reactive Maps

A realtime components library for building reactive UIs.

Reactive Maps
Icon

Components for everything.

Build data driven lists, dropdowns, sliders, buttons, searchboxes, calendars, feeds and maps.

Icon

Chain components reactively.

A declarative syntax for reactively chaining components. Optionally, subscribe to data updates in realtime.

Icon

Works with your CSS tooling.

Introduces minimum styling, each component adheres to a simple and consistent CSS API. Comes with light and dark themes.

UI Components

Choose from all these components and more.

See it in Action

image

Meetup RSVPs

A display of meetup RSVPs filtered by city and topics. Show RSVP data in a popover when clicked on a marker.

It uses SingleList, MultiList and ReactiveMap components.

Demo Code
image

EarthQuake data from year 1900

A display of historical earthquake data across the globe filtered by places, magnitude and year.

It uses MultiList, RangeSlider and ReactiveMap components.

Demo Code
image

Live Weather Visualization

Weather data is fetched from openweathermap.org and stored in an appbase.io app. In this example, we run a GeoBoundingBox query using the boundary of the maps to fetch all such locations indexed in the app.

It uses the ReactiveMap component.

Demo Code
image

Foursquare checkins

A display of Foursquare checkins filtered by city and categories. The example uses dynamic markers depending on the type of category. It also displays the checkin info on click in a popover.

It uses SingleList, MultiList and ReactiveMap components.

Demo Code
image

Directions A->B

A direction navigation example between two places A and B. Places are searchable via a full-text search box.

It uses two PlacesSearch and oneReactiveMap components.

Demo Code
image

Heatmap for Surge Price

A heatmap view based on a simulation of frequent events, e.g. calculating the surge price in a neighborhood or city for an on-demand delivery service. It divides the area into a grid and creates a realtime GeoBoundingBox query for each cell, the frequency then visualized with a shade of color added to the cell area.

It uses the ReactiveMap component and applies a customQuery and renders a polygon layer on the onData event.

Demo Code