Looking to switch the markers from circles to icons in the GeoChart component of react-google-charts

During my personal project, I came across the react-google-charts library and discovered a method to add markers to the map.

<Chart
    width={"200%"}
    height={"100%"}
    chartType={"GeoChart"}
    data={geoData}
    rootProps={{ "data-testid": "1" }}
    mapsApiKey={"***My Key***"}
    options={{
        displayMode: "markers",
        sizeAxis: { maxSize: 10, minSize: 10 },
        markerOpacity: 0.9,
        backgroundColor: "none",
        colors: ["#FFA4A5", "#34D399"],
        legend: "none",
        datalessRegionColor: "#343434",
    }}
/>
      

However, the default marker is a circle, and I would like to customize it with my favorite icon instead.

So, my question is, is it possible to change or customize the markers when using react-google-charts?

I already looked into the geoChart API options, but couldn't find any relevant settings for marker customization.

Answer №1

Regrettably, GeoChart does not offer customization options for markers.

However, you can utilize the google-maps package to achieve this:

npm install google-maps

Incorporate the following code into your project:

 import React, { Component } from "react";
    import { GoogleMap, Marker } from "google-maps-react";
    
    class CustomMap extends Component {
      render() {
        const mapStyles = {
          width: "100%",
          height: "100%",
        };
    
        return (
          <div style={mapStyles}>
            <GoogleMap
              google={this.props.google}
              zoom={10}
              initialCenter={{ lat: 37.7749, lng: -122.4194 }}
            >
              <Marker
                position={{ lat: 37.7749, lng: -122.4194 }}
                icon={{
                  url: "path/to/your/custom/icon.png",
                  scaledSize: new window.google.maps.Size(50, 50),
                }}
              />
            </GoogleMap>
          </div>
        );
      }
    }
    
    export default GoogleApiWrapper({
      apiKey: "YOUR_API_KEY",
    })(CustomMap);

Replace YOUR_API_KEY with your actual API key.

Don't overlook to display your map within your application:

import React from "react";
import CustomMap from "./CustomMap";

function App() {
  return <CustomMap />;
}

export default App;

Although the google-maps-react library does not directly support coloring countries or areas on the map, you can achieve this by utilizing the Google Maps JavaScript API.

To color countries or areas on the map, you can utilize the Data Layer feature of the Google Maps JavaScript API. Here's an example of how you can modify your code to implement this:

import React, { Component } from "react";
import { GoogleApiWrapper, Map, Marker } from "google-maps-react";

class CustomMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  // Continue with the code as per the provided example...

To change the color of the earth and other areas on the map:

import React, { Component } from "react";
import { GoogleApiWrapper, Map, Marker, DataLayer } from "google-maps-react";

class CustomMap extends Component {
  constructor(props) {
    super(props);
    this.mapRef = React.createRef();
  }

