feat: add advanced marker example to website

visgl · Nov 7, 2024 · 73a96e6 · 73a96e6
1 parent 59f9668
commit 73a96e6
Show file tree

Hide file tree

Showing 16 changed files with 284 additions and 238 deletions.
diff --git a/examples/advanced-marker/README.md b/examples/advanced-marker/README.md
@@ -1,7 +1,9 @@
-# Markers and Infowindow Example
+# Advanced Marker
 
-Shows the different ways to use the `<Marker>`, `<AdvancedMarker>` and
-`<InfoWindow>` components.
+This example uses the `AdvancedMarker` component with
+custom hover and click states.
+By integrating content in the marker that would traditionally be shown
+in an info window, we can create a smooth and engaging user experience.
 
 ## Google Maps Platform API Key
 

diff --git a/examples/advanced-marker/libs/load-real-estate-listing.ts b/examples/advanced-marker/libs/load-real-estate-listing.ts
@@ -1,4 +1,8 @@
-import {RealEstateListing} from '../src/types';
+import {RealEstateListing} from '../src/types/types';
+
+import frontImage from '../data/images/front.jpg';
+import bedroomImage from '../data/images/bedroom.jpg';
+import backImage from '../data/images/back.jpg';
 
 export async function loadRealEstateListing(): Promise<RealEstateListing> {
   const url = new URL('../data/real-estate-listing.json', import.meta.url);
@@ -7,11 +11,7 @@ export async function loadRealEstateListing(): Promise<RealEstateListing> {
     res.json()
   )) as RealEstateListing;
 
-  const front = new URL(`../data/images/front.jpg`, import.meta.url).href;
-  const bedroom = new URL(`../data/images/bedroom.jpg`, import.meta.url).href;
-  const back = new URL(`../data/images/back.jpg`, import.meta.url).href;
-
-  listing.images = [front, bedroom, back];
+  listing.images = [frontImage, bedroomImage, backImage];
 
   return listing;
 }
diff --git a/examples/advanced-marker/src/app.tsx b/examples/advanced-marker/src/app.tsx
@@ -7,7 +7,7 @@ import ControlPanel from './components/control-panel';
 import {CustomAdvancedMarker} from './components/custom-advanced-marker/custom-advanced-marker';
 import {loadRealEstateListing} from '../libs/load-real-estate-listing';
 
-import {RealEstateListing} from './types';
+import {RealEstateListing} from './types/types';
 
 import './style.css';
 
@@ -25,21 +25,23 @@ const App = () => {
   }, []);
 
   return (
-    <APIProvider apiKey={API_KEY} libraries={['marker']}>
-      <Map
-        mapId={'bf51a910020fa25a'}
-        defaultZoom={5}
-        defaultCenter={{lat: 47.53, lng: -122.34}}
-        gestureHandling={'greedy'}
-        disableDefaultUI>
-        {/* advanced marker with html-content */}
-        {realEstateListing && (
-          <CustomAdvancedMarker realEstateListing={realEstateListing} />
-        )}
-      </Map>
-
-      <ControlPanel />
-    </APIProvider>
+    <div className="advanced-marker-example">
+      <APIProvider apiKey={API_KEY} libraries={['marker']}>
+        <Map
+          mapId={'bf51a910020fa25a'}
+          defaultZoom={5}
+          defaultCenter={{lat: 47.53, lng: -122.34}}
+          gestureHandling={'greedy'}
+          disableDefaultUI>
+          {/* advanced marker with html-content */}
+          {realEstateListing && (
+            <CustomAdvancedMarker realEstateListing={realEstateListing} />
+          )}
+        </Map>
+
+        <ControlPanel />
+      </APIProvider>
+    </div>
   );
 };
 

