appbaseio/reactivemaps

A data aware UI components library for building realtime maps

Reactivemaps

UI components for building data-driven Map UIs with Elasticsearch, OpenSearch and MongoDB Atlas Search. Website 🌐

Quickstart with ReactiveMaps.

---

Elasticsearch UI components for building data-driven Map UIs.

Get our designer templates for sketch.

Installation

ReactiveMaps is a complimentary library to ReactiveSearch. Map components require ReactiveSearch architecture and its root component to begin with. If you wish to build anything on reactivemaps, you’ll need to install reactivesearch along with it.

yarn add @appbaseio/reactivemaps @appbaseio/reactivesearch

Introduction

Reactivemaps allow you to connect your google-map component with your Elasticsearch cluster and also enables it to talk to other reactive components. Not just that, it enhances the development experience by efficiently integrating the streaming enhancements on the map component allowing you to build realtime apps with maps seamlessly.

Reactivemap efficiently evaluates the map centers dynamically as the map updates and it also allows you to search on the map as it is moved. All and all, Reactivemap offers a rich bundled experience of realtime maps with a simple-to-use API.

Concepts

1. Map component

ReactiveMaps provides map UI components. There are two flavors of Map components: ReactiveOpenStreetMap and ReactiveGoogleMap

2. Complimentary sensor components

Besides the sensor components from reactivesearch, reactivemap is compatible with two other pre-defined sensor components - GeoDistanceSlider and GeoDistanceDropdown. You can read more about them in the docs

Live Demos

A set of live demos inspired by real world apps, built with Reactivemaps.

• Airbeds - An airbnb-like booking search experience.
• Datalayers - Demo combining the dark forces of datalayer and Reactivemaps.
• Meetup Blast - A kickass meetup inspired search app built with Reactivemaps.
• Board the bus - Catch realtime bus transportation demo in action with Reactivemaps.

Documentation

The official docs for the library are at docs.appbase.io/docs/reactivesearch/v3/overview/quickstart/.

Related tooling and projects

• ReactiveSearch Everything you need to know about reactivesearch.

• appbase-js While building search UIs is dandy with Reactive Search, you might also need to add some input forms. appbase-js comes in handy there.

• dejavu allows viewing raw data within an appbase.io (or Elasticsearch) app. Soon to be released feature: An ability to import custom data from CSV and JSON files, along with a guided walkthrough on applying data mappings.

reactivemaps's Issues

stream={true} prop is not enabling streaming of data

Streaming of new updates is not working in the actuator components.

Codepen for reference: http://codepen.io/anon/pen/vgQrpp?editors=1010.

Unable to retrieve data from a markerCluster

Current marker cluster behavior when there are multiple items at the same lat, lon.

Ideally, in this case - we should pass a popover context with data from all the items to the onPopoverTrigger function.

Reference issue: tomchentw/react-google-maps#420

Query execution event should be centralized

Currently, query execution happens within sensor (local) components, actuator (possibly global) components and in Query Builder.

We would like to have a centralized query executer so that all globally relevant queries are executed from a single place like QueryBuilder middleware.

Benefits:
a. actuators can subscribe to the result events and result update events (of the query),
b. this helps us minimize the websockets footprint and avoiding duplicate network requests.

We would still keep a component specific query executor for locally relevant results (example: showing aggregation on facets, showing full-text search results)

PlacesSearch component should apply a GeoDistance query

Currently, PlacesSearch applies a match query using the input value on the specified appbaseField prop. Instead, PlacesSearch component should be using a GeoDistance query with a range of 10mi from the {lat, lng} of the input location.

There should also be a prop doNotExecuteQuery which can be set to true to prevent running any query when the inputs change.

ReactiveMap component: defaultCenter prop behavior

defaultCenter is resetting the map on every query to the initial center location. It should only set the map center initially.

PlacesSearch Issues

• Fix style for places search close button.
• It should remove query when clearing the input.

How to add popover on hover over pin

On the maps interface, how to add a popover when user hover overs a pin?

Use-case: Pins represent all the user data (checkins, reviews, different kinds of meta data), as a user - how can I add a popover functionality on hover to this lib?

Mismatch in topic aggregation values

