From 488a72f158755eefdde0ad3c39b652b2280d302c Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Thu, 4 Jul 2024 10:34:59 +0200 Subject: [PATCH 01/11] refactor: Remove double declaration for InfoWindow, AdvancedMarkerElement --- src/alpaca-map.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 0adc4bd..d24c2e1 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -115,7 +115,7 @@ export default class AlpacaMap extends LitElement { mapId: "ALPACA_MAP_ID", }); - const infoWindow = new google.maps.InfoWindow({ + const infoWindow = new InfoWindow({ content: "", disableAutoPan: true, }); @@ -123,7 +123,7 @@ export default class AlpacaMap extends LitElement { // Add markers to the map const markers = this.farms.map((farm) => { - const marker = new google.maps.marker.AdvancedMarkerElement({ + const marker = new AdvancedMarkerElement({ position: farm.location.lat_lng, }); From 1f75e226c4c4ae3d944bfd0a38ab74638da8899a Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Fri, 12 Jul 2024 10:40:13 +0200 Subject: [PATCH 02/11] style: Basic AdvancedMarkerElement using HTML not default infoWindow --- src/alpaca-map.js | 31 ++++++++++++++++++++++++------- 1 file changed, 24 insertions(+), 7 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 29baeab..4601f07 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -276,26 +276,43 @@ export default class AlpacaMap extends LitElement { mapId: "ALPACA_MAP_ID", }); - const infoWindow = new InfoWindow({ - content: "", - disableAutoPan: true, - }); + // const infoWindow = new InfoWindow({ + // content: "", + // disableAutoPan: true, + // }); // Add markers to the map + function buildContent(farm) { + const content = document.createElement("div"); + content.classList.add("farm"); + + const icon = farm?.category?.private ? "Private" : "Public"; + content.innerHTML = ` +
${icon} - ${farm?.count?.alpacas?.status?.active} - 🦙
+ `; + return content; + } + const markers = this.farms.map((farm) => { const marker = new AdvancedMarkerElement({ + content: buildContent(farm), position: farm.location.lat_lng, + title: farm?.name, }); // markers can only be keyboard focusable when they have click listeners - // open info window when marker is clicked + /* // open info window when marker is clicked marker.addListener("click", () => { infoWindow.setContent( - farm.location.lat_lng.lat + ", " + farm.location.lat_lng.lng + farm.location.lat_lng.lat + + ", " + + farm.location.lat_lng.lng + + " Count: " + + farm?.count?.alpacas?.status?.active ); infoWindow.open(this.map, marker); - }); + }); */ farm._marker = marker; From bc48d127b37b76f470b3b0af170b30311d1a9300 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Sun, 14 Jul 2024 21:55:50 +0200 Subject: [PATCH 03/11] style: Farm marker summary, TODO colours for private/public --- src/alpaca-map.js | 87 ++++++++++++++++++++++++++++++++++++++++------- src/svg-icons.js | 71 ++++++++++++++++++++++++++++++-------- 2 files changed, 132 insertions(+), 26 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index c13dfb7..a9f40a6 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -57,7 +57,14 @@ export default class AlpacaMap extends LitElement { --almost-black: #333333; --grey: #666666; - color: var(--almost-black); + --hex-brown: #83580b; + --rgb-brown: 133, 90, 10; + --brown: rgb(var(--rgb-brown)); + + /* Pantone 377 C - from my chair */ + --hex-green: #7a9a01; + --rgb-green: 119, 152, 1; + --green: rgb(var(--rgb-green)); } .web-component-container { @@ -181,6 +188,45 @@ export default class AlpacaMap extends LitElement { width: auto; background-color: var(--pale-blue); } + + .farm { + display: flex; + align-items: center; + justify-content: center; + + background-color: white; + border: 0.2em solid var(--green); /* TODO change colour for public/private */ + border-radius: 1rem; + box-shadow: 10px 10px 5px #0003; + color: var(--almost-black); + padding: 0.75rem; + + width: auto; + max-width: 15rem; + + .summary { + display: flex; + align-items: center; + justify-content: center; + + font-size: 1.5rem; + gap: 0.5rem; + } + + ::after { + border-left: 9px solid transparent; + border-right: 9px solid transparent; + border-top: 9px solid var(--green); /* TODO change colour for public/private */ + content: ""; + height: 0; + left: 50%; + position: absolute; + top: 100%; + transform: translate(-50%); + width: 0; + z-index: 1; + } + } `, ]; @@ -287,10 +333,15 @@ export default class AlpacaMap extends LitElement { const content = document.createElement("div"); content.classList.add("farm"); - const icon = farm?.category?.private ? "Private" : "Public"; + // const icon = farm?.category?.private ? "Private" : "Public"; + content.innerHTML = ` -
${icon} - ${farm?.count?.alpacas?.status?.active} - 🦙
- `; +
+
${iconHouseFlag().svgString}
+
${farm?.count?.alpacas?.status?.active} 🦙
+
+ `; + return content; } @@ -375,17 +426,23 @@ export default class AlpacaMap extends LitElement {
- + - + - + @@ -395,18 +452,20 @@ export default class AlpacaMap extends LitElement { name="alpacaWalking" /> ${iconPersonHiking().htmlObject}Alpaca walking - + - + @@ -415,12 +474,16 @@ export default class AlpacaMap extends LitElement { id="overnightStay" name="overnightStay" /> - + - +
diff --git a/src/svg-icons.js b/src/svg-icons.js index cbf6edb..53c94b3 100644 --- a/src/svg-icons.js +++ b/src/svg-icons.js @@ -17,43 +17,86 @@ export const iconBed = () => { }; export const iconCalendarCheck = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconHandshake = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconHouseFlag = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconKey = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconMars = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconPersonHiking = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconStore = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = svg``; + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; +}; + +export const toSVGString = (path) => { + return `${path}`; +}; + +export const toHTMLObject = (svgFragment) => { + return html`${svgFragment}`; }; From 8e87f90bd2a138086453eafeb4ca3eeb034df3b4 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Mon, 15 Jul 2024 20:09:33 +0200 Subject: [PATCH 04/11] refactor: UnsafeSVG to reuse path string --- src/svg-icons.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/src/svg-icons.js b/src/svg-icons.js index 53c94b3..4d930ba 100644 --- a/src/svg-icons.js +++ b/src/svg-icons.js @@ -1,4 +1,5 @@ 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` @@ -11,15 +12,20 @@ export const iconStyles = [ ]; export const iconBed = () => { - const svgIcon = svg``; + const path = ``; - return html`${svgIcon}`; + const svgFragment = unsafeSVG(path); + + return { + svgString: toSVGString(path), + htmlObject: toHTMLObject(svgFragment), + }; }; export const iconCalendarCheck = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -30,7 +36,7 @@ export const iconCalendarCheck = () => { export const iconHandshake = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -41,7 +47,7 @@ export const iconHandshake = () => { export const iconHouseFlag = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -52,7 +58,7 @@ export const iconHouseFlag = () => { export const iconKey = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -63,7 +69,7 @@ export const iconKey = () => { export const iconMars = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -74,7 +80,7 @@ export const iconMars = () => { export const iconPersonHiking = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), @@ -85,7 +91,7 @@ export const iconPersonHiking = () => { export const iconStore = () => { const path = ``; - const svgFragment = svg``; + const svgFragment = unsafeSVG(path); return { svgString: toSVGString(path), From 52865d07af38ea023c88e9146858501c772c1ea1 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Mon, 15 Jul 2024 20:49:01 +0200 Subject: [PATCH 05/11] style: MarkerClusterer options --- src/alpaca-map.js | 15 ++++++++++++++- 1 file changed, 14 insertions(+), 1 deletion(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index a9f40a6..9e08f9a 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -371,7 +371,20 @@ export default class AlpacaMap extends LitElement { }); // Add a marker clusterer to manage the markers. - this.cluster = new MarkerClusterer({ map: this.map }); + this.cluster = new MarkerClusterer({ + map: this.map, + algorithmOptions: { + radius: 100, + /* + Ref: https://www.npmjs.com/package/supercluster + minPoints: 10, + minZoom: 4, + maxZoom: 16, + radius: 100, + maxZoom: 16, + */ + }, + }); this.cluster.addMarkers(markers); } From 4efcce44a454de986dd7ca71a16b4f6d29d1edec Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Mon, 15 Jul 2024 21:26:38 +0200 Subject: [PATCH 06/11] style: Override google map font to avoid flicker when load --- src/alpaca-map.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 9e08f9a..a6f0e6c 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -199,6 +199,12 @@ export default class AlpacaMap extends LitElement { border-radius: 1rem; box-shadow: 10px 10px 5px #0003; color: var(--almost-black); + + /* Override google map font to avoid flicker when load */ + font: + 400 1.5em Poppins, + Arial, + sans-serif; padding: 0.75rem; width: auto; From 46f3e863cb76ff11e0bdefa40dd7bcfa6a6ca788 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 16 Jul 2024 11:57:39 +0200 Subject: [PATCH 07/11] style: Map colours + example of turning off/on features --- src/alpaca-map.js | 15 ++++++ src/styles-map.js | 125 ++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 140 insertions(+) create mode 100644 src/styles-map.js diff --git a/src/alpaca-map.js b/src/alpaca-map.js index a6f0e6c..2caf5ff 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -1,7 +1,9 @@ import { compareExact, compareSparse } from "./utils"; 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, @@ -328,6 +330,19 @@ export default class AlpacaMap extends LitElement { mapId: "ALPACA_MAP_ID", }); + // Ref: Google map style + // https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple + // Create a new StyledMapType object, passing it an array of styles, + // and the name to be displayed on the map type control. + const styledMapType = new window.google.maps.StyledMapType( + STYLED_MAP_TYPE, + { name: "Alpaca Styled Map" } + ); + + // Associate the styled map with the MapTypeId and set it to display. + this.map.mapTypes.set("styled_map", styledMapType); + this.map.setMapTypeId("styled_map"); + // const infoWindow = new InfoWindow({ // content: "", // disableAutoPan: true, diff --git a/src/styles-map.js b/src/styles-map.js new file mode 100644 index 0000000..567bdac --- /dev/null +++ b/src/styles-map.js @@ -0,0 +1,125 @@ +const STYLED_MAP_TYPE = [ + // Hide/show some default labels on the map + // Ref: https://developers.google.com/maps/documentation/javascript/examples/hiding-features + // Ref: https://developers.google.com/maps/documentation/javascript/style-reference + { + featureType: "poi", + stylers: [{ visibility: "on" }], + }, + { + featureType: "transit", + elementType: "labels.icon", + stylers: [{ visibility: "on" }], + }, + // Override default styles + { elementType: "geometry", stylers: [{ color: "#ebe3cd" }] }, + { elementType: "labels.text.fill", stylers: [{ color: "#523735" }] }, + { elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] }, + { + featureType: "administrative", + elementType: "geometry.stroke", + stylers: [{ color: "#c9b2a6" }], + }, + { + featureType: "administrative.land_parcel", + elementType: "geometry.stroke", + stylers: [{ color: "#dcd2be" }], + }, + { + featureType: "administrative.land_parcel", + elementType: "labels.text.fill", + stylers: [{ color: "#ae9e90" }], + }, + { + featureType: "landscape.natural", + elementType: "geometry", + stylers: [{ color: "#dfd2ae" }], + }, + { + featureType: "poi", + elementType: "geometry", + stylers: [{ color: "#dfd2ae" }], + }, + { + featureType: "poi", + elementType: "labels.text.fill", + stylers: [{ color: "#93817c" }], + }, + { + featureType: "poi.park", + elementType: "geometry.fill", + stylers: [{ color: "#a5b076" }], + }, + { + featureType: "poi.park", + elementType: "labels.text.fill", + stylers: [{ color: "#447530" }], + }, + { + featureType: "road", + elementType: "geometry", + stylers: [{ color: "#f5f1e6" }], + }, + { + featureType: "road.arterial", + elementType: "geometry", + stylers: [{ color: "#fdfcf8" }], + }, + { + featureType: "road.highway", + elementType: "geometry", + stylers: [{ color: "#f8c967" }], + }, + { + featureType: "road.highway", + elementType: "geometry.stroke", + stylers: [{ color: "#e9bc62" }], + }, + { + featureType: "road.highway.controlled_access", + elementType: "geometry", + stylers: [{ color: "#e98d58" }], + }, + { + featureType: "road.highway.controlled_access", + elementType: "geometry.stroke", + stylers: [{ color: "#db8555" }], + }, + { + featureType: "road.local", + elementType: "labels.text.fill", + stylers: [{ color: "#806b63" }], + }, + { + featureType: "transit.line", + elementType: "geometry", + stylers: [{ color: "#dfd2ae" }], + }, + { + featureType: "transit.line", + elementType: "labels.text.fill", + stylers: [{ color: "#8f7d77" }], + }, + { + featureType: "transit.line", + elementType: "labels.text.stroke", + stylers: [{ color: "#ebe3cd" }], + }, + { + featureType: "transit.station", + elementType: "geometry", + stylers: [{ color: "#dfd2ae" }], + }, + { + featureType: "water", + elementType: "geometry.fill", + stylers: [{ color: "#b9d3c2" }], + }, + { + featureType: "water", + elementType: "labels.text.fill", + stylers: [{ color: "#92998d" }], + }, +]; + +export default STYLED_MAP_TYPE; From 2efca5532d906f4acf9a92a1cd4dff436bd1e817 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 16 Jul 2024 16:08:41 +0200 Subject: [PATCH 08/11] style: Farm marker details - onClick toggle, colours. TODO fill out details. --- src/alpaca-map.js | 136 ++++++++++++++++++++++++++++++---------------- 1 file changed, 90 insertions(+), 46 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 2caf5ff..ead6df8 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -58,15 +58,11 @@ export default class AlpacaMap extends LitElement { /* From me */ --almost-black: #333333; --grey: #666666; + --brown: #83580b; + --green: #7a9a01; /* Pantone 377 C - from my chair */ - --hex-brown: #83580b; - --rgb-brown: 133, 90, 10; - --brown: rgb(var(--rgb-brown)); - - /* Pantone 377 C - from my chair */ - --hex-green: #7a9a01; - --rgb-green: 119, 152, 1; - --green: rgb(var(--rgb-green)); + --private-farm: var(--brown); + --public-farm: var(--green); } .web-component-container { @@ -191,13 +187,15 @@ export default class AlpacaMap extends LitElement { background-color: var(--pale-blue); } + /********* 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: 0.2em solid var(--green); /* TODO change colour for public/private */ border-radius: 1rem; box-shadow: 10px 10px 5px #0003; color: var(--almost-black); @@ -211,29 +209,74 @@ export default class AlpacaMap extends LitElement { width: auto; max-width: 15rem; + } - .summary { - display: flex; - align-items: center; - justify-content: center; + .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; + } - font-size: 1.5rem; - gap: 0.5rem; - } + .farm .summary { + display: flex; + align-items: center; + justify-content: center; - ::after { - border-left: 9px solid transparent; - border-right: 9px solid transparent; - border-top: 9px solid var(--green); /* TODO change colour for public/private */ - content: ""; - height: 0; - left: 50%; - position: absolute; - top: 100%; - transform: translate(-50%); - width: 0; - z-index: 1; - } + font-size: 1.5rem; + gap: 0.5rem; + } + + .farm .details { + display: none; + flex-direction: column; + flex: 1; + } + + /********* 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); + } + + .farm.private .icon svg { + fill: var(--private-farm); + } + + .farm.public .icon svg { + fill: var(--public-farm); } `, ]; @@ -343,24 +386,30 @@ export default class AlpacaMap extends LitElement { this.map.mapTypes.set("styled_map", styledMapType); this.map.setMapTypeId("styled_map"); - // const infoWindow = new InfoWindow({ - // content: "", - // disableAutoPan: true, - // }); - // Add markers to the map + function toggleHighlight(markerView, farm) { + if (markerView.content.classList.contains("highlight")) { + markerView.content.classList.remove("highlight"); + markerView.zIndex = null; + } else { + markerView.content.classList.add("highlight"); + markerView.zIndex = 1; + } + } + function buildContent(farm) { const content = document.createElement("div"); content.classList.add("farm"); - - // const icon = farm?.category?.private ? "Private" : "Public"; + content.classList.add(farm?.category?.private ? "private" : "public"); content.innerHTML = `
${iconHouseFlag().svgString}
${farm?.count?.alpacas?.status?.active} 🦙
+ +
TO DO : Fill out details - Onclick show Farm details Onclick show Farm details Onclick show Farm details
`; return content; @@ -374,17 +423,12 @@ export default class AlpacaMap extends LitElement { }); // markers can only be keyboard focusable when they have click listeners - /* // open info window when marker is clicked + + // toggle marker summary/details when marker is clicked marker.addListener("click", () => { - infoWindow.setContent( - farm.location.lat_lng.lat + - ", " + - farm.location.lat_lng.lng + - " Count: " + - farm?.count?.alpacas?.status?.active - ); - infoWindow.open(this.map, marker); - }); */ + toggleHighlight(marker, farm); + console.log(marker.content); + }); farm._marker = marker; From e4f11d4a1d8051e735beefb02645052d96659e17 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 16 Jul 2024 16:14:45 +0200 Subject: [PATCH 09/11] Revert "style: Map colours + example of turning off/on features" This reverts commit 46f3e863cb76ff11e0bdefa40dd7bcfa6a6ca788. --- src/alpaca-map.js | 18 ++----- src/styles-map.js | 125 ---------------------------------------------- 2 files changed, 4 insertions(+), 139 deletions(-) delete mode 100644 src/styles-map.js diff --git a/src/alpaca-map.js b/src/alpaca-map.js index ead6df8..2b8b4b4 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -1,9 +1,7 @@ import { compareExact, compareSparse } from "./utils"; 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, @@ -373,18 +371,10 @@ export default class AlpacaMap extends LitElement { mapId: "ALPACA_MAP_ID", }); - // Ref: Google map style - // https://developers.google.com/maps/documentation/javascript/examples/maptype-styled-simple - // Create a new StyledMapType object, passing it an array of styles, - // and the name to be displayed on the map type control. - const styledMapType = new window.google.maps.StyledMapType( - STYLED_MAP_TYPE, - { name: "Alpaca Styled Map" } - ); - - // Associate the styled map with the MapTypeId and set it to display. - this.map.mapTypes.set("styled_map", styledMapType); - this.map.setMapTypeId("styled_map"); + // const infoWindow = new InfoWindow({ + // content: "", + // disableAutoPan: true, + // }); // Add markers to the map diff --git a/src/styles-map.js b/src/styles-map.js deleted file mode 100644 index 567bdac..0000000 --- a/src/styles-map.js +++ /dev/null @@ -1,125 +0,0 @@ -const STYLED_MAP_TYPE = [ - // Hide/show some default labels on the map - // Ref: https://developers.google.com/maps/documentation/javascript/examples/hiding-features - // Ref: https://developers.google.com/maps/documentation/javascript/style-reference - { - featureType: "poi", - stylers: [{ visibility: "on" }], - }, - { - featureType: "transit", - elementType: "labels.icon", - stylers: [{ visibility: "on" }], - }, - // Override default styles - { elementType: "geometry", stylers: [{ color: "#ebe3cd" }] }, - { elementType: "labels.text.fill", stylers: [{ color: "#523735" }] }, - { elementType: "labels.text.stroke", stylers: [{ color: "#f5f1e6" }] }, - { - featureType: "administrative", - elementType: "geometry.stroke", - stylers: [{ color: "#c9b2a6" }], - }, - { - featureType: "administrative.land_parcel", - elementType: "geometry.stroke", - stylers: [{ color: "#dcd2be" }], - }, - { - featureType: "administrative.land_parcel", - elementType: "labels.text.fill", - stylers: [{ color: "#ae9e90" }], - }, - { - featureType: "landscape.natural", - elementType: "geometry", - stylers: [{ color: "#dfd2ae" }], - }, - { - featureType: "poi", - elementType: "geometry", - stylers: [{ color: "#dfd2ae" }], - }, - { - featureType: "poi", - elementType: "labels.text.fill", - stylers: [{ color: "#93817c" }], - }, - { - featureType: "poi.park", - elementType: "geometry.fill", - stylers: [{ color: "#a5b076" }], - }, - { - featureType: "poi.park", - elementType: "labels.text.fill", - stylers: [{ color: "#447530" }], - }, - { - featureType: "road", - elementType: "geometry", - stylers: [{ color: "#f5f1e6" }], - }, - { - featureType: "road.arterial", - elementType: "geometry", - stylers: [{ color: "#fdfcf8" }], - }, - { - featureType: "road.highway", - elementType: "geometry", - stylers: [{ color: "#f8c967" }], - }, - { - featureType: "road.highway", - elementType: "geometry.stroke", - stylers: [{ color: "#e9bc62" }], - }, - { - featureType: "road.highway.controlled_access", - elementType: "geometry", - stylers: [{ color: "#e98d58" }], - }, - { - featureType: "road.highway.controlled_access", - elementType: "geometry.stroke", - stylers: [{ color: "#db8555" }], - }, - { - featureType: "road.local", - elementType: "labels.text.fill", - stylers: [{ color: "#806b63" }], - }, - { - featureType: "transit.line", - elementType: "geometry", - stylers: [{ color: "#dfd2ae" }], - }, - { - featureType: "transit.line", - elementType: "labels.text.fill", - stylers: [{ color: "#8f7d77" }], - }, - { - featureType: "transit.line", - elementType: "labels.text.stroke", - stylers: [{ color: "#ebe3cd" }], - }, - { - featureType: "transit.station", - elementType: "geometry", - stylers: [{ color: "#dfd2ae" }], - }, - { - featureType: "water", - elementType: "geometry.fill", - stylers: [{ color: "#b9d3c2" }], - }, - { - featureType: "water", - elementType: "labels.text.fill", - stylers: [{ color: "#92998d" }], - }, -]; - -export default STYLED_MAP_TYPE; From c55a70fdeabfa41d25df038723901591922ca668 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 16 Jul 2024 16:50:56 +0200 Subject: [PATCH 10/11] feat: Marker details info, not styled --- src/alpaca-map.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index dbb4baa..6301984 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -386,7 +386,6 @@ export default class AlpacaMap extends LitElement { this.map.setMapTypeId("styled_map"); // Add markers to the map - function toggleHighlight(markerView, farm) { if (markerView.content.classList.contains("highlight")) { markerView.content.classList.remove("highlight"); @@ -408,7 +407,14 @@ export default class AlpacaMap extends LitElement {
${farm?.count?.alpacas?.status?.active} 🦙
-
TO DO : Fill out details - Onclick show Farm details Onclick show Farm details Onclick show Farm details
+
+

${farm?.name}

+ ${farm?.city} +
${farm?.location?.google?.formatted_address}
+
+ Directions +
+
`; return content; From febf58bf1cd0b2cc307e777968aac84bb7c24ab4 Mon Sep 17 00:00:00 2001 From: Anita Lipsky Date: Tue, 16 Jul 2024 16:52:09 +0200 Subject: [PATCH 11/11] feat: Remove console.log --- src/alpaca-map.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/alpaca-map.js b/src/alpaca-map.js index 6301984..9278ae4 100644 --- a/src/alpaca-map.js +++ b/src/alpaca-map.js @@ -432,7 +432,6 @@ export default class AlpacaMap extends LitElement { // toggle marker summary/details when marker is clicked marker.addListener("click", () => { toggleHighlight(marker, farm); - console.log(marker.content); }); farm._marker = marker;