Thank you for your work! What you did is really cool and useful!

You have a serious error on the map that many site users don't like :(

Crimea has not belonged to Ukraine for several years. It belongs to Russia. Screenshot: https://monosnap.com/file/ARm0SqeLMD76LNFxDGIvvUYpWSZIWQ

I tried to fix it but it didn't work out. I will be very grateful if you fix it or tell me what SVG paths i need to put for Ukraine and Russia.

Thank you for your work!

The library does not work in IE11 :( To test simply go to the example page https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP and you will not see any map.

It does work in edge though it has scaling issues

As much as we may all not like internet explorer, IE 11 does supports SVGs, doesn't hit EOL until 2023 and is still used across a lot of corporate netwoks so adding support would be good

The error appears to be around the use of assign at character 29774 of svgmap.min.js

Further investigation shows that it is indeed this line as Object.assign is not supported in IE and needs a polyfill or other work around in order to work

Since no other element have a z-index defined, 0 is considered for all elements.

Having z-index 50 for the map controls and z-index 10000 for the tooltips can create overlay issues in several cases.

I'm suggesting z-index 1 for map controls, and z-index 2 for tooltips.

This should avoid lots of issues with Boostrap and other CSS framework implementations, as they generally have higher z-index values defined.

A clear example where z-index 50 for map controls is too high, is on a layout that has, let's say... a "slide-over" menu, with a z-index less than that, the map controls would actually overlay that menu, which is really undesirable. Or the tooltip would overlay the primary navigation element (let's say the header), no element on a page should supersed that.

I have already done the required tests to ensure that it still works as expected, tooltips will overlay everything, and the map controls will overlay the map elements.

Example to hide tooltip when there are no values...

	onGetTooltip:function(tooltip, countryID, countryValues) {
		if(!countryValues) {
			tooltip.style.display='none';
		} else {
			tooltip.style.display='';
		}
	},

Make your own tooltip...

	onGetTooltip:function(tooltip, countryID, countryValues) {
		var div= document.createElement('div');
		div.innerHTML='custom stuff for '+countryID;
		return div;
	},

A hacky way to get continents...

var continents={
	"NA":"North America"
};
var continentsMap={
	US:"NA",
	CA:"NA",
	MX:"NA"
};
```

```
	onGetTooltip:function(tooltip, countryID, countryValues) {
		if(continentsMap[countryID]) {
			var div= document.createElement('div');
			div.innerHTML=continents[continentsMap[countryID]];
			return div;
		}
	},
