Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
new: example for google-map-react/google-map-react#6 fix
- Loading branch information
Showing
9 changed files
with
142 additions
and
16 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -12,4 +12,5 @@ web/log_inotify.txt | |
| /node_modules | ||
| /data | ||
| npm-debug.log | ||
| /api | ||
| /api | ||
| /web/tmp | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import React, {PropTypes, Component} from 'react/addons'; | ||
| import shouldPureComponentUpdate from 'react-pure-render/function'; | ||
|
|
||
| import {greatPlaceStyle} from './my_great_place_styles.js'; | ||
|
|
||
| export default class MyGreatPlace extends Component { | ||
| static propTypes = { | ||
| text: PropTypes.string | ||
| }; | ||
|
|
||
| static defaultProps = {}; | ||
|
|
||
| shouldComponentUpdate = shouldPureComponentUpdate; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <div style={greatPlaceStyle}> | ||
| {this.props.text} | ||
| </div> | ||
| ); | ||
| } | ||
| } |
23 changes: 23 additions & 0 deletions
23
web/flux/components/examples/x_options/my_great_place_styles.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| const K_WIDTH = 40; | ||
| const K_HEIGHT = 40; | ||
|
|
||
| const greatPlaceStyle = { | ||
| // initially any map object has left top corner at lat lng coordinates | ||
| // it's on you to set object origin to 0,0 coordinates | ||
| position: 'absolute', | ||
| width: K_WIDTH, | ||
| height: K_HEIGHT, | ||
| left: -K_WIDTH / 2, | ||
| top: -K_HEIGHT / 2, | ||
|
|
||
| border: '5px solid #f44336', | ||
| borderRadius: K_HEIGHT, | ||
| backgroundColor: 'white', | ||
| textAlign: 'center', | ||
| color: '#3f51b5', | ||
| fontSize: 16, | ||
| fontWeight: 'bold', | ||
| padding: 4 | ||
| }; | ||
|
|
||
| export {greatPlaceStyle}; |
60 changes: 60 additions & 0 deletions
60
web/flux/components/examples/x_options/options_map_page.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,60 @@ | ||
| /* | ||
| * Base Google Map example | ||
| */ | ||
| import React, {PropTypes, Component} from 'react/addons'; | ||
| import shouldPureComponentUpdate from 'react-pure-render/function'; | ||
|
|
||
| import GoogleMap from 'google-map-react'; | ||
| import MyGreatPlace from './my_great_place.jsx'; | ||
|
|
||
| function createMapOptions(maps) { | ||
| // next props are exposed at maps | ||
| // "Animation", "ControlPosition", "MapTypeControlStyle", "MapTypeId", | ||
| // "NavigationControlStyle", "ScaleControlStyle", "StrokePosition", "SymbolPath", "ZoomControlStyle", | ||
| // "DirectionsStatus", "DirectionsTravelMode", "DirectionsUnitSystem", "DistanceMatrixStatus", | ||
| // "DistanceMatrixElementStatus", "ElevationStatus", "GeocoderLocationType", "GeocoderStatus", "KmlLayerStatus", | ||
| // "MaxZoomStatus", "StreetViewStatus", "TransitMode", "TransitRoutePreference", "TravelMode", "UnitSystem" | ||
| return { | ||
| zoomControlOptions: { | ||
| position: maps.ControlPosition.RIGHT_CENTER, | ||
| style: maps.ZoomControlStyle.SMALL | ||
| }, | ||
| mapTypeControlOptions: { | ||
| position: maps.ControlPosition.TOP_RIGHT | ||
| }, | ||
| mapTypeControl: true | ||
| }; | ||
| } | ||
|
|
||
| export default class SimpleMapPage extends Component { | ||
| static propTypes = { | ||
| center: PropTypes.array, | ||
| zoom: PropTypes.number, | ||
| greatPlaceCoords: PropTypes.any | ||
| }; | ||
|
|
||
| static defaultProps = { | ||
| center: [59.938043, 30.337157], | ||
| zoom: 9, | ||
| greatPlaceCoords: {lat: 59.724465, lng: 30.080121} | ||
| }; | ||
|
|
||
| shouldComponentUpdate = shouldPureComponentUpdate; | ||
|
|
||
| constructor(props) { | ||
| super(props); | ||
| } | ||
|
|
||
| render() { | ||
| return ( | ||
| <GoogleMap | ||
| // apiKey={YOUR_GOOGLE_MAP_API_KEY} // set if you need stats etc ... | ||
| center={this.props.center} | ||
| zoom={this.props.zoom} | ||
| options={createMapOptions}> | ||
| <MyGreatPlace lat={59.955413} lng={30.337844} text={'A'} /* Kreyser Avrora */ /> | ||
| <MyGreatPlace {...this.props.greatPlaceCoords} text={'B'} /* road circle */ /> | ||
| </GoogleMap> | ||
| ); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters