How to customize react-typescript-datamaps Library?

Question

I am currently using the react-typescript-datamaps library in a ReactJS project and facing challenges in customizing the font style and size for country names displayed on the map. Despite efforts, I haven't been able to find a suitable approach to make the necessary changes.

Here's an example of the relevant component:

import React, { useEffect, useState } from "react";
import { DataMapsWrapper } from "react-typescript-datamaps";
import { useDispatch, useSelector } from "react-redux";
import AttackHelper from "./AttackHelper";
import BlastHelper from "./BlastHelper";

import BubblesConfig from "./BubblesConfig";
import {  getThreatsMapData } from "../store/dataSlice";


const MapView = () => {
  const dispatch = useDispatch();
  const [index, setIndex] = useState(0);
  const [dstloc, setDstloc] = useState();
  const [srcloc, setSrcloc] = useState();
  const [arc, setArc] = useState([]);
  const [blast, setBlast] = useState([]);

  const loading = useSelector((state) => state.threatsMap.data.loading);
  const data = useSelector((state) => state.threatsMap.data.threatsMapData);

  const intervalValue = useSelector(
    (state) => state.threatsMap.state.intervalValue
  );

  const getThreatsMap = () => {
    dispatch(getThreatsMapData({  }));
  };

  useEffect(() => {
    getThreatsMap();
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, []);

  useEffect(() => {
    const interval = setInterval(() => {
      if (loading || !data[index]) return;

      const eventData = data[index];

      const srcAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-src"
      );
      const dstAttribute = eventData.Attributes.find(
        (item) => item.type === "ip-dst"
      );
      const IPv4Attribute = eventData.Attributes.find(
        (item) => item.type === "IPv4"
      );

      // Check if at least one of the attributes exists
      if (srcAttribute || dstAttribute || IPv4Attribute) {
        if (srcAttribute) {
          // setSrc([srcAttribute.value]);
          const srcLoc = srcAttribute.geo_localisation[0];
          setSrcloc({ country: srcLoc.country_name, ...srcLoc });
        }

        if (dstAttribute) {
          // setDst([dstAttribute.value]);
          const dstLoc = dstAttribute.geo_localisation[0];
          setDstloc({ country: dstLoc.country_name, ...dstLoc });
        }

        if (IPv4Attribute && IPv4Attribute.type === "IPv4") {
          // setIPv4([IPv4Attribute.value]);

          const ipv4Loc = IPv4Attribute.geo_localisation[0];
          const blast = BlastHelper({
            latitude: ipv4Loc.latitude,
            longitude: ipv4Loc.longitude,
            country: ipv4Loc.country_name || "Unknown",
            animate: true,
            highlighted: ipv4Loc.country_name || "Unknown",
          });
          setBlast([blast]);
        }

        const executeAttack = async () => {
          if (srcAttribute && dstAttribute && srcloc && dstloc) {
            const attack = AttackHelper(srcloc, dstloc);
            setArc((prevArc) => [...prevArc.slice(-3), attack]);
            setBlast([]);
          } else if (srcAttribute && srcloc) {
            const blast = BlastHelper(srcloc);
            setBlast([blast]);
          } else if (dstAttribute && dstloc) {
            const blast = BlastHelper(dstloc);
            setBlast([blast]);
          } else {
            // Handle other cases as needed
          }
        };

        executeAttack();
      }

      setIndex((prev) => (prev + 1) % data.length);
    }, intervalValue);

    return () => clearInterval(interval);
  }, [index, data, loading, intervalValue]);


  return (
    <div className={`map-container`}>
      <div className={`flex  items-center justify-between`}>
        <div>
          <DataMapsWrapper
            projection="mercator"
            responsive
            attacks={arc}
            bubbles={blast}
            geographyConfig={{
              popupOnHover: true,
              highlightOnHover: true,
              highlightFillColor: "#FC8D59", 
              highlightBorderColor: "#FC8D59", 
              borderColor: "#364d53",
              borderWidth: 0.5,
              dataType: "topojson",
              dataUrl: "/map/map.topojson",
              highlightBorderWidth: 3, 
              highlightBorderOpacity: 1, 
              highlightFillOpacity: 0.5, 
            }}
            fills={{
              defaultFill: "#101518",
              MAJOR: "#306596",
              MEDIUM: "#0fa0fa",
              MINOR: "#bada55",
            }}
            bubblesConfig={BubblesConfig}
          />
        </div>
      </div>
    </div>
  );
};

