diff options
Diffstat (limited to 'front/odiparpack/app/containers/Maps/demos')
7 files changed, 370 insertions, 0 deletions
diff --git a/front/odiparpack/app/containers/Maps/demos/BasicMarker.js b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js new file mode 100644 index 0000000..7577923 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/BasicMarker.js @@ -0,0 +1,38 @@ +import React from 'react'; +import { compose } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, +} from 'react-google-maps'; + +const MapWithAMarker = compose( + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + defaultZoom={8} + defaultCenter={{ lat: -34.397, lng: 150.644 }} + > + <Marker + position={{ lat: -34.397, lng: 150.644 }} + /> + </GoogleMap> +)); + +class BasicMarker extends React.Component { + render() { + return ( + <MapWithAMarker + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default BasicMarker; diff --git a/front/odiparpack/app/containers/Maps/demos/Direction.js b/front/odiparpack/app/containers/Maps/demos/Direction.js new file mode 100644 index 0000000..8867466 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/Direction.js @@ -0,0 +1,56 @@ +/* eslint-disable no-undef */ +import React from 'react'; +import { compose, withProps, lifecycle } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + DirectionsRenderer, +} from 'react-google-maps'; + +const MapWithADirectionsRenderer = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + withScriptjs, + withGoogleMap, + lifecycle({ + componentDidMount() { + const DirectionsService = new google.maps.DirectionsService(); + + DirectionsService.route({ + origin: new google.maps.LatLng(41.8507300, -87.6512600), + destination: new google.maps.LatLng(41.8525800, -87.6514100), + travelMode: google.maps.TravelMode.DRIVING, + }, (result, status) => { + if (status === google.maps.DirectionsStatus.OK) { + this.setState({ + directions: result, + }); + } else { + console.error(`error fetching directions ${result}`); + } + }); + } + }) +)(props => ( + <GoogleMap + defaultZoom={8} + defaultCenter={new google.maps.LatLng(41.8507300, -87.6512600)} + > + {props.directions && <DirectionsRenderer directions={props.directions} />} + </GoogleMap> +)); + +class Direction extends React.Component { + render() { + return ( + <MapWithADirectionsRenderer /> + ); + } +} + +export default Direction; diff --git a/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js new file mode 100644 index 0000000..9a07f11 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/PopoverMarker.js @@ -0,0 +1,55 @@ +import React from 'react'; +import { compose, withStateHandlers } from 'recompose'; +import LocalDining from '@material-ui/icons/LocalDining'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, + InfoWindow +} from 'react-google-maps'; + +const MapWithAMakredInfoWindow = compose( + withStateHandlers(() => ({ + isOpen: false, + }), { + onToggleOpen: ({ isOpen }) => () => ({ + isOpen: !isOpen, + }) + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + defaultZoom={8} + defaultCenter={{ lat: -34.397, lng: 150.644 }} + > + <Marker + position={{ lat: -34.397, lng: 150.644 }} + onClick={props.onToggleOpen} + > + {props.isOpen && + <InfoWindow onCloseClick={props.onToggleOpen}> + <span> + <LocalDining /> A marked place + </span> + </InfoWindow> + } + </Marker> + </GoogleMap> +)); + +class PopoverMarker extends React.Component { + render() { + return ( + <MapWithAMakredInfoWindow + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default PopoverMarker; diff --git a/front/odiparpack/app/containers/Maps/demos/SearchLocation.js b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js new file mode 100644 index 0000000..16449d0 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/SearchLocation.js @@ -0,0 +1,116 @@ +import React from 'react'; +import { compose, withProps, lifecycle } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + Marker, +} from 'react-google-maps'; +import { SearchBox } from 'react-google-maps/lib/components/places/SearchBox'; +const _ = require('lodash'); + +const MapWithASearchBox = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + lifecycle({ + componentWillMount() { + const refs = {}; + + this.setState({ + bounds: null, + center: { + lat: 41.9, lng: -87.624 + }, + markers: [], + onMapMounted: ref => { + refs.map = ref; + }, + onBoundsChanged: () => { + this.setState({ + bounds: refs.map.getBounds(), + center: refs.map.getCenter(), + }); + }, + onSearchBoxMounted: ref => { + refs.searchBox = ref; + }, + onPlacesChanged: () => { + const places = refs.searchBox.getPlaces(); + const bounds = new google.maps.LatLngBounds(); // eslint-disable-line + + places.forEach(place => { + if (place.geometry.viewport) { + bounds.union(place.geometry.viewport); + } else { + bounds.extend(place.geometry.location); + } + }); + const nextMarkers = places.map(place => ({ + position: place.geometry.location, + })); + const nextCenter = _.get(nextMarkers, '0.position', this.state.center); + + this.setState({ + center: nextCenter, + markers: nextMarkers, + }); + // refs.map.fitBounds(bounds); + }, + }); + }, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + ref={props.onMapMounted} + defaultZoom={15} + center={props.center} + onBoundsChanged={props.onBoundsChanged} + > + <SearchBox + ref={props.onSearchBoxMounted} + bounds={props.bounds} + controlPosition={google.maps.ControlPosition.TOP_LEFT} // eslint-disable-line + onPlacesChanged={props.onPlacesChanged} + > + <input + type="text" + placeholder="Customized your placeholder" + style={{ + boxSizing: 'border-box', + border: '1px solid transparent', + width: '240px', + height: '32px', + marginTop: '7px', + marginLeft: '10px', + padding: '0 12px', + borderRadius: '3px', + background: '#FAFAFA', + boxShadow: '0 2px 6px rgba(0, 0, 0, 0.3)', + fontSize: '14px', + outline: 'none', + textOverflow: 'ellipses', + }} + /> + </SearchBox> + {props.markers.map((marker, index) => + <Marker key={index.toString()} position={marker.position} /> + )} + </GoogleMap> +)); + +class SearchLocation extends React.Component { + render() { + return ( + <MapWithASearchBox /> + ); + } +} + +export default SearchLocation; diff --git a/front/odiparpack/app/containers/Maps/demos/StreetView.js b/front/odiparpack/app/containers/Maps/demos/StreetView.js new file mode 100644 index 0000000..a8d3108 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/StreetView.js @@ -0,0 +1,62 @@ +import React from 'react'; +import { compose, withProps } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + StreetViewPanorama, + OverlayView, +} from 'react-google-maps'; + +const getPixelPositionOffset = (width, height) => ({ + x: -(width / 2), + y: -(height / 2), +}); + +const MapWithAMarker = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + center: { lat: 49.2853171, lng: -123.1119202 }, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap defaultZoom={8} defaultCenter={props.center}> + <StreetViewPanorama defaultPosition={props.center} visible> + <OverlayView + position={{ lat: 49.28590291211115, lng: -123.11248166065218 }} + mapPaneName={OverlayView.OVERLAY_LAYER} + getPixelPositionOffset={getPixelPositionOffset} + > + <div + style={{ + background: 'red', + color: 'white', + padding: 5, + borderRadius: '50%' + }} + > + OverlayView + </div> + </OverlayView> + </StreetViewPanorama> + </GoogleMap> +)); + +class StreetView extends React.Component { + render() { + return ( + <MapWithAMarker + googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places" + loadingElement={<div style={{ height: '100%' }} />} + containerElement={<div style={{ height: '400px' }} />} + mapElement={<div style={{ height: '100%' }} />} + /> + ); + } +} + +export default StreetView; diff --git a/front/odiparpack/app/containers/Maps/demos/Traffic.js b/front/odiparpack/app/containers/Maps/demos/Traffic.js new file mode 100644 index 0000000..0f5cdfd --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/Traffic.js @@ -0,0 +1,37 @@ +import React from 'react'; +import { compose, withProps } from 'recompose'; +import { + withScriptjs, + withGoogleMap, + GoogleMap, + TrafficLayer, +} from 'react-google-maps'; + +const MapWithATrafficLayer = compose( + withProps({ + googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places', + loadingElement: <div style={{ height: '100%' }} />, + containerElement: <div style={{ height: '400px' }} />, + mapElement: <div style={{ height: '100%' }} />, + }), + withScriptjs, + withGoogleMap +)(props => ( + <GoogleMap + {...props} + defaultZoom={8} + defaultCenter={{ lat: 41.9, lng: -87.624 }} + > + <TrafficLayer autoUpdate /> + </GoogleMap> +)); + +class Traffic extends React.Component { + render() { + return ( + <MapWithATrafficLayer /> + ); + } +} + +export default Traffic; diff --git a/front/odiparpack/app/containers/Maps/demos/index.js b/front/odiparpack/app/containers/Maps/demos/index.js new file mode 100644 index 0000000..33e8376 --- /dev/null +++ b/front/odiparpack/app/containers/Maps/demos/index.js @@ -0,0 +1,6 @@ +export BasicMarker from './BasicMarker'; +export PopoverMarker from './PopoverMarker'; +export Direction from './Direction'; +export SearchLocation from './SearchLocation'; +export Traffic from './Traffic'; +export StreetView from './StreetView'; |