Realtime React Map library

Examples

• https://opensource.appbase.io/reactive-maps/examples/now
• https://opensource.appbase.io/reactive-maps/examples/meetupblast/
• https://opensource.appbase.io/reactive-maps/examples/heatmap/
• https://opensource.appbase.io/reactive-maps/examples/earthquake/
• https://opensource.appbase.io/reactive-maps/examples/transport/
• https://opensource.appbase.io/reactive-maps/examples/list/

Using it

Include the map library in your html file with your key

<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=Your_key_here"></script>

Installation

npm install --save [email protected]

Import sensors and actuators from the library

import {
  ReactiveMap,
  AppbaseSearch,
  AppbaseSlider,
  AppbaseList,
  AppbaseMap,
  ListResult
} from 'reactive-maps';

library provides

• Sensors AppbaseSearch, AppbaseSlider, AppbaseList
• Actuators AppbaseMap, ListResult and ReactiveMap to set appbase configuration

Description

ReactiveMap

  <ReactiveMap config={this.props.config} />

• config is the object which contains appname, username, password, type of Appbase

{
  "appname": "map-demo",
  "username": "mgVijsReD",
  "password": "d67f1d62-26c5-49cb-b8b3-c6e2a6f04e74",
  "type": "demo"
}

AppbaseMap

<AppbaseMap
    inputData="venue"
    defaultZoom={13}
    defaultCenter={{ lat: 37.74, lng: -122.45 }}
    historicalData={true}
    markerCluster={false}
    markerOnDelete={this.markerOnDelete}
    markerOnIndex={this.markerOnIndex}
    markerOnClick={this.markerOnClick}
    markerOnDblclick={this.markerOnDblclick}
    markerOnMouseover={this.markerOnMouseover}
    markerOnMouseout={this.markerOnMouseout} 
    mapStyle="Blue Water"
    autoCenter={true}
    searchAsMoveComponent={true}
    MapStylesComponent={true}
    title="Reactive Maps"
    depends={{
      CitySensor: {"operation": "must"},
      TopicSensor: {"operation": "must", "defaultQuery": this.topicDepends},
      RangeSensor: {"operation": "must"},
      VenueSensor: {"operation": "must"}
    }} />

• inputData : string: is the name of the field which contains the latitude and longitude of the markers for which you want to plot on the map
• historicalData: Boolean: is the boolean field which on true, shows the old results and on false, will only run searchstream(). Defaulted to true
• searchComponent: "appbase" or "google": is the option for displaying the searchComponent in the Google maps. If appbase is selected, then searchField needs to be specified. Defaulted to google.
• searchField: String: is the name of the field on which Appbase location search will be enables.
• markerCluster: Boolean: is the property which decides on clustering the markers. Defaulted to true
• markerOnDelete: is the event which is fired when any element is deleted from the map. It has argument which contains the object which was deleted.
• markerOnIndexis the event which is fired when any element is added into the map. It has argument which contains the object which was indexed.
• markerOnClick, markerOnDblclick, markerOnMouseover, markerOnMouseout are the events which will be fired on click, doubleclick, mouse over, mouse out actions on markers.
• mapStyle: is the property which set the default map style. Available options for mapStyle is: "MapBox", "Blue Essence", "Blue Water", "Flat Map", "Light Monochrome", "Midnight Commander", "Unsaturated Browns".
• autoCenter: Boolean: is the property which decides whether to change center of map according to result or not.
• searchAsMoveComponent: Boolean: is the property which decides whether to include search as move (internal component) component or not.
• MapStylesComponent: Boolean: is the property which decides whether to include map style chooser component or not.
• title: string: is the property which sets the title.
• depends: object: is the property where user can specify the dependency on sensors.

ListResult

<ListResult
  markerOnIndex={this.markerOnIndex}
  requestSize={50}
  depends={{
    CitySensor: {"operation": "must"},
    TopicSensor: {"operation": "must"},
    RangeSensor: {"operation": "must"},
    VenueSensor: {"operation": "must"}
  }}
/>

• markerOnIndexis the event which is fired whenever query result is received. The event contains the result and this can be used to set the markup for result.
• requestSize: number: is the property which sets the size parameter while building the query. ListResult provides the infinite scrolling which means whenever scroll reach at the bottom it will build the next query for the further data with same request size.
• depends: object: is the property where user can specify the dependency on sensors.

AppbaseSearch

• sensorId: string: is the property where user can set unique sensorId, which can be used in the dependency of other sensors or actuator.
• inputData : string: is the name of the field on which you want to apply filter.
• placeholder: string: is the string field which decides placeholder for the search input. Default to Search...
• isGeoSearch: "Boolean": is the boolean option for whether displaying the search field as input term search or is it geoSearch. Defaulted to false
• size: number: is the number field which decides how many items needs to be displayed in the search items. Defaulted to 10.
• depends: object: is the property where user can specify the dependency on sensors.

AppbaseSearch

• sensorId: string: is the property where user can set unique sensorId, which can be used in the dependency of other sensors or actuator.
• inputData : string: is the name of the field on which you want to apply filter.
• placeholder: string: is the string field which decides placeholder for the search input. Default to Search...
• isGeoSearch: "Boolean": is the boolean option for whether displaying the search field as input term search or is it geoSearch. Defaulted to false
• size: number: is the number field which decides how many items needs to be displayed in the search items. Defaulted to 10.
• depends: object: is the property where user can specify the dependency on sensors.

AppbaseList