diff --git a/examples/advanced-marker/src/components/control-panel.tsx b/examples/advanced-marker/src/components/control-panel.tsx
@@ -11,7 +11,7 @@ function ControlPanel() {
 
       <p>
         By integrating content in the marker that would traditionally be shown
-        in an info window, we can create smooth and engaging user experience.
+        in an info window, we can create a smooth and engaging user experience.
       </p>
 
       <div className="links">

diff --git a/examples/advanced-marker/src/components/custom-advanced-marker/custom-advanced-marker.css b/examples/advanced-marker/src/components/custom-advanced-marker/custom-advanced-marker.css
@@ -1,26 +1,25 @@
-.real-estate-marker {
+.advanced-marker-example .real-estate-marker {
   cursor: pointer;
   position: relative;
   transform: translateY(-5px);
   transition: all 0.2s ease-in-out;
+}
 
-  .tip {
-    position: absolute;
-    bottom: 0;
-    width: 0;
-    height: 0;
-    border: 8px solid var(--estate-green-dark);
-    border-radius: 0;
-    border-bottom-right-radius: 5px;
-    z-index: -1;
-    left: 50%;
-
-    transform: translateY(22%) translateX(-50%) rotate(45deg);
-    transition: all 0.2s ease-in-out;
-  }
+.advanced-marker-example .real-estate-marker .tip {
+  position: absolute;
+  bottom: 0;
+  width: 0;
+  height: 0;
+  border: 8px solid var(--estate-green-dark);
+  border-radius: 0;
+  border-bottom-right-radius: 5px;
+  z-index: -1;
+  left: 50%;
+  transform: translateY(22%) translateX(-50%) rotate(45deg);
+  transition: all 0.2s ease-in-out;
 }
 
-.custom-pin {
+.advanced-marker-example .custom-pin {
   position: relative;
   height: 34px;
   width: fit-content;
@@ -38,109 +37,133 @@
     max-width 0.2s ease-in-out,
     height 0.2s ease-in-out,
     border-radius 0.2s ease-in-out;
+}
 
-  .close-button {
-    display: none;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-    padding: 8px;
-    border: none;
-    box-shadow: none;
-    background: none;
-    color: var(--estate-green-dark);
-    cursor: pointer;
-  }
+.advanced-marker-example .custom-pin .close-button {
+  display: none;
+  position: absolute;
+  top: 8px;
+  right: 8px;
+  padding: 8px;
+  border: none;
+  box-shadow: none;
+  background: none;
+  color: var(--estate-green-dark);
+  cursor: pointer;
+}
 
-  .image-container {
-    width: 100%;
-    height: 100%;
-    max-width: 285px;
-    background-position: 50% 50%;
-    background-size: cover;
-    border-radius: inherit;
-    position: relative;
-    overflow: hidden;
-
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    transition: opacity 0.2s ease-in-out;
-
-    .icon {
-      position: absolute;
-      opacity: 1;
-      transition: opacity 0.2s ease-in-out;
-    }
-  }
+.advanced-marker-example .custom-pin .image-container {
+  width: 100%;
+  height: 100%;
+  max-width: 285px;
+  background-position: 50% 50%;
+  background-size: cover;
+  border-radius: inherit;
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  transition: opacity 0.2s ease-in-out;
+}
+
+.advanced-marker-example .custom-pin .image-container .icon {
+  position: absolute;
+  opacity: 1;
+  transition: opacity 0.2s ease-in-out;
 }
 
-.real-estate-marker.hovered {
+.advanced-marker-example .real-estate-marker.hovered {
   z-index: 2;
 
   transform: translateY(-9px);
+}
+.advanced-marker-example .real-estate-marker.hovered .custom-pin {
+  max-width: 80px;
+  height: 80px;
+  border-radius: 50%;
+}
 
-  .custom-pin {
-    max-width: 80px;
-    height: 80px;
-    border-radius: 50%;
-
-    .image-container {
-      opacity: 1;
-      border-radius: inherit;
+.advanced-marker-example
+  .real-estate-marker.hovered
+  .custom-pin
+  .image-container {
+  opacity: 1;
+  border-radius: inherit;
+}
 
-      .icon {
-        opacity: 0;
-      }
-    }
-  }
+.advanced-marker-example
+  .real-estate-marker.hovered
+  .custom-pin
+  .image-container
+  .icon {
+  opacity: 0;
+}
 
-  .tip {
-    transform: translateY(23%) translateX(-50%) rotate(45deg) scale(1.4);
-  }
+.advanced-marker-example .real-estate-marker.hovered .tip {
+  transform: translateY(23%) translateX(-50%) rotate(45deg) scale(1.4);
 }
 
-.real-estate-marker.clicked {
+.advanced-marker-example .real-estate-marker.clicked {
   z-index: 3;
 
   transform: translateY(-9px);
+}
 
-  .custom-pin {
-    background-color: var(--estate-green-dark);
-    border-radius: 0;
-    width: fit-content;
-    max-width: 650px;
-    height: 317px;
-
-    .image-container {
-      border-radius: inherit;
-
-      .icon {
-        opacity: 0;
-        visibility: hidden;
-      }
-    }
-
-    .details-container {
-      max-width: 380px;
-      opacity: 1;
-      visibility: visible;
-
-      animation: slideInFadeIn 0.7s ease-in-out;
-    }
-
-    .close-button {
-      display: flex;
-
-      span {
-        font-size: 24px;
-      }
-    }
-  }
-  .tip {
-    transform: translateY(23%) translateX(-50%) rotate(45deg) scale(1.4);
-  }
+.advanced-marker-example .real-estate-marker.clicked .custom-pin {
+  background-color: var(--estate-green-dark);
+  border-radius: 0;
+  width: fit-content;
+  max-width: 650px;
+  height: 317px;
+}
+
+.advanced-marker-example
+  .real-estate-marker.clicked
+  .custom-pin
+  .image-container {
+  border-radius: inherit;
+}
+
+.advanced-marker-example
+  .real-estate-marker.clicked
+  .custom-pin
+  .image-container
+  .icon {
+  opacity: 0;
+  visibility: hidden;
+}
+
+.advanced-marker-example
+  .real-estate-marker.clicked
+  .custom-pin
+  .details-container {
+  max-width: 380px;
+  opacity: 1;
+  visibility: visible;
+
+  animation: slideInFadeIn 0.7s ease-in-out;
+}
+
+.advanced-marker-example
+  .real-estate-marker.clicked
+  .custom-pin
+  .details-container
+  .close-button {
+  display: flex;
+}
+
+.advanced-marker-example
+  .real-estate-marker.clicked
+  .custom-pin
+  .details-container
+  .close-button
+  span {
+  font-size: 24px;
+}
+
+.advanced-marker-example .real-estate-marker.clicked .tip {
+  transform: translateY(23%) translateX(-50%) rotate(45deg) scale(1.4);
 }
 
 @keyframes slideInFadeIn {

diff --git a/examples/advanced-marker/src/components/custom-advanced-marker/custom-advanced-marker.tsx b/examples/advanced-marker/src/components/custom-advanced-marker/custom-advanced-marker.tsx
@@ -6,7 +6,7 @@ import {RealEstateListingDetails} from '../real-estate-listing-details/real-esta
 import {RealEstateGallery} from '../real-estate-gallery/real-estate-gallery';
 import {RealEstateIcon} from '../../../icons/real-estate-icon';
 
-import {RealEstateListing} from '../../types';
+import {RealEstateListing} from '../../types/types';
 
 import './custom-advanced-marker.css';