Skip to content

Commit 55f235c

Browse files
metagrovermetagrover
committed
Merge branch 'dev'
2 parents 921cbf3 + 9e8e43f commit 55f235c

54 files changed

Lines changed: 2528 additions & 1959 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎README.md‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ One or more sensor components can be configured to create a combined query conte
4949

5050
### Ease of Use
5151

52-
* [Can be installed with NPM](https://opensource.appbase.io/reactive-manual/v1.0.0/getting-started/Installation.html),
52+
* [Can be installed with NPM](https://opensource.appbase.io/reactive-manual/v1/getting-started/Installation.html),
5353
* Can be run in browser without including any NPM or bundlers (gulp, webpack, etc.), see a demo [here](https://github.com/appbaseio-apps/reactivemaps-starter-app#try-in-browser-without-npm),
5454
* Works out of the box with Materialize CSS and comes with a polyfill CSS for Bootstrap. Compatibility for other frameworks can be added too.
5555

@@ -74,24 +74,24 @@ You can check all of them on the [examples page](https://opensource.appbase.io/r
7474

7575
## 5. Installation
7676

77-
Follow the installation guide from the official docs [here](https://opensource.appbase.io/reactive-manual/v1.0.0/getting-started/Installation.html).
77+
Follow the installation guide from the official docs [here](https://opensource.appbase.io/reactive-manual/v1/getting-started/Installation.html).
7878

7979
You can try out the library live without any installation via the [interactive tutorial](https://opensource.appbase.io/reactivemaps/onboarding/).
8080

8181
## 6. Getting Started
8282

83-
Follow the getting started guide to build a Hello Maps! app from the official docs [here](https://opensource.appbase.io/reactive-manual/v1.0.0/getting-started/Start.html).
83+
Follow the getting started guide to build a Hello Maps! app from the official docs [here](https://opensource.appbase.io/reactive-manual/v1/getting-started/Start.html).
8484

8585

8686
## 7. Docs Manual
8787

8888
The official docs for the library are at [https://opensource.appbase.io/reactive-manual/](https://opensource.appbase.io/reactive-manual/).
8989

9090
The components are divided into two sections:
91-
* Generic UI components are at [https://opensource.appbase.io/reactive-manual/v1.0.0/components/](https://opensource.appbase.io/reactive-manual/v1.0.0/components/).
92-
* Map based UI components are at [https://opensource.appbase.io/reactive-manual/v1.0.0/map-components/](https://opensource.appbase.io/reactive-manual/v1.0.0/map-components/).
93-
* Each component's styles API is mentioned in a separate **CSS Styles API** section. See here for [SingleList](https://opensource.appbase.io/reactive-manual/v1.0.0/components/SingleList.html#-singlelist-css-styles-api).
94-
* You can read more about the Styles API here - https://opensource.appbase.io/reactive-manual/v1.0.0/advanced/StyleGuide.html.
91+
* Generic UI components are at [https://opensource.appbase.io/reactive-manual/v1/components/](https://opensource.appbase.io/reactive-manual/v1/components/).
92+
* Map based UI components are at [https://opensource.appbase.io/reactive-manual/v1/map-components/](https://opensource.appbase.io/reactive-manual/v1/map-components/).
93+
* Each component's styles API is mentioned in a separate **CSS Styles API** section. See here for [SingleList](https://opensource.appbase.io/reactive-manual/v1/components/SingleList.html#-singlelist-css-styles-api).
94+
* You can read more about the Styles API here - https://opensource.appbase.io/reactive-manual/v1/advanced/StyleGuide.html.
9595

9696

9797
## 8. Developing Locally

‎app/actuators/ReactiveMap.js‎

Lines changed: 95 additions & 90 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,8 @@
11
/* eslint max-lines: 0 */
22
import React, { Component } from "react";
3-
import { GoogleMapLoader, GoogleMap, Marker, InfoWindow } from "react-google-maps";
4-
import MarkerClusterer from "react-google-maps/lib/addons/MarkerClusterer";
3+
import PropTypes from "prop-types";
4+
import { GoogleMap, withGoogleMap, Marker, InfoWindow } from "react-google-maps";
5+
import MarkerClusterer from "react-google-maps/lib/components/addons/MarkerClusterer";
56
import classNames from "classnames";
67
import {
78
AppbaseChannelManager as manager,
@@ -14,6 +15,16 @@ import * as ReactiveMapHelper from "../helper/ReactiveMapHelper";
1415

1516
import _ from "lodash";
1617

18+
const MapComponent = (withGoogleMap((props) => {
19+
const { children: children, onMapMounted: onMapMounted, ...allProps } = props;
20+
21+
return (
22+
<GoogleMap ref={onMapMounted} {...allProps}>
23+
{children}
24+
</GoogleMap>
25+
);
26+
}));
27+
1728
export default class ReactiveMap extends Component {
1829
constructor(props) {
1930
super(props);
@@ -279,7 +290,7 @@ export default class ReactiveMap extends Component {
279290
<InfoWindow
280291
zIndex={500}
281292
key={`${ref}_info_window`}
282-
onCloseclick={() => this.handleMarkerClose(marker)}
293+
onCloseClick={() => this.handleMarkerClose(marker)}
283294
>
284295
<div>
285296
{onPopoverTrigger}
@@ -314,7 +325,9 @@ export default class ReactiveMap extends Component {
314325
const flag = this.initialMapBoundQuery ? true : (this.applyGeoQuery ? this.applyGeoQuery : this.searchAsMove);
315326
this.setValue(boundingBoxCoordinates, flag);
316327
}
317-
this.setState(stateObj);
328+
if (!_.isEqual({mapBounds: this.state.mapBounds}, stateObj)) {
329+
this.setState(stateObj);
330+
}
318331
}
319332
}
320333

@@ -465,9 +478,9 @@ export default class ReactiveMap extends Component {
465478
const defaultFn = function() {};
466479
const events = {
467480
onClick: this.props.markerOnClick ? this.props.markerOnClick : defaultFn,
468-
onDblclick: this.props.markerOnDblclick ? this.props.markerOnDblclick : defaultFn,
469-
onMouseover: this.props.onMouseover ? this.props.onMouseover : defaultFn,
470-
onMouseout: this.props.onMouseout ? this.props.onMouseout : defaultFn
481+
onDblClick: this.props.markerOnDblClick ? this.props.markerOnDblClick : defaultFn,
482+
onMouseOver: this.props.onMouseOver ? this.props.onMouseOver : defaultFn,
483+
onMouseOut: this.props.onMouseOut ? this.props.onMouseOut : defaultFn
471484
};
472485
return (
473486
<Marker
@@ -477,9 +490,9 @@ export default class ReactiveMap extends Component {
477490
ref={ref}
478491
{...self.combineProps(hit)}
479492
onClick={() => events.onClick(hit._source)}
480-
onDblclick={() => events.onDblclick(hit._source)}
481-
onMouseover={() => events.onMouseover(hit._source)}
482-
onMouseout={() => events.onMouseout(hit._source)}
493+
onDblClick={() => events.onDblClick(hit._source)}
494+
onMouseOver={() => events.onMouseOver(hit._source)}
495+
onMouseOut={() => events.onMouseOut(hit._source)}
483496
{...popoverEvent}
484497
>
485498
{hit.showInfo ? self.renderInfoWindow(ref, hit) : null}
@@ -583,53 +596,45 @@ export default class ReactiveMap extends Component {
583596
<div className={`rbc rbc-reactivemap col s12 col-xs-12 card thumbnail ${cx}`} style={ReactiveMapHelper.mapPropsStyles(this.props.style, "component")}>
584597
{title}
585598
{showMapStyles}
586-
<GoogleMapLoader
587-
containerElement={
588-
<div
589-
className="rbc-container col s12 col-xs-12"
590-
style={ReactiveMapHelper.mapPropsStyles(this.props.style, "map", this.mapDefaultHeight)}
591-
/>
592-
}
593-
googleMapElement={
594-
<GoogleMap
595-
ref={
596-
(map) => {
597-
this.mapRef = map;
598-
}
599-
}
600-
{...centerComponent}
601-
{...ReactiveMapHelper.normalizeProps(this.props)}
602-
options = {{
603-
styles: this.state.currentMapStyle
604-
}}
605-
defaultCenter={ReactiveMapHelper.normalizeCenter(this.state.defaultCenter)}
606-
onDragstart={() => {
607-
this.handleOnDrage();
608-
this.mapEvents("onDragstart");
609-
}
610-
}
611-
onIdle={() => this.handleOnIdle()}
612-
onClick={() => this.mapEvents("onClick")}
613-
onDblclick={() => this.mapEvents("onDblclick")}
614-
onDrag={() => this.mapEvents("onDrag")}
615-
onDragend={() => this.mapEvents("onDragend")}
616-
onMousemove={() => this.mapEvents("onMousemove")}
617-
onMouseout={() => this.mapEvents("onMouseout")}
618-
onMouseover={() => this.mapEvents("onMouseover")}
619-
onResize={() => this.mapEvents("onResize")}
620-
onRightclick={() => this.mapEvents("onRightclick")}
621-
onTilesloaded={() => this.mapEvents("onTilesloaded")}
622-
onBoundsChanged={() => this.mapEvents("onBoundsChanged")}
623-
onCenterChanged={() => this.mapEvents("onCenterChanged")}
624-
onProjectionChanged={() => this.mapEvents("onProjectionChanged")}
625-
onTiltChanged={() => this.mapEvents("onTiltChanged")}
626-
onZoomChanged={() => this.mapEvents("onZoomChanged")}
627-
>
628-
{markerComponent}
629-
{this.externalData()}
630-
</GoogleMap>
631-
}
632-
/>
599+
<MapComponent
600+
onMapMounted={(ref) => {
601+
this.mapRef = ref
602+
}}
603+
containerElement={<div
604+
className="rbc-container"
605+
style={ReactiveMapHelper.mapPropsStyles(this.props.style, "map", this.mapDefaultHeight)}
606+
/>}
607+
mapElement={<div style={{ height: "100%" }} />}
608+
{...centerComponent}
609+
{...ReactiveMapHelper.normalizeProps(this.props)}
610+
options = {{
611+
styles: this.state.currentMapStyle
612+
}}
613+
defaultCenter={ReactiveMapHelper.normalizeCenter(this.state.defaultCenter)}
614+
onDragStart={() => {
615+
this.handleOnDrage();
616+
this.mapEvents("onDragStart");
617+
}}
618+
onIdle={() => this.handleOnIdle()}
619+
onClick={() => this.mapEvents("onClick")}
620+
onDblClick={() => this.mapEvents("onDblClick")}
621+
onDrag={() => this.mapEvents("onDrag")}
622+
onDragEnd={() => this.mapEvents("onDragEnd")}
623+
onMouseMove={() => this.mapEvents("onMouseMove")}
624+
onMouseOut={() => this.mapEvents("onMouseOut")}
625+
onMouseOver={() => this.mapEvents("onMouseOver")}
626+
onResize={() => this.mapEvents("onResize")}
627+
onRightClick={() => this.mapEvents("onRightClick")}
628+
onTilesLoaded={() => this.mapEvents("onTilesLoaded")}
629+
onBoundsChanged={() => this.mapEvents("onBoundsChanged")}
630+
onCenterChanged={() => this.mapEvents("onCenterChanged")}
631+
onProjectionChanged={() => this.mapEvents("onProjectionChanged")}
632+
onTiltChanged={() => this.mapEvents("onTiltChanged")}
633+
onZoomChanged={() => this.mapEvents("onZoomChanged")}
634+
>
635+
{markerComponent}
636+
{this.externalData()}
637+
</MapComponent>
633638
{showSearchAsMove}
634639
<PoweredBy />
635640
</div >
@@ -638,46 +643,46 @@ export default class ReactiveMap extends Component {
638643
}
639644

640645
ReactiveMap.propTypes = {
641-
dataField: React.PropTypes.string.isRequired,
642-
onIdle: React.PropTypes.func,
643-
onAllData: React.PropTypes.func,
644-
onData: React.PropTypes.func,
645-
onPopoverTrigger: React.PropTypes.func,
646-
setMarkerCluster: React.PropTypes.bool,
647-
autoMarkerPosition: React.PropTypes.bool,
648-
showMarkers: React.PropTypes.bool,
646+
dataField: PropTypes.string.isRequired,
647+
onIdle: PropTypes.func,
648+
onAllData: PropTypes.func,
649+
onData: PropTypes.func,
650+
onPopoverTrigger: PropTypes.func,
651+
setMarkerCluster: PropTypes.bool,
652+
autoMarkerPosition: PropTypes.bool,
653+
showMarkers: PropTypes.bool,
649654
streamTTL: ReactiveMapHelper.validation.streamTTL,
650655
popoverTTL: ReactiveMapHelper.validation.popoverTTL,
651656
size: helper.sizeValidation,
652657
from: ReactiveMapHelper.validation.fromValidation,
653-
autoMapRender: React.PropTypes.bool,
654-
style: React.PropTypes.object,
655-
autoCenter: React.PropTypes.bool,
656-
showSearchAsMove: React.PropTypes.bool,
657-
setSearchAsMove: React.PropTypes.bool,
658-
defaultMapStyle: React.PropTypes.oneOf(["Standard", "Blue Essence", "Blue Water", "Flat Map", "Light Monochrome", "Midnight Commander", "Unsaturated Browns"]),
659-
title: React.PropTypes.oneOfType([
660-
React.PropTypes.string,
661-
React.PropTypes.element
658+
autoMapRender: PropTypes.bool,
659+
style: PropTypes.object,
660+
autoCenter: PropTypes.bool,
661+
showSearchAsMove: PropTypes.bool,
662+
setSearchAsMove: PropTypes.bool,
663+
defaultMapStyle: PropTypes.oneOf(["Standard", "Blue Essence", "Blue Water", "Flat Map", "Light Monochrome", "Midnight Commander", "Unsaturated Browns"]),
664+
title: PropTypes.oneOfType([
665+
PropTypes.string,
666+
PropTypes.element
662667
]),
663-
streamAutoCenter: React.PropTypes.bool,
664-
defaultMarkerImage: React.PropTypes.string,
665-
streamMarkerImage: React.PropTypes.string,
666-
stream: React.PropTypes.bool,
668+
streamAutoCenter: PropTypes.bool,
669+
defaultMarkerImage: PropTypes.string,
670+
streamMarkerImage: PropTypes.string,
671+
stream: PropTypes.bool,
667672
defaultZoom: ReactiveMapHelper.validation.defaultZoom,
668-
applyGeoQuery: React.PropTypes.bool,
669-
showPopoverOn: React.PropTypes.oneOf(["click", "mouseover"]),
670-
defaultCenter: React.PropTypes.shape({
673+
applyGeoQuery: PropTypes.bool,
674+
showPopoverOn: PropTypes.oneOf(["click", "mouseover"]),
675+
defaultCenter: PropTypes.shape({
671676
lat: ReactiveMapHelper.validation.validCenter,
672677
lon: ReactiveMapHelper.validation.validCenter
673678
}),
674-
react: React.PropTypes.object,
675-
markerOnClick: React.PropTypes.func,
676-
markerOnDblclick: React.PropTypes.func,
677-
onMouseover: React.PropTypes.func,
678-
onMouseout: React.PropTypes.func,
679-
showMapStyles: React.PropTypes.bool,
680-
className: React.PropTypes.string
679+
react: PropTypes.object,
680+
markerOnClick: PropTypes.func,
681+
markerOnDblClick: PropTypes.func,
682+
onMouseOver: PropTypes.func,
683+
onMouseOut: PropTypes.func,
684+
showMapStyles: PropTypes.bool,
685+
className: PropTypes.string
681686
};
682687

683688
ReactiveMap.defaultProps = {
@@ -703,6 +708,6 @@ ReactiveMap.defaultProps = {
703708
};
704709

705710
ReactiveMap.contextTypes = {
706-
appbaseRef: React.PropTypes.any.isRequired,
707-
type: React.PropTypes.any.isRequired
711+
appbaseRef: PropTypes.any.isRequired,
712+
type: PropTypes.any.isRequired
708713
};

‎app/helper/ReactiveMapHelper.js‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -177,10 +177,12 @@ export const validation = {
177177
};
178178

179179
export const normalizeCenter = (center) => {
180-
if(center && center.lon) {
181-
center.lng = center.lon
180+
if (center) {
181+
const { lat } = center;
182+
const lng = center.lon || center.lng;
183+
return { lat, lng };
182184
}
183-
return center;
185+
return null;
184186
}
185187

186188
export const normalizeProps = (props) => {

0 commit comments

Comments
 (0)