From 7bd8c768feed49809ab6d4372c542371945759f1 Mon Sep 17 00:00:00 2001
From: Thomas Hermann <novascreen@gmail.com>
Date: Mon, 27 Feb 2017 21:28:18 -0500
Subject: [PATCH] feat(StreetViewPanorama): add OverlayView to example

---
 .../pages/basics/StreetViewPanoramaExample.js | 28 +++++++++++++++++--
 1 file changed, 26 insertions(+), 2 deletions(-)

diff --git a/src/app/pages/basics/StreetViewPanoramaExample.js b/src/app/pages/basics/StreetViewPanoramaExample.js
index 5f9d8b7f..541c47da 100644
--- a/src/app/pages/basics/StreetViewPanoramaExample.js
+++ b/src/app/pages/basics/StreetViewPanoramaExample.js
@@ -8,10 +8,24 @@ import {
   withGoogleMap,
   GoogleMap,
   StreetViewPanorama,
+  OverlayView,
 } from "../../../lib";
 
 const coordinates = { lat: 49.2853171, lng: -123.1119202 };
 
+const STYLES = {
+  overlayView: {
+    background: `red`,
+    color: `white`,
+    padding: 5,
+    borderRadius: `50%`,
+  },
+};
+
+function getPixelPositionOffset(width, height) {
+  return { x: -(width / 2), y: -(height / 2) };
+}
+
 const StreetViewPanoramaExampleGoogleMap = withGoogleMap(props => (
   <GoogleMap
     defaultZoom={8}
@@ -20,7 +34,17 @@ const StreetViewPanoramaExampleGoogleMap = withGoogleMap(props => (
     <StreetViewPanorama
       defaultPosition={coordinates}
       visible
-    />
+    >
+      <OverlayView
+        position={{ lat: 49.28590291211115, lng: -123.11248166065218 }}
+        mapPaneName={OverlayView.OVERLAY_LAYER}
+        getPixelPositionOffset={getPixelPositionOffset}
+      >
+        <div style={STYLES.overlayView}>
+          OverlayView
+        </div>
+      </OverlayView>
+    </StreetViewPanorama>
   </GoogleMap>
 ));
 
@@ -44,7 +68,7 @@ export default class StreetViewPanoramaExample extends Component {
     return (
       <StreetViewPanoramaExampleGoogleMap
         containerElement={
-          <div style={{ width: `100%`, height: `50%` }} />
+          <div style={{ width: `100%`, height: `100%` }} />
         }
         mapElement={
           <div style={{ width: `100%`, height: `100%` }} />