Adding zoom functionality to React Google Charts (Map)

Question

How can I add zoom functionality to my code so that when I click on a country on the map, it zooms into that specific country? Additionally, I want the selected country to be highlighted in a different colour or have a distinctive border around it as it is currently not obvious which country has been clicked.

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import { Chart } from 'react-google-charts';
import geoChartOptions from './geoChartOptions.js';
import config from '../../../config.json';

function toProperCase(inputText) {
  const words = inputText.split(' ');
  const properCaseWords = words.map((word) => {
    return word.charAt(0).toUpperCase() + word.slice(1).toLowerCase();
  });
  return properCaseWords.join(' ');
}

function GeoChart({ setSelectedCountry, setSelectedContinent }) {
  const URL = config.URL
  const [worldMap, setWorldMap] = useState(null);
  const countriesCodeMap = config.countriesCodeMap
  const continentsCodeMap = config.continentsCodeMap

  useEffect(() => {
    axios.get(`${URL}/worldMap`)
      .then((response) => {
        if (response.data === null) {
          console.log('ERROR');
        } else {
          setWorldMap(response.data);
        }
      })
      .catch((error) => {
        console.error('Error Fetching World Map Data:', error);
      });

  }, [setSelectedCountry]);

  const geoChartData = [['Location', '% of BEVs']];
  for (const [state, code] of Object.entries(countriesCodeMap)) {
    const value = (worldMap && worldMap[0]?.[code]) || 0;
    geoChartData.push([state, value]);
  }

  const handleLocationSelect = (selectedAbbreviation) => {
    if (selectedAbbreviation) { 
      let selectedLocation = countriesCodeMap[selectedAbbreviation] || null;
  
      if (typeof selectedLocation === 'string') {
        if (selectedLocation === 'nys' || selectedLocation === 'uk') {
          selectedLocation = selectedLocation.toUpperCase();
        } else {
          selectedLocation = toProperCase(selectedLocation);
        }
      }
  
      const selectedContinent = continentsCodeMap[selectedAbbreviation] || null;
  
      setSelectedCountry(selectedLocation);
      setSelectedContinent(selectedContinent);
    }
  };  

  return (
    <div>
      <Chart
        chartEvents={[
          {
            eventName: 'select',
            callback: ({ chartWrapper }) => {
              const chart = chartWrapper.getChart();
              const selection = chart.getSelection();
              const selectedAbbreviation =
                selection.length === 0 ? null : geoChartData[selection[0].row + 1][0];

              handleLocationSelect(selectedAbbreviation);
            },
          },
        ]}
        chartType="GeoChart"
        width="100%"
        data={geoChartData}
        options={geoChartOptions}
      />
    </div>
  );
}

export default GeoChart;

Answer 1

To add zoom functionality to Google Charts in React, particularly for maps, you can leverage the Google Charts API along with React to achieve this.

Here's an example of how you might implement zoom functionality for a Google Map in a React component using react-google-charts:

import React, { useRef, useEffect } from 'react';
import { Chart } from 'react-google-charts';

const GoogleMap = () => {
  const chartWrapper = useRef(null);

  useEffect(() => {
    const chart = chartWrapper.current.getChartWrapper().getChart();

    const zoomHandler = () => {
      // Get current zoom level
      const currentZoom = chart.getOption('zoomLevel');

      // Set a new zoom level
      chart.setOption('zoomLevel', currentZoom + 1); // or any custom logic for zooming
      chart.draw();
    };

    // Add a listener for zoom functionality (for example, on button click)
    document.getElementById('zoomButton').addEventListener('click', zoomHandler);

    return () => {
      // Cleanup: Remove event listener when component unmounts
      document.getElementById('zoomButton').removeEventListener('click', zoomHandler);
    };
  }, []);

  return (
    <div>
      <button id="zoomButton">Zoom In</button>
      <Chart
        chartType="GeoChart"
        data={[
          ['Country', 'Population'],
          ['Germany', 81750000],
          ['United States', 327200000],
          // Add more data as needed
        ]}
        options={{
          region: 'world',
          displayMode: 'regions',
          colorAxis: { colors: ['green', 'blue'] },
          zoomLevel: 1, // Initial zoom level
        }}
        chartEvents={[
          {
            eventName: 'ready',
            callback: ({ chartWrapper }) => {
              chartWrapper.draw();
            },
          },
        ]}
        chartPackages={['corechart', 'geochart']}
        style={{ width: '100%', height: '500px' }}
        ref={chartWrapper}
      />
    </div>
  );
};

export default GoogleMap;

This example uses the react-google-charts library to render a GeoChart (Google Map) in a React component. It includes a button (#zoomButton) that, when clicked, triggers the zoom functionality by increasing the zoomLevel option of the map.

Ensure you replace the sample data (data prop) with the actual map data you intend to display.

This is a basic example illustrating how you might

add a zoom functionality to a Google Map using React and react-google-charts. The Chart component from react-google-charts is utilized to render the map, and a button triggers the zoom action by updating the zoomLevel option of the map.

You can further enhance this functionality by adjusting the zoom logic, implementing zoom out functionality, or incorporating additional UI elements for better control. Additionally, consider exploring the Google Charts API documentation for more customization options and functionalities available for Google Maps.