A React components library for building maps that update in realtime.
- Reactive Maps: Intro
- Component Playground
- Live Examples
- Getting Started
- Docs Manual
- Developing Locally
1. Reactive Maps: Intro
Reactivemaps is a React based components library for building realtime maps. It is built on top of the appbase.io realtime DB service and ships with 20+ components for Lists, Dropdowns, Numeric Range, Sliders, Data Search, Places Search, Distance Slider and Dropdowns, Calendars, Feeds and Maps.
The library is conceptually divided into two parts:
- Sensor components and
- Actuator components.
Each sensor component is purpose built for applying a specific filter on the data. For example:
SingleListsensor component applies an exact match filter based on the selected item.
RangeSlidercomponent applies a numeric range query based on hte values selected from the UI.
On or more sensor components can be configured to create a combined query context to render the results via an actuator.
ReactiveMaps comes with two actuators:
ResultList. The former displays the filtered data from individual sensor components on a map interface while the latter displays the filtered data on a simple list interface.
- The sensor / actuator design pattern allows creating complex UIs where any number of sensors can be chained together to reactively update an actuator (or even multiple actuators).
- The library handles the transformation of the UI interactions into database queries. You only need to include the components and associate each with a DB field.
- Built in live updates - Actuators can be set to update results even when the underlying data changes in the DB.
- Comes with a cleanly namespaced styles API that allows extending the existing component styles without hassle.
- Built in
Ease of Use
- Can be installed with NPM,
- Can be run in browser without including any NPM or bundlers (gulp, webpack, etc.), see a demo here,
- Works out of the box with Materialize CSS and comes with a polyfill CSS for Bootstrap. Compatibility for other frameworks can be added too.
3. Component Playground
Try the live component playground at playground. Look out for the knobs section in the playground part of the stories to tweak each prop and see the udpates.
4. Live Examples
A set of examples inspired by real world apps built with the ReactiveMaps library.
- examples/now - A checkins based discovery experience.
- examples/meetupblast - A live feed of meetup RSVPs displayed on a map.
- examples/heatmap - A hetmap example using polygons on a map.
- examples/earthquake - A historical visualization of earthquake data across the globe.
- examples/transport - A simulated transport example of buses in San Francisco.
- examples/events - An example of the events exposed by the library.
You can check all of them on the examples page.
Follow the installation guide from the official docs here.
You can try out the library live without any installation via the interactive tutorial.
6. Getting Started
Follow the getting started guide to build a Hello Maps! app from the official docs here.
7. Docs Manual
The official docs for the library are at https://opensource.appbase.io/manual.
The components are divided into two sections: * Generic UI components are at https://opensource.appbase.io/manual/v1/components. * Map based UI components are at https://opensource.appbase.io/manual/v1/map-components. * Each component’s styles API is mentioned in a separate CSS Styles API section. See here for SingleList. * You can read more about the Styles API here - https://opensource.appbase.io/reactivemaps/manual/v1/getting-started/StyleGuide.html.
TODO - Add docs for the mapping section between UI components and DB backend.
8. Developing Locally
git clone https://github.com/appbasieo/reactivemaps npm install
Start the development server on port
Examples can be accessed at https://localhost:8012/examples.
You can also start the component playground on port
npm run storybook
By adding the
manual submodule, you can access the docs locally.
git submodule init cd manual && git submodule update
Once added, the docs manual can be accessed at http://localhost:8012/manual.