diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js new file mode 100644 index 0000000..f974179 --- /dev/null +++ b/src/alpaca-map-icon.js @@ -0,0 +1,136 @@ +import { LitElement, html, css, svg } from "lit"; + +export default class AlpacaMapIcon extends LitElement { + static properties = { + icon: { type: String }, + }; + + static styles = [ + css` + .icon { + width: 1em; + height: 1em; + + font-size: 1.5em; + fill: currentcolor; + + padding: 0 0.1em 0 0.1em; + } + + .private { + fill: var(--private-farm); + } + + .public { + fill: var(--public-farm); + } + `, + ]; + + constructor() { + super(); + this.icon; + } + + // When element is connected to the DOM connectedCallback() is called. + // This is needed in order to know the value of this.key which is passed in from the attribute + + connectedCallback() { + super.connectedCallback(); + } + + _iconBed() { + const path = svg``; + + return html`${path}`; + } + + _iconCalendarCheck() { + const path = svg``; + + return html`${path}`; + } + + _iconHandshake() { + const path = svg``; + + return html`${path}`; + } + + _iconHouseFlag() { + const path = svg``; + + return html`${path}`; + } + + _iconKey() { + const path = svg``; + + return html`${path}`; + } + + _iconMars() { + const path = svg``; + + return html`${path}`; + } + + _iconPersonHiking() { + const path = svg``; + + return html`${path}`; + } + + _iconStore() { + const path = svg``; + + return html`${path}`; + } + + _iconStore() { + const path = svg``; + + return html`${path}`; + } + + render() { + let icon; + switch (this.icon) { + case "bed": + icon = this._iconBed(); + break; + case "calendarCheck": + icon = this._iconCalendarCheck(); + break; + case "handShake": + icon = this._iconHandshake(); + break; + case "houseFlag": + icon = this._iconHouseFlag(); + break; + case "key": + icon = this._iconKey(); + break; + case "mars": + icon = this._iconMars(); + break; + case "personHiking": + icon = this._iconPersonHiking(); + break; + case "store": + icon = this._iconStore(); + break; + case "store": + icon = this._iconStore(); + break; + default: + return ""; + } + + return icon; + } +} + +if (!customElements.get("alpaca-map-icon")) { + customElements.define("alpaca-map-icon", AlpacaMapIcon); +} diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js index d26daa1..cb346c6 100644 --- a/src/alpaca-map-marker.js +++ b/src/alpaca-map-marker.js @@ -1,5 +1,5 @@ import { LitElement, html, css } from "lit"; -import { iconStyles, iconHouseFlag, iconKey } from "./svg-icons"; +import "./alpaca-map-icon"; export default class AlpacaMapMarker extends LitElement { static properties = { @@ -22,7 +22,6 @@ export default class AlpacaMapMarker extends LitElement { }; static styles = [ - iconStyles, css` /********* Farm styles in unhighlighted state *********/ /* Ref: https://developers.google.com/maps/documentation/javascript/advanced-markers/html-markers#maps_advanced_markers_html-css */ @@ -107,14 +106,6 @@ export default class AlpacaMapMarker extends LitElement { .farm.public::after { border-top: 9px solid var(--public-farm); } - - .farm.private .icon svg { - fill: var(--private-farm); - } - - .farm.public .icon svg { - fill: var(--public-farm); - } `, ]; @@ -139,11 +130,9 @@ export default class AlpacaMapMarker extends LitElement { render() { return html`
-
- ${this.category === "private" - ? iconKey().htmlObject - : iconHouseFlag().htmlObject} -
+
${this.count} 🦙
diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 1584b9e..d4759db 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -3,18 +3,8 @@ import { LitElement, html, css } from "lit"; import { MarkerClusterer } from "@googlemaps/markerclusterer"; import STYLED_MAP_TYPE from "./styles-map"; import stylesGoogle from "./styles-google"; -import { - iconStyles, - iconBed, - iconCalendarCheck, - iconHandshake, - iconHouseFlag, - iconKey, - iconMars, - iconPersonHiking, - iconStore, -} from "./svg-icons"; import "./alpaca-map-marker"; +import "./alpaca-map-icon"; export default class AlpacaMap extends LitElement { static properties = { @@ -25,7 +15,6 @@ export default class AlpacaMap extends LitElement { static styles = [ stylesGoogle, - iconStyles, css` /********* Overall layout *********/ @@ -155,18 +144,6 @@ export default class AlpacaMap extends LitElement { justify-content: center; } - .icon { - padding: 0 0.1em 0 0.1em; - } - - svg { - font-size: 1.5em; - - path { - fill: currentcolor; - } - } - input[type="checkbox"] { margin: 0em 0.4em 0em 0.1em; width: 1.5em; @@ -406,21 +383,24 @@ export default class AlpacaMap extends LitElement { Public + farms Private + farms Alpaca + sales @@ -431,20 +411,24 @@ export default class AlpacaMap extends LitElement { name="alpacaWalking" /> Alpaca + walking Bookable - + @@ -454,14 +438,16 @@ export default class AlpacaMap extends LitElement { name="overnightStay" /> Overnight + stay Stud + services
diff --git a/src/svg-icons.js b/src/svg-icons.js deleted file mode 100644 index 4d930ba..0000000 --- a/src/svg-icons.js +++ /dev/null @@ -1,108 +0,0 @@ -import { css, svg, html } from "lit"; -import { unsafeSVG } from "lit/directives/unsafe-svg.js"; /* This is safe since this is duplicating internal known markup, not markup from user */ - -export const iconStyles = [ - css` - .icon { - width: 1em; - height: 1em; - vertical-align: -0.125em; - } - `, -]; - -export const iconBed = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconCalendarCheck = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconHandshake = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconHouseFlag = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconKey = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconMars = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconPersonHiking = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const iconStore = () => { - const path = ``; - - const svgFragment = unsafeSVG(path); - - return { - svgString: toSVGString(path), - htmlObject: toHTMLObject(svgFragment), - }; -}; - -export const toSVGString = (path) => { - return `${path}`; -}; - -export const toHTMLObject = (svgFragment) => { - return html`${svgFragment}`; -};