purplebugs · purplebugs · Jul 10, 2024 · Jul 5, 2024 · Jul 5, 2024 · Jul 6, 2024
diff --git a/README.md b/README.md
@@ -9,13 +9,24 @@ To try out creating web components using [lit](https://lit.dev/)
 
 ## For end users 🪩
 
-1. Copy and paste the following code on your website
+1. Copy and paste the lines below directly inside the `<head></head>` tag of website
 
-`<alpaca-map key="-TODO-"></alpaca-map>`
+   ```
+   <meta name="viewport" content="width=device-width,initial-scale=1" />
+   <link href="/assets/fonts_google/poppins/fonts.css" rel="stylesheet" />
+   ```
 
-1. Optional. To center the map on your favourite farm, replace the latitude and longitude with your coordinates
+1. Copy and paste the following code inside the `<body></body>` tag of website where the component should appear
 
-`<alpaca-map key="-TODO-" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>`
+   ```
+   <alpaca-map key="-TODO-"></alpaca-map>
+   ```
+
+1. Optional. To center the map on a favourite farm, replace the latitude and longitude with its `centerLat` and `centerLng` coordinates
+
+   ```
+   <alpaca-map key="-TODO-" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
+   ```
 
 ## For developers 🤖
 

diff --git a/public/index.html b/public/index.html
@@ -1,21 +1,43 @@
 <html>
   <head>
     <title>Home</title>
-
-    <link href="/assets/fonts_google/poppins/fonts.css" rel="stylesheet" />
     <style>
-      alpaca-map {
-        border: 1px solid black;
-        width: 100%;
+      .external-website-container {
+        background-color: lightgray;
       }
     </style>
+
+    <!-- 
+    // USAGE Step 1 - START
+    // Copy / paste the lines below directly inside the <head></head> tag of front page of app
+     -->
+    <meta name="viewport" content="width=device-width,initial-scale=1" />
+    <link href="/assets/fonts_google/poppins/fonts.css" rel="stylesheet" />
+    <!-- 
+    // USAGE Step 1 - END
+     -->
   </head>
   <body>
-    <!-- 
-    // Usage: Set your own farm default as follows
+    <div class="external-website-container">
+      <h1>Alpaca Map web component - index.html page header</h1>
+      <p>This is the external website content</p>
+      <p>It contains some info then shows the web component below</p>
+      <!-- 
+    // USAGE Step 2 - START
+    // Copy the <alpaca-map ... /> line below and paste into app
+    // To customise with a farm default add centerLat, centerLng as follows:
         <alpaca-map key="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc" centerLat="-33.8688" centerLng="151.2093"></alpaca-map>
      -->
-    <alpaca-map key="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc"></alpaca-map>
+
+      <alpaca-map key="AIzaSyB4xD7fB993xNwqzBwF0vFpV3Qg_N9UTTc"></alpaca-map>
+      <!-- 
+    // USAGE Step 2 - END
+     -->
+
+      <p>
+        This is the external website which has content below the web component.
+      </p>
+    </div>
 
     <script type="module" src="/build/alpaca-map.js"></script>
   </body>

diff --git a/src/alpaca-map.js b/src/alpaca-map.js
@@ -25,14 +25,59 @@ export default class AlpacaMap extends LitElement {
     stylesGoogle,
     iconStyles,
     css`
+      /* Overall layout */
+
       :host {
-        display: block;
+        /* Ref: https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design#responsive_typography */
+        /* font-size: calc(1.5rem + 3vw); */
+
+        /* Sets a min font size, ie the max of the two values, so sets a floor for the size */
+        /*         
+        font-size: max(5vw, 10px); 
+        */
+      }
+
+      .web-component-container {
+        border: 1px solid black;
       }
+
+      .header-container {
+        background-color: lightcoral;
+        padding: 0.5em;
+      }
+
+      .map-container {
+        background-color: lightgreen;
+      }
+
+      .footer-container {
+        background-color: purple;
+
+        p {
+          margin: 0px;
+        }
+      }
+
+      /* Toggles */
+
+      .toggle-group {
+        /* Scroll across for more toggles*/
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        overflow: auto;
+      }
+
+      .toggle {
+        background-color: orange;
+        border: solid #5b6dcd 10px;
+        padding: 5px;
+      }
+
       #map {
-        top: 0;
-        bottom: 0;
         height: 100%;
-        width: 100%;
+        width: auto;
+        background-color: darkkhaki;
       }
     `,
   ];
@@ -122,10 +167,10 @@ export default class AlpacaMap extends LitElement {
       center: center,
       zoomControl: true,
       mapTypeControl: false,
-      scaleControl: false,
-      streetViewControl: false,
-      rotateControl: false,
-      fullscreenControl: false,
+      scaleControl: true,
+      streetViewControl: true,
+      rotateControl: true,
+      fullscreenControl: true,
       mapId: "ALPACA_MAP_ID",
     });
 
@@ -161,7 +206,7 @@ export default class AlpacaMap extends LitElement {
   }
 
   _filterMarkers(element) {
-    const form = new FormData(element.target.parentElement);
+    const form = new FormData(element.currentTarget);
 
     const templatePublicPrivate = {
       public: form.get("public") === "on",
@@ -205,34 +250,72 @@ export default class AlpacaMap extends LitElement {
 
   render() {
     return html`
-      <header>
-        <form id="form" @change="${this._filterMarkers}">
-          <input type="checkbox" id="public" name="public" checked />
-          <label for="public"> ${iconHouseFlag()} Public farms</label>
-
-          <input type="checkbox" id="private" name="private" checked />
-          <label for="private">${iconKey()}Private farms</label>
-
-          <input type="checkbox" id="alpacaSales" name="alpacaSales" />
-          <label for="alpacaSales">${iconHandshake()}Alpaca sales</label>
-
-          <input type="checkbox" id="alpacaWalking" name="alpacaWalking" />
-          <label for="alpacaWalking">${iconPersonHiking()}Alpaca walking</label>
-
-          <input type="checkbox" id="bookable" name="bookable" />
-          <label for="bookable">${iconCalendarCheck()}Bookable</label>
-
-          <input type="checkbox" id="shop" name="shop" />
-          <label for="shop">${iconStore()}Shop</label>
-
-          <input type="checkbox" id="overnightStay" name="overnightStay" />
-          <label for="overnightStay">${iconBed()}Overnight stay</label>
-
-          <input type="checkbox" id="studServices" name="studServices" />
-          <label for="studServices">${iconMars()} Stud services</label>
-        </form>
-      </header>
-      <div id="map"></div>
+      <section class="web-component-container">
+        <header class="header-container">
+          <p>Header container for holding the search toggles</p>
+
+          <form id="form" @change="${this._filterMarkers}">
+            <div class="toggle-group">
+              <span class="toggle">
+                <input type="checkbox" id="public" name="public" checked />
+                <label for="public"> ${iconHouseFlag()} Public farms</label>
+              </span>
+
+              <span class="toggle">
+                <input type="checkbox" id="private" name="private" checked />
+                <label for="private">${iconKey()}Private farms</label>
+              </span>
+
+              <span class="toggle">
+                <input type="checkbox" id="alpacaSales" name="alpacaSales" />
+                <label for="alpacaSales">${iconHandshake()}Alpaca sales</label>
+              </span>
+
+              <span class="toggle">
+                <input
+                  type="checkbox"
+                  id="alpacaWalking"
+                  name="alpacaWalking"
+                />
+                <label for="alpacaWalking"
+                  >${iconPersonHiking()}Alpaca walking</label
+                >
+              </span>
+
+              <span class="toggle">
+                <input type="checkbox" id="bookable" name="bookable" />
+                <label for="bookable">${iconCalendarCheck()}Bookable</label>
+              </span>
+
+              <span class="toggle">
+                <input type="checkbox" id="shop" name="shop" />
+                <label for="shop">${iconStore()}Shop</label>
+              </span>
+
+              <span class="toggle">
+                <input
+                  type="checkbox"
+                  id="overnightStay"
+                  name="overnightStay"
+                />
+                <label for="overnightStay">${iconBed()}Overnight stay</label>
+              </span>
+
+              <span class="toggle">
+                <input type="checkbox" id="studServices" name="studServices" />
+                <label for="studServices">${iconMars()} Stud services</label>
+              </span>
+            </div>
+          </form>
+        </header>
+        <div class="map-container">
+          <div id="map"></div>
+        </div>
+        <footer class="footer-container">
+          <p>This is the footer for the web component</p>
+          <p>Will have logo and links</p>
+        </footer>
+      </section>
     `;
   }
 }