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;