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/reactivebaseAnd 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
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent