diff --git a/src/alpaca-map-icon.js b/src/alpaca-map-icon.js
index 89ae613..cd0cb2d 100644
--- a/src/alpaca-map-icon.js
+++ b/src/alpaca-map-icon.js
@@ -39,6 +39,12 @@ export default class AlpacaMapIcon extends LitElement {
super.connectedCallback();
}
+ _iconArrowUpRightFromSquare() {
+ const path = svg``;
+
+ return html``;
+ }
+
_iconBed() {
const path = svg``;
@@ -90,6 +96,9 @@ export default class AlpacaMapIcon extends LitElement {
render() {
let icon;
switch (this.icon) {
+ case "arrowUpRightFromSquare":
+ icon = this._iconArrowUpRightFromSquare();
+ break;
case "bed":
icon = this._iconBed();
break;
diff --git a/src/alpaca-map-marker.js b/src/alpaca-map-marker.js
index f0857fe..25e92d8 100644
--- a/src/alpaca-map-marker.js
+++ b/src/alpaca-map-marker.js
@@ -36,6 +36,9 @@ export default class AlpacaMapMarker extends LitElement {
box-shadow: 10px 10px 5px #0003;
color: var(--almost-black);
+ /* Avoid font flicker when load */
+ /* font-family: sans-serif; */
+
padding: 0.75rem;
width: auto;
@@ -68,6 +71,18 @@ export default class AlpacaMapMarker extends LitElement {
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 *********/
@@ -133,7 +148,7 @@ export default class AlpacaMapMarker extends LitElement {
${this.name}
- ${this.city}
+
${this.city}
${this.address}
Directions
+ >Directions
+
`;