docs: expand change-map-id example to change-map-styles

examples/change-map-id/README.md → examples/change-map-styles/README.md

@@ -1,9 +1,6 @@
-# Basic Google Maps Setup Example
+# Map Styling Example
 
-![image](https://user-images.githubusercontent.com/39244966/208682692-d5b23518-9e51-4a87-8121-29f71e41c777.png)
-
-This is an example to show how to change the map id of a simple Google Maps Map with the `<Map/>` component of the Google Maps React
-library.
+This is an example to demonstrate changing the style of the `<Map/>` component using local and cloud-based map styles as well as map types.
 
 ## Google Maps API key
 

examples/change-map-id/src/app.tsx → examples/change-map-styles/src/app.tsx

@@ -8,8 +8,12 @@ import {
   Map,
   useMarkerRef
 } from '@vis.gl/react-google-maps';
+
 import ControlPanel from './control-panel';
 
+import brightColorsStyles from './map-styles/bright-colors';
+import vitaminCStyles from './map-styles/vitamin-c';
+
 const MapTypeId = {
   HYBRID: 'hybrid',
   ROADMAP: 'roadmap',
@@ -21,6 +25,7 @@ export type MapConfig = {
   label: string;
   mapId?: string;
   mapTypeId?: string;
+  styles?: google.maps.MapTypeStyle[];
 };
 
 const MAP_CONFIGS: MapConfig[] = [
@@ -51,6 +56,18 @@ const MAP_CONFIGS: MapConfig[] = [
     label: 'Terrain (no mapId)',
     mapTypeId: MapTypeId.TERRAIN
   },
+  {
+    id: 'styled1',
+    label: 'Raster / "Bright Colors" (no mapId)',
+    mapTypeId: MapTypeId.ROADMAP,
+    styles: brightColorsStyles
+  },
+  {
+    id: 'styled2',
+    label: 'Raster / "Vitamin C" (no mapId)',
+    mapTypeId: MapTypeId.ROADMAP,
+    styles: vitaminCStyles
+  },
   {
     id: 'satellite2',
     label: 'Satellite ("light" mapId)',
@@ -85,6 +102,7 @@ const App = () => {
         mapTypeId={mapConfig.mapTypeId}
         center={{lat: 22, lng: 0}}
         zoom={3}
+        styles={mapConfig.styles}
         gestureHandling={'greedy'}
         disableDefaultUI={true}>
         <Marker

examples/change-map-id/src/control-panel.tsx → examples/change-map-styles/src/control-panel.tsx

@@ -14,15 +14,16 @@ function ControlPanel({
 }: ControlPanelProps) {
   return (
     <div className="control-panel">
-      <h3>Change MapIds</h3>
+      <h3>Change Map Styles</h3>
       <p>
-        The react-component can switch between multiple mapIds without having to
-        reinitialize.
+        The <code>Map</code> component can switch between multiple styles, even
+        between cloud-based and local styles, on the fly. Switching the mapType
+        is supported as well.
       </p>
       <p>
-        Be aware that, due to the way the Google Maps API works, this creates a
-        new <code>google.maps.Map</code> instance when the mapId is changed,
-        which can cause additional charges.
+        Due to the way the Maps API works, a new <code>google.maps.Map</code>{' '}
+        instance has to be created when the mapId is changed, which could affect
+        the number of paid map-views.
       </p>
 
       <div>

examples/change-map-styles/src/map-styles/bright-colors.ts

@@ -0,0 +1,55 @@
+// Map Style "No label Bright Colors" by Beniamino Nobile
+// https://snazzymaps.com/style/127403/no-label-bright-colors
+
+export default [
+  {
+    featureType: 'all',
+    elementType: 'all',
+    stylers: [
+      {saturation: '32'},
+      {lightness: '-3'},
+      {visibility: 'on'},
+      {weight: '1.18'}
+    ]
+  },
+  {
+    featureType: 'administrative',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}]
+  },
+  {
+    featureType: 'landscape',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}]
+  },
+  {
+    featureType: 'landscape.man_made',
+    elementType: 'all',
+    stylers: [{saturation: '-70'}, {lightness: '14'}]
+  },
+  {
+    featureType: 'poi',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}]
+  },
+  {
+    featureType: 'road',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}]
+  },
+  {
+    featureType: 'transit',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}]
+  },
+  {
+    featureType: 'water',
+    elementType: 'all',
+    stylers: [{saturation: '100'}, {lightness: '-14'}]
+  },
+  {
+    featureType: 'water',
+    elementType: 'labels',
+    stylers: [{visibility: 'off'}, {lightness: '12'}]
+  }
+] as google.maps.MapTypeStyle[];

examples/change-map-styles/src/map-styles/vitamin-c.ts

@@ -0,0 +1,59 @@
+// Map Style "Vitamin C" by Adam Krogh
+// https://snazzymaps.com/style/40/vitamin-c
+export default [
+  {
+    featureType: 'water',
+    elementType: 'geometry',
+    stylers: [{color: '#004358'}]
+  },
+  {
+    featureType: 'landscape',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}]
+  },
+  {
+    featureType: 'poi',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}]
+  },
+  {
+    featureType: 'road.highway',
+    elementType: 'geometry',
+    stylers: [{color: '#fd7400'}]
+  },
+  {
+    featureType: 'road.arterial',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}, {lightness: -20}]
+  },
+  {
+    featureType: 'road.local',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}, {lightness: -17}]
+  },
+  {
+    elementType: 'labels.text.stroke',
+    stylers: [{color: '#ffffff'}, {visibility: 'on'}, {weight: 0.9}]
+  },
+  {
+    elementType: 'labels.text.fill',
+    stylers: [{visibility: 'on'}, {color: '#ffffff'}]
+  },
+  {
+    featureType: 'poi',
+    elementType: 'labels',
+    stylers: [{visibility: 'simplified'}]
+  },
+  {elementType: 'labels.icon', stylers: [{visibility: 'off'}]},
+  {
+    featureType: 'transit',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}, {lightness: -10}]
+  },
+  {},
+  {
+    featureType: 'administrative',
+    elementType: 'geometry',
+    stylers: [{color: '#1f8a70'}, {weight: 0.7}]
+  }
+] as google.maps.MapTypeStyle[];

website/src/examples-sidebar.js

@@ -11,7 +11,7 @@ const sidebars = {
       items: [
         'basic-map',
         'markers-and-infowindows',
-        'change-map-id',
+        'change-map-styles',
         'map-control'
       ]
     }

website/src/examples/change-map-styles.mdx

@@ -0,0 +1,5 @@
+# Change Map Styles
+
+import App from 'website-examples/change-map-styles/src/app';
+
+<App />