  // Continue with the code as per the provided example...

Answer №2

Have you attempted adding custom CSS utilizing the before selector?

.marker-class::before{
content: '';
background: url(image file);
position:absolute;
top:0px;
left:0px;
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Middleware for Redux in Typescript

Converting a JavaScript-written React app to Typescript has been quite the challenge for me. The error messages are complex and difficult to decipher, especially when trying to create a simple middleware. I've spent about 5 hours trying to solve an er ...

The CSS3 slideshow is displaying distorted and unfocused images

I have a CSS code that controls the timing of my slideshow with 3 images: .slideshow li:child(1) span { background-image: url(../../pic/bg1.jpg); } .slideshow li:child(2) span { background-image: url(../../pic/bg2.jpg); -webkit-animation-de ...

Experience the impact of a lagging network connection on Chrome extensions through the power of React-NextJS

I'm currently working on a Chrome extension that requires me to limit download speeds in the browser programmatically (client-side). Despite researching extensively on the subject, I have not been able to find any information on how to achieve this us ...

Why isn't the favicon functioning properly in Next.js 13?

export const metadata = { title: "Samantha's Portfolio", icons: { icon: "/portfolio-icon.png", }, }; Is there a reason why this code is not functioning as expected? I have tried changing the file extension to .ico but it ...

How can the end event of a custom CSS animation be bound using jQuery or JavaScript?

We are currently managing multiple animations on the same object and need to execute different actions once each animation is complete. At present, we listen for the webkitAnimationEnd event and use a complex if/then statement to handle each animation sep ...

Error encountered while redirecting in Next.js due to premature sending of HTTP headers

I'm currently working on developing a private page using Next.js. I have created the file pages/private.tsx. import React from 'react'; import { Label } from '@components/atoms'; import { Layout } from '@components/Layout&apo ...

Discover the method for accessing a CSS Variable declared within the `:root` selector from within a nested React functional component

Motivation My main aim is to establish CSS as the primary source for color definitions. I am hesitant to duplicate these values into JavaScript variables as it would require updating code in two separate locations if any changes were made to a specific co ...

Troubles arise when the left column shifts to the top with widths larger than 1440

Having a WordPress site with the Divi theme, I encounter an issue where the menu on the left-hand side is being displayed above the page content when the screen width exceeds around 1440 pixels. This problem persists on every page that contains this colum ...

Retrieve the value of material user interface buttons

I am facing a challenge with Material UI. I have two buttons with values, and I want to run a function that console logs the value when someone clicks on them. However, when using e.target.value in Material UI, it returns undefined. While searching for a ...

Customize your form fields with Bootstrap 3 input groups

Currently, I am working on implementing a bootstrap 3 input group, but unfortunately, the outcome is not meeting my expectations. My goal is to create a select [input]-[input text]-[button] structure all in one line. However, in my scenario, the button has ...

picking out a particular set of data from a JSON document

I have a map of Europe along with a JSON file that displays the unemployment rate for each country in the year 2011. The JSON file also includes x and y elements, allowing me to place a blue circle on top of each country on the map. My goal is to be able ...

Manifest and a few other static files, including fonts, were unable to be located following the execution of npm run build

My npm run build is missing the Manifest file and a couple of static fonts. The application was initially created using create-react-app. In the public/index.html, I have the following line: <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> ...

What are some ways to avoid the Login page from flickering in my NextJS + Supabase application?

Currently, I am integrating Supabase with NextJS to create a dashboard, and encountering a specific issue: Whenever a user accesses the application, the Login page briefly flashes for 1 second before authenticating the user and redirecting them to the con ...

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

Adjust Fontsize for Cell in Material UI Table

Is there a way to adjust the font size of each Cell in Material UI's Table? The code snippet below doesn't seem to be working as expected. const styles = { root: { fontSize: '200pt', }, body: { fontSize: '200pt' ...

Here is a step-by-step guide on creating a custom select all checkbox in the toolbar of a MUI

I am currently using the MUI data grid to build my table, with the following properties: <DataGrid rows={serialsList || []} columns={columns} rowsPerPageOptions={[25, 50, 100]} //pageSize={93} ...

Is it possible to create a sticky element that stays fixed to the window without using JavaScript?

Using position: sticky has been a game-changer for me. It resolves many issues without the need for JavaScript. However, I've encountered a roadblock. I am trying to create a sticky element that is nested inside multiple <div> elements. Since po ...

Footer remains fixed to the bottom of the page even when there is not enough content to

It seems like there are already many discussions on this topic, so I apologize if this is a duplicate. I searched for it but couldn't find anything similar. I am currently working on an angular application using the Ionic framework for testing purpos ...

Enhancing React Performance: Storing Component Identity in Redux State

Can I safely pass this to a Redux action creator from a component defined using React.createClass? In my code, I have created the following reducer: const unsavedChangesProtectionReducer = handleActions({ [ENABLE_UNSAVED_CHANGES_PROTECTION]: (unsaved ...

Using the jQuery plugin multiple times within one website

I have a decent understanding of jQuery and I'm in the process of developing a plugin. Specifically, it's a dropdown element that I'm working on. Everything functions correctly when there's only one dropdown on the site. However, when ...