mirror of
https://github.com/google-map-react/google-map-react.git
synced 2025-12-08 18:26:32 +00:00
Revert "Added feature: update heat map on data change + fix linting" (#679)
* Revert "Bump version to 1.1.0 (#671)" This reverts commit 1603e3afea4cd0fdb88e7b5479f1f3321908afb4. * Revert "Added feature: update heat map on data change + fix linting (#593)" This reverts commit 1ce8726fda4cd56694680051125dd107c2817528.
This commit is contained in:
Michael Diego
GitHub
parent
1603e3afea
commit
d8d9dc3b63
89
API.md
89
API.md
@ -81,7 +81,6 @@ createMapOptions: function (maps) {
|
||||
|
||||
<GoogleMap options={createMapOptions} ... />
|
||||
```
|
||||
|
||||
See "Custom map options example" in Examples below for a further example.
|
||||
See full options at [Google Maps Javascript API docs](https://developers.google.com/maps/documentation/javascript/controls#ControlOptions)
|
||||
|
||||
@ -95,20 +94,19 @@ The `event` prop in args is the outer div onClick event, not the gmap-api 'click
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
_onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event)
|
||||
// ES5 users
|
||||
function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);}
|
||||
```javascript
|
||||
_onClick = ({x, y, lat, lng, event}) => console.log(x, y, lat, lng, event)
|
||||
// ES5 users
|
||||
function _onClick(obj){ console.log(obj.x, obj.y, obj.lat, obj.lng, obj.event);}
|
||||
|
||||
<GoogleMap onClick={_onClick} ... />
|
||||
```
|
||||
<GoogleMap onClick={_onClick} ... />
|
||||
```
|
||||
|
||||
#### onBoundsChange (func) (_Deprecated use onChange_)
|
||||
|
||||
```
|
||||
({ center, zoom, bounds, marginBounds })
|
||||
```
|
||||
|
||||
```
|
||||
[lat, lng] = center;
|
||||
[topLat, leftLng, bottomLat, rightLng] = bounds;
|
||||
@ -133,7 +131,6 @@ Default: false
|
||||
#### onZoomAnimationEnd (func)
|
||||
|
||||
#### onMapTypeIdChange (func)
|
||||
|
||||
When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fires
|
||||
|
||||
#### distanceToMouse (func)
|
||||
@ -141,21 +138,22 @@ When the user changes the map type (HYBRID, ROADMAP, SATELLITE, TERRAIN) this fi
|
||||
#### googleMapLoader (func)
|
||||
|
||||
#### onGoogleApiLoaded (func)
|
||||
|
||||
Directly access the maps API - _use at your own risk!_
|
||||
Directly access the maps API - *use at your own risk!*
|
||||
|
||||
#### onTilesLoaded (func)
|
||||
This function is called when the visible tiles have finished loading.
|
||||
|
||||
```javascript
|
||||
<GoogleMap onGoogleApiLoaded={({ map, maps }) => console.log(map, maps)} />
|
||||
<GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)} />
|
||||
```
|
||||
|
||||
To prevent warning message add _yesIWantToUseGoogleMapApiInternals_ property to GoogleMap
|
||||
|
||||
```javascript
|
||||
<GoogleMap onGoogleApiLoaded={({ map, maps }) => console.log(map, maps)} yesIWantToUseGoogleMapApiInternals />
|
||||
```
|
||||
<GoogleMap onGoogleApiLoaded={({map, maps}) => console.log(map, maps)}
|
||||
yesIWantToUseGoogleMapApiInternals
|
||||
/>
|
||||
```
|
||||
|
||||
#### overlayViewDivStyle (object)
|
||||
|
||||
@ -166,19 +164,15 @@ Add custom style to `div` (marker container element) created by OverlayView, for
|
||||
### parameters
|
||||
|
||||
#### lat (number)
|
||||
|
||||
Latitude to place the marker component
|
||||
|
||||
#### lng (number)
|
||||
|
||||
Longitude to place the marker component
|
||||
|
||||
#### $hover (bool) [automatic]
|
||||
|
||||
GoogleMap passes a $hover prop to hovered components. To detect hover it an uses internal mechanism, explained in x_distance_hover example
|
||||
|
||||
Example:
|
||||
|
||||
```javascript
|
||||
render() {
|
||||
const style = this.props.$hover ? greatPlaceStyleHover : greatPlaceStyle;
|
||||
@ -189,13 +183,13 @@ render() {
|
||||
</div>
|
||||
);
|
||||
}
|
||||
```
|
||||
```
|
||||
|
||||
|
||||
## Utility functions
|
||||
|
||||
#### fitBounds (func)
|
||||
|
||||
Use fitBounds to get zoom and center.
|
||||
Use fitBounds to get zoom and center.
|
||||
|
||||
Example:
|
||||
|
||||
@ -228,10 +222,10 @@ const bounds = {
|
||||
|
||||
const size = {
|
||||
width: 640, // Map width in pixels
|
||||
height: 380 // Map height in pixels
|
||||
height: 380, // Map height in pixels
|
||||
};
|
||||
|
||||
const { center, zoom } = fitBounds(bounds, size);
|
||||
const {center, zoom} = fitBounds(bounds, size);
|
||||
```
|
||||
|
||||
#### tile2LatLng (func)
|
||||
@ -291,15 +285,15 @@ export default class SearchBox extends React.Component {
|
||||
static propTypes = {
|
||||
placeholder: React.PropTypes.string,
|
||||
onPlacesChanged: React.PropTypes.func
|
||||
};
|
||||
}
|
||||
render() {
|
||||
return <input ref="input" {...this.props} type="text" />;
|
||||
return <input ref="input" {...this.props} type="text"/>;
|
||||
}
|
||||
onPlacesChanged = () => {
|
||||
if (this.props.onPlacesChanged) {
|
||||
this.props.onPlacesChanged(this.searchBox.getPlaces());
|
||||
}
|
||||
};
|
||||
}
|
||||
componentDidMount() {
|
||||
var input = ReactDOM.findDOMNode(this.refs.input);
|
||||
this.searchBox = new google.maps.places.SearchBox(input);
|
||||
@ -321,14 +315,14 @@ and if so, uses it, so it won't load a second copy of the library.
|
||||
|
||||
### Override the default minimum zoom
|
||||
|
||||
_WARNING_: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map.
|
||||
*WARNING*: Setting this option can break markers calculation, causing no homeomorphism between screen coordinates and map.
|
||||
|
||||
You can use the `minZoom` custom option to prevent our minimum-zoom calculation:
|
||||
|
||||
```javascript
|
||||
function createMapOptions() {
|
||||
return {
|
||||
minZoom: 2
|
||||
minZoom: 2,
|
||||
};
|
||||
}
|
||||
```
|
||||
@ -343,7 +337,7 @@ To resolve this ambigiuity, you can use the custom map option `gestureHandling`
|
||||
function createMapOptions() {
|
||||
return {
|
||||
gestureHandling: 'greedy' // Will capture all touch events on the map towards map panning
|
||||
};
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
@ -359,41 +353,20 @@ For enabling heatmap layer, just add `heatmapLibrary={true}` and provide data fo
|
||||
|
||||
```javascript
|
||||
<GoogleMapReact
|
||||
bootstrapURLKeys={{ key: [YOUR_KEY] }}
|
||||
zoom={zoom}
|
||||
center={center}
|
||||
heatmapLibrary={true}
|
||||
heatmap={{ data }}
|
||||
>
|
||||
{markers}
|
||||
</GoogleMapReact>
|
||||
bootstrapURLKeys={{ key: [YOUR_KEY] }}
|
||||
zoom={zoom}
|
||||
center={center}
|
||||
heatmapLibrary={true}
|
||||
heatmap={{data}}
|
||||
>
|
||||
{markers}
|
||||
</GoogleMapReact>
|
||||
```
|
||||
|
||||
#### Update heatmap during runtime
|
||||
|
||||
The heatmap can be updated with new positions or with new settings (radius, zoom, ...) during the lifecycle of the `GoogleMapReact` component. This can be done by setting the prop `updateHeatmap` to true. Which will let the heatmap know it has to rerender itself.
|
||||
|
||||
#### Important Note
|
||||
|
||||
If you have multiple `GoogleMapReact` components in project and you want to use heatmap layer so provide `heatmapLibrary={true}` for all `GoogleMapReact` components so component will load heatmap library at the beginning with google map api.
|
||||
|
||||
### Other libraries
|
||||
|
||||
Some features of the Google Map Api are available through _libraries_, which are not loaded by default. Offering those components as optional libraries allow the main api to load quickly.
|
||||
|
||||
In order to use one of the optional libraries, specify one of the following props in the `GoogleMapReact` component. Multiple libraries can be specified at the time.
|
||||
|
||||
**Drawing library:** `drawingLibrary={true}`
|
||||
|
||||
**Geometry library:** `geometryLibrary={true}`
|
||||
|
||||
**Heatmap library:** `heatmapLibrary={true}`
|
||||
|
||||
See [Google documentation](https://developers.google.com/maps/documentation/javascript/libraries) for more info about those libraries.
|
||||
|
||||
The library can be used after setting the prop `onGoogleApiLoaded`, which allows to directly access the maps API - _use at your own risk!_
|
||||
The library is than accessable through the `google.maps.{libraryName}` namespace.
|
||||
|
||||
### Localizing the Map
|
||||
|
||||
This is done by setting bootstrapURLKeys.[language](https://developers.google.com/maps/documentation/javascript/localization#Language) and bootstrapURLKeys.[region](https://developers.google.com/maps/documentation/javascript/localization#Region). Also notice that setting region to 'cn' is required when using the map from within China, see [google documentation](https://developers.google.com/maps/documentation/javascript/localization#GoogleMapsChina) for more info. Setting 'cn' will result in use of the specific API URL for China.
|
||||
|
||||
@ -155,12 +155,7 @@ export default class GoogleMap extends Component {
|
||||
},
|
||||
layerTypes: [],
|
||||
heatmap: {},
|
||||
libraries: {
|
||||
visualization: false,
|
||||
geometry: false,
|
||||
places: false,
|
||||
drawing: false,
|
||||
},
|
||||
heatmapLibrary: false,
|
||||
};
|
||||
|
||||
static googleMapLoader = googleMapLoader; // eslint-disable-line
|
||||
@ -271,14 +266,8 @@ export default class GoogleMap extends Component {
|
||||
...(this.props.apiKey && { key: this.props.apiKey }),
|
||||
...this.props.bootstrapURLKeys,
|
||||
};
|
||||
const libraries = {
|
||||
visualization: this.props.heatmapLibrary,
|
||||
geometry: this.props.geometryLibrary,
|
||||
places: this.props.placesLibrary,
|
||||
drawing: this.props.drawingLibrary,
|
||||
};
|
||||
this.props.googleMapLoader(bootstrapURLKeys, libraries);
|
||||
// we can start load immediatly
|
||||
|
||||
this.props.googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary); // we can start load immediatly
|
||||
|
||||
setTimeout(
|
||||
() => {
|
||||
@ -314,10 +303,6 @@ export default class GoogleMap extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
if (nextProps.updateHeatmap) {
|
||||
setTimeout(() => optionsHeatmap(this.heatmap, nextProps.heatmap));
|
||||
}
|
||||
|
||||
if (
|
||||
!this._isCenterDefined(this.props.center) &&
|
||||
this._isCenterDefined(nextProps.center)
|
||||
@ -515,14 +500,9 @@ export default class GoogleMap extends Component {
|
||||
...(this.props.apiKey && { key: this.props.apiKey }),
|
||||
...this.props.bootstrapURLKeys,
|
||||
};
|
||||
const libraries = {
|
||||
visualization: this.props.heatmapLibrary,
|
||||
geometry: this.props.geometryLibrary,
|
||||
places: this.props.placesLibrary,
|
||||
drawing: this.props.drawingLibrary,
|
||||
};
|
||||
|
||||
this.props
|
||||
.googleMapLoader(bootstrapURLKeys, libraries)
|
||||
.googleMapLoader(bootstrapURLKeys, this.props.heatmapLibrary)
|
||||
.then(maps => {
|
||||
if (!this.mounted_) {
|
||||
return;
|
||||
|
||||
@ -20,7 +20,7 @@ const _customPromise = new Promise(resolve => {
|
||||
});
|
||||
|
||||
// TODO add libraries language and other map options
|
||||
export default (bootstrapURLKeys, libraries) => {
|
||||
export default (bootstrapURLKeys, heatmapLibrary) => {
|
||||
if (!$script_) {
|
||||
$script_ = require('scriptjs'); // eslint-disable-line
|
||||
}
|
||||
@ -71,20 +71,10 @@ export default (bootstrapURLKeys, libraries) => {
|
||||
);
|
||||
|
||||
const baseUrl = getUrl(bootstrapURLKeys.region);
|
||||
const librariesUrl = Object.keys(libraries)
|
||||
.reduce(
|
||||
(libraryUrl, libraryKey) => {
|
||||
if (libraries[libraryKey]) {
|
||||
return `${libraryUrl}${libraryKey},`;
|
||||
}
|
||||
return libraryUrl;
|
||||
},
|
||||
'&libraries='
|
||||
)
|
||||
.slice(0, -1);
|
||||
const libraries = heatmapLibrary ? '&libraries=visualization' : '';
|
||||
|
||||
$script_(
|
||||
`${baseUrl}${API_PATH}${params}${librariesUrl}`,
|
||||
`${baseUrl}${API_PATH}${params}${libraries}`,
|
||||
() =>
|
||||
typeof window.google === 'undefined' &&
|
||||
reject(new Error('google map initialization error (not loaded)'))
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user