ContributorsLast modified on: Feb 10, 2017
metagroversiddharthlatestweb-flow

{% raw %}

ReactiveMap

ReactiveMap Image

A ReactiveMap actuator component creates a map UI widget. It is the key component for building map based experiences.

Example uses:

  • showing a map of user checkins by city and topics for powering discovery based experiences.
  • displaying restaurants filtered by a nearby distance query on a map.

Usage

<ReactiveMap
    componentId="ReactiveMapActuator"
    appbaseField="location"
    title="ReactiveMap"

    size={100}
    defaultZoom={13}
    defaultCenter={{ lat: 37.74, lng: -122.45 }}

    showMapStyles={true}
    defaultMapStyle="Standard"
    showMarkers={true}
    defaultMarkerImage="path/to/marker.png"
    setMarkerCluster={true}
    showSearchAsMove={true}
    setSearchAsMove={true}
    showPopoverOn="click"
    onPopoverTrigger={this.onPopoverTrigger}

    stream={true}
    streamTTL={5}
    streamAutoCenter={true}
    streamMarkerImage="path/to/streaming/marker.png"

    // 'actuate' defines when and how the map component should update
    actuate={{
      CitySensor: {"operation": "must"}
    }}

    // map events
    onData={this.onData}
    onIdle={this.onIdle}
    onMouseover={this.onMouseover}
    onMouseout={this.onMouseout}
    onClick={this.onClick}
    onDblclick={this.onDblclick}
    onDrag={this.onDrag}
    onDragstart={this.onDragstart}
    onDragend={this.onDragend}
    onMousemove={this.onMousemove}
    onMouseout={this.onMouseout}
    onMouseover={this.onMouseover}
    onResize={this.onResize}
    onRightclick={this.onRightclick}
    onBoundsChanged={this.onBoundsChanged}
    onCenterChanged={this.onCenterChanged}
    onProjectionChanged={this.onProjectionChanged}
    onTiltChanged={this.onTiltChanged}
    onZoomChanged={this.onZoomChanged}

    // less useful props
    autoMapRender={true}
    autoCenter={true}
    autoMarkerPosition={true}
    componentStyle={{
      height: '100%';
    }}
    containerStyle={{
      height: '700px';
    }}
/>

Props

  • componentId String
    unique id of the component, can be referenced in another actuator’s actuate prop.
  • appbaseField String
    DB data field to be mapped with the component’s UI view, usually of a geopoint (i.e. location) data type and used for rendering the markers on the map.
  • title String [optional]
    title of the component to be shown in the UI.
  • size Number [optional]
    number of results to show in the map view, can be a number in the range [1, 1000]. Defaults to 100.
  • defaultZoom Number [optional]
    preset map’s zoom level, accepts integer values between [0, 20]. 0 is the minimum zoom level, where you can see the entire globe. 20 is the maximum zoom level. Defaults to 13.
  • defaultCenter Object [optional]
    preset map’s center position by specifying an object with valid lat and lng values.
  • showMapStyles Boolean [optional]
    whether to show map styles dropdown picker in the map UI. Defaults to true.
  • defaultMapStyle String [optional]
    preset a map style for the map UI. Available options include “Standard”, “Blue Essence”, “Blue Water”, “Flat Map”, “Light Monochrome”, “Midnight Commander”, “Unsaturated Browns”.
  • showMarkers Boolean [optional]
    whether to show the markers on the map, defaults to true. Sometimes, it doesn’t make sense to display markers (when building a heatmap or weather map or a directions navigation map)
  • defaultMarkerImage String [optional]
    URL of the default marker image to be shown. It comes with a default image. Should only be set if you wish to use a custom marker.
  • setMarkerCluster Boolean [optional]
    whether to aggregate and form a cluster of nearby markers. Defaults to true.
  • showSearchAsMove Boolean [optional]
    whether to show the Search As I Move checkbox in the UI. Defaults to true.
  • setSearchAsMove Boolean [optional]
    whether to set the Search As I Move checkbox. Defaults to false.
  • showPopoverOn String [optional]
    event that triggers popover, accepts either a “click” or a “mouseover” as valid values.
  • onPopoverTrigger function [optional]
    a function that takes one argument for getting a marker’s data and returns an HTML markup to be displayed in the popover box.
  • stream Boolean [optional]
    whether to stream new result (aka realtime view) updates in the UI. Defaults to false.
  • streamTTL Number [optional]
    time to live for a just streamed update, specified in seconds. It defaults to 5 seconds.
  • streamAutoCenter Boolean [optional]
    whether to auto center the map based on the location of the streamed update. Defaults to false.
  • streamMarkerImage String [optional]
    URL of the streaming marker image to be shown. It comes with a default image that’s distinct from the defaultMarkerImage. Should be only set if you wish to use a custom marker image.
  • actuate Object an object defining the sensor components whose state change triggers an update to the map UI. You can read more here.
  • autoCenter Boolean [optional]
    whether to auto center the map based on the geometric center of all the location markers. Defaults to true.
  • autoMapRender Boolean [optional]
    whether map view should be rendered automatically. Defaults to true and is what you want most of the time. There are certain cases however where you want to re-render the map view manually.
  • autoMarkerPosition Boolean [optional]
    whether to set the rotation angle of the marker image based on the delta changes in its location, useful when displaying realtime traffic data. Defaults to false.
  • componentStyle Object [optional]
    CSS style object to be applied to the ReactiveMap component.
  • containerStyle Object [optional]
    CSS style object to be applied to the underlying GoogleMap component.
  • onData function
    event fired when one or more markers are indexed, updated or removed from the map. It takes an object with the following properties:
{
  mode: 'historic' or 'streaming',
  newData: data which is the response of xhr call or streaming data,
  currentData: Array of all existing markers data in the view (should be [] on query change),
  appliedQuery: Raw query object,
  took: time in milliseconds (optional, only applicable when mode is historic)
}

the function can return the markup to be displayed on the map (e.g. setting custom pins based on type of marker data or overlaying shapes like polygons or circles on the map).

Events

ReactiveMap Events

ReactiveMap component exposes many events to provide a good listening mechanism for building interactivity.

  • onIdle: is the event which is fired when map reached to its idle state after dragging or zooming effect. It has argument which contains
    {
    boundingBoxCoordinates: object which contains top_left, bottom_right of current map bounds,
    mapBounds: original map bounds which is returned by map
    }
    and also user can return the markup which will be append inside map (as ex. Polygon, circles, rectangles can be return using react-component ).

CSS Styles

Annotated Image

Examples

  1. ReactiveMap with all the default props.

  2. ReactiveMap with a search sensor on the map.

  3. ReactiveMap with historical and realtime data.

  4. ReactiveMap with events example.

  5. ReactiveMap with weather data.

{% endraw %}