export default MapView;

Screenshot: The screenshot illustrating the current state:

I'm seeking guidance on how to customize the font size and style for the country names displayed on the map. Any insights or code snippets would be greatly appreciated.

Answer 1

Since you are using DataMapsWrapper, I took a look at orenef/react-typescript-datamaps src/DataMapsWrapper.tsx.

There is no explicit mention or feature that would allow you to directly customize the font style and size for country names.

For customization, you would typically look for props that allow you to pass styles or classes that can be applied to the text elements, but these are not available based on the provided source code.

If the react-typescript-datamaps library is generating SVG elements for the map, you can directly target these elements using CSS.
Open the browser's developer tools and inspect the SVG to identify the text elements that render the country names. They might have a specific class or be a child of a specific SVG group (<g> element).

Write CSS rules that target the identified elements. If the elements have a class name, you can directly target that class. Otherwise, you may need to write a more specific selector, like targeting text elements within a certain parent element.

You can either add these styles to your global stylesheet or inject them into the component using inline styles or styled-components.

Assuming the text elements have a class name .country-name, the following CSS could be applied:

.country-name {
  font-family: 'Your desired font', sans-serif;
  font-size: 12px; /* Adjust as needed */
  fill: #000; /* Text color */
}

If there is no class, you might need to target SVG text elements more generically, or based on their position in the SVG hierarchy:

svg .datamaps-subunits text {
  font-family: 'Your desired font', sans-serif;
  font-size: 12px;
  fill: #000;
}

If you want to inject styles directly in your component, you might have to use a library like styled-components (as explained in this article), or create a <style> tag within your component that includes your custom CSS.

For instance, using a style tag might look like this:

const MapView = () => {
  // ... existing component code ...

  const customStyles = `
    .country-name {
      font-family: 'Your desired font', sans-serif;
      font-size: 12px;
      fill: #000;
    }
  `;

  return (
    <div className={`map-container`}>
      <style>{customStyles}</style>
      {/* ... */}
    </div>
  );
};

You may have to use !important to override any existing styles set by the library. However, this should be a last resort as it makes future maintenance of the styles more difficult.

If you're not able to override the styles as needed, you may have to consider other approaches, such as forking the library and modifying it to suit your needs, or overlaying HTML elements with the names styled as you wish.

---

I tried your CSS approach: .datamap { font-size: 16px !important; font-style: italic !important; }.

Interestingly, the italic style worked, but the font size remained unchanged. I double-checked the CSS specificity, but couldn't override the font size set by the library's styles.

If the font size is not changing despite the !important flag, there might be an inline style or a higher specificity CSS rule applied to the text elements. Use the browser's DevTools to inspect the text elements and check if there is an inline font-size style applied directly to the element.
Inline styles will override your CSS unless you use !important, but CSS properties may not override attributes directly set on SVG elements. If the library sets the font size using the font-size attribute on the <text> SVG elements, the CSS may not affect it.

Sometimes, merely using !important is not enough if another rule has higher specificity. You can increase the specificity of your selector by including more parent selectors or using an id if available: you can include more parent elements in the selector chain or use an ID, which inherently has a higher specificity than class selectors.

• If .datamap is a class applied to an SVG within a parent with a class .map-container, the selector could be:

  .map-container .datamap text {
  font-size: 16px !important;
  }
  

• If there’s an ID on any parent element, you can use it to increase specificity since ID selectors have a higher specificity than class selectors:

  #mapContainerID .datamap text {
  font-size: 16px !important;
  }
  

As a last resort, you could use JavaScript to directly manipulate the SVG text elements. That could be done within a useEffect hook that runs after the component has mounted:

useEffect(() => {
  const svgTextElements = document.querySelectorAll('.datamap text');
  svgTextElements.forEach((text) => {
    text.style.fontSize = '16px'; // Force the font size
  });
}, []);

If the library uses SVG attributes for setting the font size (such as font-size attribute on the <text> elements), CSS may not override it. You would need to use JavaScript to change these attributes. However, this is not the most React-friendly way as it bypasses the virtual DOM, but it can be a practical solution if CSS fails due to how the library applies styles.