The city shows 1200+ checkins but the category list shows values of 2, 1 and 1 (which obviously don't match)

Show current location helper in Distance based sensors

Show a current location helper in the distance field similar to how yelp does

Docs for all reactivemaps components

Extending ReactiveMaps

Example on how to extend ReactiveMaps to build a heatmap demo.

Simplifying installation steps

We should support the following options:

1. Complete CDN based dependencies (so no npming or bowering), an it just works mode.
2. npm based workflow with build dependencies just specified with a package.json single line like browserify script.js -o bundle.js -t [ babelify --presets [ es2015 react ] ]
3. npm based workflow with a webpack.config.json file.

Add popoverTTL prop in ReactiveMaps

There can be a more accessible way to auto-close popover behavior.

popoverTTL takes a Number which can be set b/w 0 and 60 (representing seconds) that the popover should be open for. The name is kept to be similar to another such prop streamTTL.

onboarding module's login is broken on firefox (on mac)

Make the reactivemap component's height to be responsive

create a starter app with browserify

Explain how to extend theming and styles

React components have a bad history[1][2] of being extensible with user specific style pre-processors. We should highlight this aspect clearly in the project, in fact, it can be a page by itself in the main docs.

Key points to highlight:

1. Show a live example of an interface styled with both Bootstrap and Material, and then explain how to switch between the two and / or use any other UI styles framework.
2. Document the class name hierarchy and naming convention used within the components so they can be extended by a user easily.
3. Show how to extend the library sass variables to affect UI theming.

[1] https://news.ycombinator.com/item?id=13053547
[2] https://news.ycombinator.com/item?id=12939651

Query Building: Should / Must

By default, components are compounded in a must clause. However, having a should clause option can be useful (case in point: Airbnb's map search feature which changes results as the user moves the map).

We should have an optional prop field that allows specifying if the component needs to be compounded with a should clause.

Mapping should be a part of init script

is there a plan for React Native support?

GeoDistance component behaviors

• add stepValue prop. Value should be floor((range.end - range.start)/2). Only applicable to GeoDistanceSlider component.
• remove size prop
• remove APIKey prop
• validate start and end props in GeoDistanceDropdown component
• defaultSelected prop should not be set by the component
• re-render storybook when unit prop is changed

Adding a component dependency prop

Sometimes, a component's data view is dependent on the current selection of other sensor components. Example: Search for venues only within the currently selected city, Search for products within the selected category.

The library should support a way to provide a dependency prop where one or more components can be added as a query dependency to the component's results.

Refactoring Reactivemaps examples

We should test for functionality and code accessibility in all the current examples.

• Removal of itemMarkup function
• Use of onData() instead of onAllData()
• Spell checks
• Prop name checks and removing any unneeded / deprecated props

Marker Popover Issues

• Popover close action should not reposition the map center
• Popover image not found should show a no pic (fixed size) and not this
• Some marker clicks reposition the map when opening a popover

Unable to change map styles

Unable to change the map styles from the ReactiveMap style select box. I believe this has been recently introduced.

How to Use Instructions

A component wise HOW-TO use instructions similar to AppbaseMap component. Can be added to README

Exposing Events

• Single click, Double click, Right click, Hover over pin, anything else that's relevant.

Map style changes repositions the map

ReactiveMap component behavior

• defaultZoom prop should be present and set to 13. Validation: accept values in range [0, 20].
• defaultCenter prop should be added. It takes in a object with lat and lng key associated with valid float numbers { lat: 37.74, lng: -122.45 }. lng can be an integer or float between [-180,180] and lat can be an integer or float between [-90, 90].
• Rename mapStyle to defaultMapStyle.
• Changing size prop should re-render the map results. Also, validate size to be between [1, 1000].
• Validate from prop to be >= 0.
• Add a prop for autoCenter.
• Rename defaultPin prop to defaultMarkerImage.
• Rename streamPin prop to streamMarkerImage.
• Rename rotateOnUpdate prop to autoMarkerPosition.
• Rename clearOnEmpty to autoMapRender.
• Rename markerCluster to setMarkerCluster.
• Rename streamActiveTime to streamTTL. streamTTL prop should be a Number that's >= 0 and <= 1000 (counted in seconds).
• Remove markerOnDelete prop.
• showPopoverOn prop should accept "click" and "mouseover" as valid values, don't need the On prefix in the values.
• For branding, always use the white bg logo irrespective of the theme and display it at the bottom right of the map, to the left of the navigation (+/-) buttons.

Directions example breaks when changing origin or destination

Directions example breaks sometimes when changing the origin or destination input fields.

Adding Map Styles as a part of the component prop

Support themes like light, dark, streets, satellite, and outdoors.

Structuring of the main.js file

Use best practices:

• Mappings should be a separate namespace inside the state. (useful when we introduce the mappings module later)
• More intuitive event names (index, update, select)

Marker color customization on streaming updates

• Use a different marker color (green) for streaming updates.

Correctly parsing geo_point when returned as an Array

Elasticsearch returns location (geo_point data type field) as either an object (with lat and lon keys) or as an Array in GeoJSON format [0: lon, 1: lat]. ReactiveMap needs to parse in the same format.

Update range slider dots to have colors matching the line next to them

Applied values that look good based on the browser dev tools styles.

Popover z-index ordering

New popovers should be created with a higher z-index value. Currently, they are ordered in reverse z-index, making new ones appear behind the existing ones.

Create a InputField Sensor

An InputField sensor can be used for writing custom queries. #25

Rename and transfer repo to appbaseio

New name: reactive-maps

Resolve Query Builder Bugs

• compound queries should use a must clause.

Geodistance sensors behavior

Use my current location option in suggestions does not work in GeoDistance sensors when defaultSelected prop is set.

Explaining how to create custom queries

1. Prop for creating custom queries,
2. How inputs are passed to the query,
3. Different examples.

Make all the examples to work

• Storybook prop re-rendering
• examples directory

ReactiveMap props behavior changes

To improve the component prop consistencies with other components and how we deal with geolocation data, we will:

• Merge containerStyle prop into componentStyle so we have a single place do add all the custom styles.
• Replace "lng" key with "lon" key in the defaultCenter prop

Map styles

• Support different map styles (light, dark, street, satellite, etc.) as a prop within Maps.

Infinite loop issue in ReactiveMap actuator while trying to change defaultCenter prop.

GoogleSearch component rename to PlacesSearch

• Remove the APIKey prop.
• CSS Style API props rename.

Fix handleOnIdle method TypeError

Error: Cannot read property 'getNorthEast' of null

ReactiveMap: Execute initial view query irrespective of setSearchAsMove prop

setSearchAsMove prop controls if the query should be re-run when the map bounds change. However, currently it also blocks the query from executing in the initial view.

The prop value should not affect the initial rendering of results. It should only affect the result rendering behavior after the fact.

UI issue with search component

The input field repositions on every character press.

Homepage layout

A static website showing a side-by-side view of the code and demo for all possible scenarios.