```

I have encountered an exception while mouse hover on the country which had data to view the tooltip, I have added this variable 'tooltipContentTable' in window object to solve this undefined variable exception. could be really helpful if you could declare this variable inside js file.

Currently, when trying to pan the map and mouse cursor is on any country, click event will be triggered after panning, URL will be changed (if data link is set). This seems limiting how you can pan the map.

This PR will prevent click from firing by logging if mouse (or finger) has been moved before mouse button / finger press is released.

And also, thank you for the great project!

@StephanWagner - awesome project 🙌 I wanted the option to set a specific color manually from the data, so here's a PR of that functionality. Example use:

    ...
    values: {
      AF: {gdp: 587, change: 4.73, color: '#000'}
    ...

...or override the color option (in case of conflicts):

new svgMap({
  targetElementID: 'svgMap',
  manualColorAttribute: 'manualcolor', //override 'color'
  data: {
    data: {
      gdp: {
        name: 'GDP per capita',
        format: '{0} USD',
        thousandSeparator: ',',
        thresholdMax: 50000,
        thresholdMin: 1000
      },
      change: {
        name: 'Change to year before',
        format: '{0} %'
      }
    },
    applyData: 'gdp',
    values: {
      AF: {gdp: 587, change: 4.73, manualcolor: '#000'}, // use the overridden value here to set a color manually
      AL: {gdp: 4583, change: 11.09},
      DZ: {gdp: 4293, change: 10.01}
      // ...
    }
  }
});

I feel like having to go back and forth every time you open a new link can be a downside for some users.

I tried adding my own JS after setting the options but due to my limited knowledge of the language, I couldn't override the default behaviour.

We noticed when trying to use the map that, even when zoomed in, Singapore was no longer visible or able to be accessed if you have previously hovered over Malaysia (as it brings that particular path to the front, covering Singapore). We resolved this by editing the SVG path data in mapPaths.js to clean up the division between the two.

The path information is below in case it is useful for anyone. After updating the path information we just ran the build process again to generate new versions of the combined .js files.

Singapore: M1561.4, 563.4l-0.5-0.3l-0.8-0.1l-0.6,0.1l-0.3,0.6 l0.0,0.6L1561.8,564z

Malaysia: M1543.6,532.7l-4.7-2.8l-0.9,1.1l1.4,2.7l-0.4,4.7l2.1,3.4l1,5.3 l3.4,4.3l0.8,3.2l6.7,5l5.4,4.8 0.8-0.1 0-0.6 0.3-0.6 0.6-0.1 0.8,0.1 0.5,0.3 0.4,0.6 l0.6-0.1 l0.1-2.1 l-2.3-5.6 l-2.1-1.8l-0.5-3.8l-0.6-2.1l0.5-2.9l-0.5-4.3l-2.6-4.3l-3.5-3.8l-1.3-0.6 l-1.7,2.6l-3.7,0.8L1543.6,532.7L1543.6,532.7z M1642.6,543.7l-1.2-3.1l3.8-0.4l0.3-2.4l-4.8-2l-3.8-1.7l-0.4-2.8l-3.1-3.2h-2.3 l-2.5,5l-4.1,4.4l-0.1,3.1l-0.1,4.1l-2.7-0.2l-1.1,2.2l-2.7-3.3l-2.6,4l-3.8,5l-6.7,1.4l-2.4,1.2l-0.9,5.4l-4.4,1.2l-4.1-2.2l1,4.3 l3.9,3.5l3.6-1.2l3.6,0.4l3.2-3.2l2.7-0.6l5.4,1.8l4.5-1.3l2.7-8.9l2-2.2l1.7-7.2h6.4l5,1L1642.6,543.7z

Bumps minimatch and recursive-readdir. These dependencies needed to be updated together. Updates minimatch from 3.0.4 to 3.1.2

Updates recursive-readdir from 2.2.2 to 2.2.3

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Bumps decode-uri-component from 0.2.0 to 0.2.2.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

Two questions:

• Its possible load data through ajax requisition?
• And, how to remove the current dataset on a loaded map?

Congratulations for this project. It's very helpful.

Hi.

There is not correct work of continent selector when map container has small size.

Here screenshot form your example page ( html folder ) -> https://prnt.sc/PzqQNWj6mRBP -> https://prnt.sc/r09NjimffwaX

It would be nice to fix this. Thank's.

Let's say I've created a map like below:

                    this.map = new svgMap({
                        targetElementID: 'cmsSvgMap',
                        data: mapData,
                        colorMax: '#393c4d',
                        colorMin: '#393c4d73',
                        flagType: 'emoji',
                        noDataText: this.$t('analytics.cookies.map.no_data'),
                        countryNames: this.countries.reduce((acc, cur) => ({ ...acc, [cur.country_id??'_unknown']: cur.country_name }), {})
                    });

I then want to destroy what is in this.map - there doesn't seem to be a destroy() function?

Hi, I have a html table with some countries. Clicking on country row I have a country code, so I need to show tooltip (and zoom on it if necessary), highlight country (same as mousenter event) programmatically using id of country path. It's possible with this script ?

Alberto

Is there a function to convert a lat/lon (in degrees) to an x,y pixel on the map? If not, what projection is the map using by default and I can probably make one...

I'm trying to use svgMap with Next.js and Typescript and I feel like I'm doing something wrong.

First of all, I can't find any '@types/svgmap' package when I try to install one, so I just need to force Typescript to ignore this.

Secondly, I am using the library as it is documented, but I get a 'window is not defined' error when I run the code. I have created a div element with the "svgMap" id with it as follows: <div className="map-container w-full" id="svgMap"></div>

I imported the library, with its css.

// @ts-ignore
import svgMap from "svgmap";
import "svgmap/dist/svgMap.min.css"

and created a new svgMap when the component is mounted. I've also made sure that it's only run if 'window' is defined. Here's the code:

useEffect(() => {
    new svgMap({
      targetElementID: "svgMap",
      data: {
        data: {
          gdp: {
            name: "GDP per capita",
            format: "{0} USD",
            thousandSeparator: ",",
            thresholdMax: 50000,
            thresholdMin: 1000,
          },
          change: {
            name: "Change to year before",
            format: "{0} %",
          },
        },
        applyData: "gdp",
        values: {
          AF: { gdp: 587, change: 4.73 },
          AL: { gdp: 4583, change: 11.09 },
          DZ: { gdp: 4293, change: 10.01 },
          // ...
        },
      },
    });
  }, []);

That is an example map data that's stated in the documentation of the library, and as I said when I run it I get this:

Am I using the library in a wrong way? or Is it not compatible with React yet?