style: Map colours + example of turning off/on features

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,

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;