Mingzhe

·

Follow

5 min read

·

21 hours ago

--

Listen

Share

Using Google Maps features in your web application can be tricky, especially if you’re leveraging LeafletJS. While the leaflet.gridlayer.googlemutant library by ivansanchez helps in utilising Google Maps as a base map in LeafletJS, it can lag behind Google’s latest features due to the constant updates by Google. One such feature is the light and dark mode switch. Instead of waiting for updates or forking the library, you can easily patch it with patch-package.

Cloud-based Google Maps Styling

Google Maps now offers a cloud-based solution for customizing map styles, utilizing Map IDs to apply styles stored in the Google Cloud console. This method centralizes style management and simplifies the process of integrating consistent styles across different platforms and applications.

Key Features of Cloud-Based Styling

• Centralised Management: Styles are stored in the Google Cloud console, making it easier to manage and update them across multiple applications.
• Consistency Across Platforms: Once a style is created in the cloud, it can easily be applied to all your applications, ensuring a consistent look and feel.
• Dynamic Updates: Change your map’s appearance anytime without updating the app code — simply modify the style in the cloud.

How to Utilise Cloud-Based Styling

• Create a Map Style: Use the Google Cloud console to design your map style, which can include unique colors, visibility settings, and element visibility.

• Generate a Map ID: Once your style is created, generate a Map ID linked to that style. This Map ID will serve as a reference to apply the style.

• Apply the Map ID: Use the Map ID in your Google Maps API calls to apply the style to your maps.

Before we have the new feature show on the screenshot above, we need to create two map ID and handle it on front-end, to switch between light and dark mode. By leveraging cloud-based styling with new map styles feature, you can easily maintain and update the aesthetics of your maps without altering your application’s code.

Work on the google mutant package

While cloud-based styling provides a powerful tool for styling maps, not all features may be immediately available or may require additional customization at the client side. If you need to implement specific features such as the Google Maps light and dark mode directly, patching can be a more efficient approach.

Advantages of Patching Over Forking

• No Complex Build Steps: Some forks require cumbersome build steps — forget about that hassle.
• Clear Notifications: If the dependency changes and you need to verify your fix, you’ll receive a clear notification.
• Co-located Patches: Keep your patches alongside the code that depends on them.
• Easier Reviews: You can review patches like any other code changes, which isn’t always feasible with forks

How to Get started

Let’s walk through enabling dark mode with patch-package using Angular as an example. This blog will introduce how to use patch-package to enable dark mode, I’ll use angular as example

Install the Google Mutant Package

First, get the necessary npm package:

npm install leaflet.gridlayer.googlemutant

Set Up Patch-Package

Install patch-package:

npm install patch-package

In package.json, add the postinstall, when you run npm install, the post install will be triggered, and run the patch-package to modify the default node module

 "scripts": {+  "postinstall": "patch-package" }

Modify the Google Mutant Package

Navigate to the Leaflet.GoogleMutant.mjs file in the package and add the following line to the options object:

 var options = {   center: { lat: 0, lng: 0 },   zoom: 0,   tilt: 0,   mapTypeId: this.options.type,   disableDefaultUI: true,   keyboardShortcuts: false,   draggable: false,   disableDoubleClickZoom: true,   scrollwheel: false,   styles: this.options.styles || [],   backgroundColor: "transparent",   colorScheme: this.options.colorScheme || 'FOLLOW_SYSTEM' // enable colour scheme  };

Create a Patch File

Run patch-package to generate a patch file that captures your modifications.

# run patch-package to create a .patch filenpx patch-package leaflet.gridlayer.googlemutant

After making change, run patch-package to create a .patch file under patches folder, this file will be used later when post install trigger, it will going to find the patch based on the module name and version.

Commit Your Changes

Add the patch file to your version control so others can use the fix:

git add patches/leaflet.gridlayer.googlemutant+<version>.patchgit commit -m "Enable dark mode feature on Google Maps"

Use the colorScheme Option in Your Code

Utilise the colorScheme option in your app's code:

const googleMutant = L.gridLayer  .googleMutant({    maxZoom: 21,    type: 'roadmap',    noWrap: true,    mapId: 'your-map-id',    colorScheme: this.themeService.isDarkMode() ? 'DARK' : 'LIGHT',  })  .on('spawned', (e) => {    e.target?._mutant?.setOptions({ scaleControl: true });  });

Test your changes

Clear the Angular cache and run the application to test:

ng cache clean && ng serve

By following these steps, you can easily integrate new Google Maps features like dark mode into your LeafletJS application without the overhead of maintaining a fork. Happy mapping!