diff --git a/README.md b/README.md index a978ddf..9db06eb 100644 --- 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 `` tag of website -`` + ``` + + + ``` -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 `` tag of website where the component should appear -`` + ``` + + ``` + +1. Optional. To center the map on a favourite farm, replace the latitude and longitude with its `centerLat` and `centerLng` coordinates + + ``` + + ``` ## For developers 🤖 diff --git a/public/index.html b/public/index.html index db7d24e..cdd3d71 100644 --- a/public/index.html +++ b/public/index.html @@ -1,21 +1,43 @@ Home - - + + + + + - - + + + + +

+ This is the external website which has content below the web component. +

+ diff --git a/src/alpaca-map.js b/src/alpaca-map.js index f86d65b..1d738dd 100644 --- 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 container for holding the search toggles

+ +
+
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+
+
+
+
+
+ +
`; } }