diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js index cd0cb2d..e8d4fd7 100644 --- a/src/alpaca-map-icon.js +++ b/src/alpaca-map-icon.js @@ -51,6 +51,12 @@ export default class AlpacaMapIcon extends LitElement { return html`${path}`; } + _iconCar() { + const path = svg``; + + return html`${path}`; + } + _iconCalendarCheck() { const path = svg``; @@ -75,6 +81,12 @@ export default class AlpacaMapIcon extends LitElement { return html`${path}`; } + _iconLocationDot() { + const path = svg``; + + return html`${path}`; + } + _iconMars() { const path = svg``; @@ -102,6 +114,9 @@ export default class AlpacaMapIcon extends LitElement { case "bed": icon = this._iconBed(); break; + case "car": + icon = this._iconCar(); + break; case "calendarCheck": icon = this._iconCalendarCheck(); break; @@ -114,6 +129,9 @@ export default class AlpacaMapIcon extends LitElement { case "key": icon = this._iconKey(); break; + case "locationDot": + icon = this._iconLocationDot(); + break; case "mars": icon = this._iconMars(); break; diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index 25e92d8..bb05d6e 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -21,104 +21,6 @@ export default class AlpacaMapMarker extends LitElement { } /* If a property changes the element re-renders */, }; - static styles = [ - css` - /********* Farm styles in unhighlighted state *********/ - /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */ - - .farm { - display: flex; - align-items: center; - justify-content: center; - - background-color: white; - border-radius: 1rem; - box-shadow: 10px 10px 5px #0003; - color: var(--almost-black); - - /* Avoid font flicker when load */ - /* font-family: sans-serif; */ - - padding: 0.75rem; - - width: auto; - max-width: 15rem; - } - - .farm::after { - border-left: 9px solid transparent; - border-right: 9px solid transparent; - content: ""; - height: 0; - left: 50%; - position: absolute; - top: 100%; - transform: translate(-50%); - width: 0; - z-index: 1; - } - - .farm .summary { - display: flex; - align-items: center; - justify-content: center; - - font-size: 1.5rem; - gap: 0.5rem; - } - - .farm .details { - display: none; - flex-direction: column; - flex: 1; - gap: 1rem; - padding: 0rem 1rem 0rem 1rem; - font-size: medium; - } - - .icon { - position: relative; - margin-left: 0.5rem; - } - - .link-arrow { - top: 0.25rem; - } - - /********* Farm styles in highlighted state *********/ - - /* .farm.highlight { - background-color: #ffffff; - border-radius: 8px; - box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.2); - height: 80px; - padding: 8px 15px; - width: auto; - } */ - - .farm.highlight .details { - display: flex; - } - - /********* Farm category colours *********/ - .farm.private { - border: 0.2em solid var(--private-farm); - } - - .farm.public { - border: 0.2em solid var(--public-farm); - } - - .farm.private::after { - border-top: 9px solid var(--private-farm); - } - - .farm.public::after { - border-top: 9px solid var(--public-farm); - } - `, - ]; - constructor() { super(); this.name; @@ -137,31 +39,55 @@ export default class AlpacaMapMarker extends LitElement { super.connectedCallback(); } + createRenderRoot() { + // Turns off shadow DOM. + // Since AlpacaMapMarker is not used externally, only by AlpacaMap then we want to inherit all styling, so turn off shadow DOM. + return this; + } + render() { - return html`
+ return html`
- +
+ +
${this.count} 🦙
-
-

${this.name}

-
${this.city}
-
${this.address}
-
- Directions - -
+
+
+

${this.name}

+
+ +
+
+ ${this.city} +
+
+ +
+
${this.address}
+
+ + +
+
+ Directions +
+
+
`; } diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 8f9151b..611e805 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -4,6 +4,7 @@ import { MarkerClusterer } from "@googlemaps/markerclusterer"; import { Loader } from "@googlemaps/js-api-loader"; import STYLED_MAP_TYPE from "./styles-map.js"; +import stylesMapMarker from "./styles-map-marker.js"; import "./alpaca-map-marker.js"; import "./alpaca-map-icon.js"; @@ -63,6 +64,30 @@ export default class AlpacaMap extends LitElement { --private-farm: var(--brown); --public-farm: var(--green); + + /* From fontawesome website design */ + --rgb-gray-50: 240 241 243; + --rgb-gray-100: 224 226 232; + --rgb-gray-200: 195 198 209; + --rgb-gray-300: 165 171 187; + --rgb-gray-400: 165 171 187; + --rgb-gray-500: 97 109 138; + --rgb-gray-600: 81 94 123; + --rgb-gray-700: 54 71 103; + --rgb-gray-800: 24 49 83; + --rgb-gray-900: 0 28 64; + --white: var(--oc-white); + --black: var(--oc-black); + --gray-50: rgb(var(--rgb-gray-50)); + --gray-100: rgb(var(--rgb-gray-100)); + --gray-200: rgb(var(--rgb-gray-200)); + --gray-300: rgb(var(--rgb-gray-300)); + --gray-400: rgb(var(--rgb-gray-400)); + --gray-500: rgb(var(--rgb-gray-500)); + --gray-600: rgb(var(--rgb-gray-600)); + --gray-700: rgb(var(--rgb-gray-700)); + --gray-800: rgb(var(--rgb-gray-800)); + --gray-900: rgb(var(--rgb-gray-900)); } /* Custom minimalistic scrollbar */ @@ -191,6 +216,7 @@ export default class AlpacaMap extends LitElement { background-color: var(--pale-blue); } `, + stylesMapMarker, ]; constructor() { diff --git a/src/styles-map-marker.js b/src/styles-map-marker.js new file mode 100644 index 0000000..ff82b8b --- /dev/null +++ b/src/styles-map-marker.js @@ -0,0 +1,130 @@ +import { css } from "lit"; + +/** + * Map marker styling + * + * Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css + * + */ + +export default css` + .farm-marker { + padding: 0.75rem; + background-color: white; + color: var(--almost-black); + transition: all 0.3s ease-out; + width: auto; + max-width: 15rem; + border-radius: 1rem; + border-width: 0.2rem; + border-style: solid; + + &.public { + border-color: var(--public-farm); + } + + &.private { + border-color: var(--private-farm); + } + + .summary { + display: flex; + gap: 0.5rem; + align-items: center; + font-size: 1.5rem; + } + + .count { + font-weight: bolder; + } + + .more-info { + display: flex; + border-radius: 0.5rem; + flex: 1; + flex-direction: column; + + &:not(.highlight) { + display: none; + } + } + + .city { + border-radius: 10px; + padding: 0.2rem 0.5rem; + border: 1px solid var(--gray-100); + max-width: fit-content; + } + + .address { + font-size: 1rem; + font-style: normal; + margin-top: 1rem; + } + + .farm-marker-link { + font-size: 1rem; + font-style: normal; + margin: 1rem 0 0.5rem 0; + border-radius: 1rem; + padding: 1rem 0.5rem; + border: 0.125rem solid var(--gray-500); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-200); + + .text { + margin: 0 0 0 1rem; + } + } + + .farm-marker-link:hover { + border-color: var(--pink); + box-shadow: 0 0.25rem 0 0.125rem var(--gray-400); + } + + .directions, + .city address { + display: flex; + flex-basis: auto; + align-items: center; + padding: 0 0.25rem 0 0; + } + + /* Icons */ + + .icon { + &.link-arrow { + margin-left: 0.5rem; + } + } + + &.public .icon { + color: var(--green); + } + + &.private .icon { + color: var(--brown); + } + } + + .farm-marker::after { + /* Pointer under farm marker - taken from css in https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers*/ + border-left: 8px solid transparent; + border-right: 8px solid transparent; + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translateX(-50%) translateY(calc(0.1em * -1)); + /* translateY inspired from hotels.com */ + width: 0; + } + + .farm-marker.public::after { + border-top: 8px solid var(--green); + } + + .farm-marker.private::after { + border-top: 8px solid var(--brown); + } +`;