Open skollxdevstar opened 12 months ago
orenef
commented
11 months ago hi @skollxdevstar , are you using DataMapsWrapper or AttackMap?
If you using AttackMap you can look in the demo code: https://github.com/orenef/react-typescript-datamaps/blob/main/src/AttackMap.tsx#L26 and the relevant props: https://github.com/orenef/react-typescript-datamaps/blob/main/src/ArcPlugin.tsx#L21
skollxdevstar
commented
11 months ago Im using DataMapsWrapper. Here is a snippet of the code:
<DataMapsWrapper
projection="mercator"
responsive
attacks={arc}
bubbles={blast}
geographyConfig={{
popupOnHover: true,
highlightOnHover: true,
highlightFillColor: "#1b99a8", // set highlight fill color
highlightBorderColor: "#1b99a8", // set highlight border color
borderColor: "#1b99a8",
fontFamily: "Arial",
borderWidth: 0.5,
dataType: "topojson",
dataUrl: "/map/map.topojson",
highlightBorderWidth: 3, // set highlight border width
highlightBorderOpacity: 1, // set highlight border opacity
highlightFillOpacity: 0.5, // set highlight fill opacity
}}
fills={{
defaultFill: "#101518",
MAJOR: "#306596",
MEDIUM: "#0fa0fa",
MINOR: "#bada55",
}}
bubblesConfig={BubblesConfig}
done={function (datamap) {
datamap.svg.call(d3.behavior.zoom().on("zoom", zoom));
function zoom() {
datamap.svg
.selectAll("g")
.attr(
"transform",
translate(${d3.event.translate}) scale(${d3.event.scale})
);
}
}}
/>
I am currently utilizing the react-typescript-datamaps library in a ReactJS project, and I'm encountering difficulties in customizing the font style and size for country names displayed on the map. Despite my efforts, I haven't been successful in finding a suitable approach to implement these changes.
Expected Behavior: I expect to be able to easily customize the font style and size for country names on the map using the library's features.
I would appreciate any guidance, insights, or code snippets on how to customize the font size and style for the country names displayed on the map using the react-typescript-datamaps library.
Thank you for your support!