From e13e630cd6e4fc0b1ff92098a28a770794c7bb9a Mon Sep 17 00:00:00 2001 From: gabrhr <73925454+gabrhr@users.noreply.github.com> Date: Wed, 20 Apr 2022 10:19:29 -0500 Subject: =?UTF-8?q?A=C3=B1adir=20plantilla?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Base para front --- .../app/containers/Maps/demos/BasicMarker.js | 38 +++++++ .../app/containers/Maps/demos/Direction.js | 56 ++++++++++ .../app/containers/Maps/demos/PopoverMarker.js | 55 ++++++++++ .../app/containers/Maps/demos/SearchLocation.js | 116 +++++++++++++++++++++ .../app/containers/Maps/demos/StreetView.js | 62 +++++++++++ .../app/containers/Maps/demos/Traffic.js | 37 +++++++ .../odiparpack/app/containers/Maps/demos/index.js | 6 ++ 7 files changed, 370 insertions(+) create mode 100644 front/odiparpack/app/containers/Maps/demos/BasicMarker.js create mode 100644 front/odiparpack/app/containers/Maps/demos/Direction.js create mode 100644 front/odiparpack/app/containers/Maps/demos/PopoverMarker.js create mode 100644 front/odiparpack/app/containers/Maps/demos/SearchLocation.js create mode 100644 front/odiparpack/app/containers/Maps/demos/StreetView.js create mode 100644 front/odiparpack/app/containers/Maps/demos/Traffic.js create mode 100644 front/odiparpack/app/containers/Maps/demos/index.js (limited to 'front/odiparpack/app/containers/Maps/demos') 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 => ( + + + +)); + +class BasicMarker extends React.Component { + render() { + return ( + } + containerElement={
} + mapElement={
} + /> + ); + } +} + +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:
, + containerElement:
, + mapElement:
, + }), + 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 => ( + + {props.directions && } + +)); + +class Direction extends React.Component { + render() { + return ( + + ); + } +} + +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 => ( + + + {props.isOpen && + + + A marked place + + + } + + +)); + +class PopoverMarker extends React.Component { + render() { + return ( + } + containerElement={
} + mapElement={
} + /> + ); + } +} + +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:
, + containerElement:
, + mapElement:
, + }), + 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 => ( + + + + + {props.markers.map((marker, index) => + + )} + +)); + +class SearchLocation extends React.Component { + render() { + return ( + + ); + } +} + +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:
, + containerElement:
, + mapElement:
, + center: { lat: 49.2853171, lng: -123.1119202 }, + }), + withScriptjs, + withGoogleMap +)(props => ( + + + +
+ OverlayView +
+ + + +)); + +class StreetView extends React.Component { + render() { + return ( + } + containerElement={
} + mapElement={
} + /> + ); + } +} + +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:
, + containerElement:
, + mapElement:
, + }), + withScriptjs, + withGoogleMap +)(props => ( + + + +)); + +class Traffic extends React.Component { + render() { + return ( + + ); + } +} + +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'; -- cgit v1.2.3