A React components library for building maps that update in realtime.
Try the live playground at https://opensource.appbase.io/reactivemaps/playground.
- examples/now
- examples/meetupblast
- examples/heatmap
- examples/earthquake
- examples/transport
- examples/list
- examples/events
ReactiveMaps uses Google Maps underneath. You should include this script in your app's element with an API key to get access to 25,000 daily map views*.
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Your_key_here"></script>
npm install --save @appbaseio/reactivemaps
npm install --save @appbaseio/reactivebase
And then import the components
import {
ReactiveMap
} from '@appbaseio/reactivemaps';
import {
SingleList,
ReactiveBase
} from '@appbaseio/reactivebase';
ReactiveMaps provides components specific to the map interface. It comes with GeoDistanceSlider
, GeoDistanceDropdown
, PlacesSearch
and ReactiveMap
components.
ReactiveBase provides components that are generic in nature. Amongst many others, ReactiveBase
and SingleList
components belong to ReactiveBase.
Besides importing the components, there is a single CSS file that should be added in your app's <head> element along with a CSS framework of your choice. We have tested with Materialize and Bootstrap while building reactivemaps.
<link rel="stylesheet" href="node_modules/@appbaseio/reactivebase/dist/css/style.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css">
<ReactiveBase
app="map-demo"
username="mgVijsReD"
password="d67f1d62-26c5-49cb-b8b3-c6e2a6f04e74"/>
where
- app is the app name of the appbase.io app,
- username is the app's access username,
- password is the app's access password.
username:password form the credentials to access an appbase.io app.
Additionally, you can also pass type and theme props. type determines the scope of data to be accessed within the app, it defaults to the entire app. theme determines the overall look and feel. Available themes include rbc-blue
, rbc-green
, rbc-red
, rbc-orange
, rbc-yellow
and rbc-dark
.
Adding SingleList
and ReactiveMap
component inside your React component's render() method should look something like this.
<ReactiveBase ... >
<div class="row">
<div class="col-xs-6">
<SingleList
title="SingleList Sensor"
componentId="SingleListSensor"
appbaseField="group.group_city"
size={50}
showSearch={true}
/>
</div>
<div class="col-xs-6">
<ReactiveMap
title="ReactiveMap Actuator"
componentId="ReactiveMapActuator"
appbaseField="venue"
actuate={{
"SingleListSensor": { "operation": "must" }
}}
/>
</div>
</div>
</ReactiveBase>
If you don't already have a React app, we recommend checking out the starter app for getting started with ReactiveMaps.
npm install
Start the development server on port 8012
:
npm start
Examples can be accessed at http://localhost:8012/examples.
Docs can be accessed at http://localhost:8012/manual.
You can also run storybook (aka component playground) on port 9009
with
npm run storybook