• sensorId: string: is the property where user can set unique sensorId, which can be used in the dependency of other sensors or actuator.
• title: string: is the property where user can set title of component.
• inputData : string: is the name of the field on which user wants to do aggregation
• size: number: is the number field which decides how many items needs to be displayed in the List. Defaulted to 60.
• showCount: "Boolean": is the boolean option for whether displaying the count along with the items. Defaulted to true.
• multipleSelect: Boolean: is the boolean option to select whether the only single item could be selected in the List or if it is multiple selectable. Defaulted to true.
• sort: count or asc or desc: is the property which decides on how the list should be sorted. count sorts the list based on the count in the desc order. asc sorts the list in the ascending order of the term (Alphabetical). desc sorts the list in the descending order of the term. Defaulted to count.
• staticSearch: boolean: is the property which decides whether to enable static search box to do filter from list or not (Only available for singleSelect).
• searchPlaceholder: string: is the property where user can specify placeholder text for searchbox.
• depends: object: is the property where user can specify the dependency on sensors.

AppbaseSlider

• sensorId: string: is the property where user can set unique sensorId, which can be used in the dependency of other sensors or actuator.
• title: string: is the property where user can set title of component.
• inputData : string: is the name of the field on which user wants to do aggregation
• minThreshold: number: is the number field which decides the minimum threshold value for the slider. Defaulted to 0.
• maxThreshold: number: is the number field which decides the maximum threshold value for the slider. Defaulted to 20.
• values: Object: is the object which has property min and max which tells the default selected value.
• depends: object: is the property where user can specify the dependency on sensors.

values: {
  min: 0,
  max: 20,
}

Define dependency on other sensors

Let's take an example if topics lists is depenedent on city selection (topic sensor is dependent on city sensor) then we should pass selected city value in topic sensor and get the topic list according to selected city.

To achieve this we should pass following things to topic sensor:

depends= {
    CitySensor: {
    "operation": "must",
    "defaultQuery": this.topicDepends
  }
}

• CitySensor: which is the sensorId of city component.
• operation: It could be should or must.
• defaultQuery: (optional) is the function if user wants to write custom query.

Elasticsearch Mapping

1. Close the Index:

curl 'http://scalr.api.appbase.io/map_demo/_close' -X POST -d '{}' -u aT29UsiAp:e0d26007-d818-4559-8244-c3c2fbad45ad -H 'Content-Type: application/json'

2. Update the settings:

curl 'http://scalr.api.appbase.io/map_demo/_settings' -X PUT -d '{
  "analysis": {
    "filter": {
      "nGram_filter": {
        "type": "edge_ngram",
        "min_gram": 1,
        "max_gram": 20,
        "token_chars": [
          "letter",
          "digit",
          "punctuation",
          "symbol"
        ]
      }
    },
    "analyzer": {
      "nGram_analyzer": {
        "type": "custom",
        "tokenizer": "whitespace",
        "filter": [
          "lowercase",
          "asciifolding",
          "nGram_filter"
        ]
      },
      "body_analyzer": {
        "type": "custom",
        "tokenizer": "standard",
        "filter": [
          "lowercase",
          "asciifolding",
          "stop",
          "snowball",
          "word_delimiter"
        ]
      },
      "standard_analyzer": {
        "type": "custom",
        "tokenizer": "standard",
        "filter": [
          "lowercase",
          "asciifolding"
        ]
      },
      "whitespace_analyzer": {
        "type": "whitespace",
        "tokenizer": "whitespace",
        "filter": [
          "lowercase",
          "asciifolding"
        ]
      }
    }
  }
}' -u aT29UsiAp:e0d26007-d818-4559-8244-c3c2fbad45ad -H 'Content-Type: application/json'

3. Open the Index:

curl 'http://scalr.api.appbase.io/map_demo/_open' -X POST -d '{}' -u aT29UsiAp:e0d26007-d818-4559-8244-c3c2fbad45ad -H 'Content-Type: application/json'

4. Update the mapping:

curl 'http://scalr.api.appbase.io/map_demo/_mapping/meetupdata1?ignore_conflicts=true&update_all_types=true' -X PUT -d '{
  "meetupdata1": {
    "properties": {
      "location": {
        "type": "geo_point"
      },
      "group": {
        "properties": {
          "group_city_new": {
            "type": "multi_field",
            "fields": {
              "group_city_simple": {
                "type": "string",
                "index": "not_analyzed"
              },
              "group_city_ngrams": {
                "type": "string",
                "analyzer": "nGram_analyzer",
                "search_analyzer": "whitespace_analyzer"
              }
            }
          },
          "group_city": {
            "type": "string",
            "fields": {
              "raw": { 
                "type":  "string",
                "index": "not_analyzed"
              }
            }
          },
          "group_topics": {
            "properties": {
              "topic_name_new": {
                "type": "multi_field",
                "fields": {
                  "topic_name_simple": {
                    "type": "string",
                    "index": "not_analyzed"
                  },
                  "topic_name_ngrams": {
                    "type": "string",
                    "analyzer": "nGram_analyzer",
                    "search_analyzer": "whitespace_analyzer"
                  }
                }
              },
              "topic_name_raw": {
                "type": "string",
                "index": "not_analyzed",
                "fields": {
                  "raw": {
                    "type": "string",
                    "index": "not_analyzed"
                  }
                }
              }
            }
          }
        }
      },
      "venue_new": {
        "type": "multi_field",
        "fields": {
          "venue_name_simple": {
            "type": "string",
            "index": "not_analyzed"
          },
          "venue_name_ngrams": {
            "type": "string",
            "analyzer": "nGram_analyzer",
            "search_analyzer": "whitespace_analyzer"
          }
        }

      }
    }

  }
}
' -u aT29UsiAp:e0d26007-d818-4559-8244-c3c2fbad45ad -H 'Content-Type: application/json'

Contributing

npm install

npm run webpack-server