{"id":17195158,"url":"https://github.com/stephanwagner/svgmap","last_synced_at":"2026-01-03T04:11:21.541Z","repository":{"id":38434889,"uuid":"156763311","full_name":"StephanWagner/svgMap","owner":"StephanWagner","description":" svgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.","archived":false,"fork":false,"pushed_at":"2025-04-29T02:13:08.000Z","size":3026,"stargazers_count":272,"open_issues_count":31,"forks_count":43,"subscribers_count":4,"default_branch":"master","last_synced_at":"2025-05-15T03:07:06.638Z","etag":null,"topics":["chart","svg-map","world-map"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/StephanWagner.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2018-11-08T20:15:06.000Z","updated_at":"2025-05-08T08:59:59.000Z","dependencies_parsed_at":"2023-02-12T18:15:29.014Z","dependency_job_id":"c728c491-b948-4ec3-b9e9-45ee768297b5","html_url":"https://github.com/StephanWagner/svgMap","commit_stats":{"total_commits":318,"total_committers":15,"mean_commits":21.2,"dds":0.2704402515723271,"last_synced_commit":"099c9ebf7b945bc095f4272a29b2b64378e27756"},"previous_names":[],"tags_count":44,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanWagner%2FsvgMap","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanWagner%2FsvgMap/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanWagner%2FsvgMap/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/StephanWagner%2FsvgMap/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/StephanWagner","download_url":"https://codeload.github.com/StephanWagner/svgMap/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254264769,"owners_count":22041794,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["chart","svg-map","world-map"],"created_at":"2024-10-15T01:49:36.864Z","updated_at":"2026-01-03T04:11:21.535Z","avatar_url":"https://github.com/StephanWagner.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# svgMap\n\nsvgMap is a JavaScript library that lets you easily create an interactable world map comparing customizable data for each country.\n\nLive demo: https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP\n\n---\n\n## Install\n\n### ES6\n\n```bash\nnpm install --save svgmap\n```\n\n```javascript\nimport svgMap from 'svgmap';\nimport 'svgmap/dist/svg-map.css';\n```\n\n### CDN\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/svg-pan-zoom@3.6.1/dist/svg-pan-zoom.min.js\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/svgmap@v2.18.0/dist/svg-map.umd.min.js\"\u003e\u003c/script\u003e\n\u003clink href=\"https://cdn.jsdelivr.net/npm/svgmap@v2.18.0/dist/svg-map.min.css\" rel=\"stylesheet\"\u003e\n```\n\n---\n\n## Usage\n\nCreate an HTML element where to show your map, then use JavaScript to initialize:\n\n```html\n\u003cdiv id=\"svgMap\"\u003e\u003c/div\u003e\n```\n\n```javascript\nnew svgMap({\n  targetElementID: 'svgMap',\n  data: {\n    data: {\n      gdp: {\n        name: 'GDP per capita',\n        format: '{0} USD',\n        thousandSeparator: ',',\n        thresholdMax: 50000,\n        thresholdMin: 1000\n      },\n      change: {\n        name: 'Change to year before',\n        format: '{0} %'\n      }\n    },\n    applyData: 'gdp',\n    values: {\n      AF: { gdp: 587, change: 4.73 },\n      AL: { gdp: 4583, change: 11.09 },\n      DZ: { gdp: 4293, change: 10.01 }\n      // ...\n    }\n  }\n});\n```\n\nThis example code creates a world map with the GDP per capita and its change to the previous year:\nhttps://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP\n\n---\n\n## Options\n\nYou can pass the following options into svgMap:\n\n| Option | Type | Default ||\n|-|-|-|-|\n| `targetElementID` | `string` | | The ID of the element where the world map will render (Required) |\n| `allowInteraction` | `boolean` | `true` | Allow users to zoom and pan around the map\n| `minZoom` | `float` | `1` | Minimal zoom level |\n| `maxZoom` | `float` | `25` | Maximal zoom level |\n| `initialZoom` | `float` | `1.06` | Initial zoom level |\n| `initialPan` | `object` | | Initial pan on x and y axis (e.g. `{ x: 30, y: 60 }`) |\n| `showContinentSelector` | `boolean` | `false` | Show continent selector |\n| `zoomScaleSensitivity` | `float` | `0.2` | Sensitivity when zooming |\n| `showZoomReset` | `boolean` | `false` | Show zoom reset button |\n| `resetZoomOnResize` | `boolean` | `false` | Reset map zoom on resize |\n| `zoomButtonsPosition` | `string` | `'bottomLeft'` | Position of the zoom buttons. Possible values: `'topLeft'`, `'topRight'`, `'bottomLeft'`, `'bottomRight'` |\n| `mouseWheelZoomEnabled` | `boolean` | `true` | Enables or disables zooming with the scroll wheel |\n| `mouseWheelZoomWithKey` | `boolean` | `false` | Allow zooming only when one of the following keys is pressed: SHIFT, CONTROL, ALT, COMMAND, OPTION |\n| `mouseWheelKeyMessage` | `string` | `'Press the [ALT] key to zoom'` | The message when trying to scroll without a key |\n| `mouseWheelKeyMessageMac` | `string ` | `Press the [COMMAND] key to zoom` | The message when trying to scroll without a key on MacOS |\n| `colorMax` | `string` | `'#CC0033'` | Color for highest value. Accepts CSS vars, color names, rgb or hex values. |\n| `colorMin` | `string` | `'#FFE5D9'` | Color for lowest value. Accepts CSS vars, color names, rgb or hex values. |\n| `colorNoData` | `string` | `'#E2E2E2'` | Color when there is no data. Accepts CSS vars, color names, rgb or hex values. |\n| `flagType` | `'image'`, `'emoji'` | `'image'` | The type of the flag in the tooltip |\n| `ratioType` | `'linear'`, `'log'`, `function` | `'linear'` | Ratio type for the color scale |\n| `flagURL` | `string` | | The URL to the flags when using flag type `'image'`. The placeholder `{0}` will get replaced with the lowercase [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code. Default: `'https://cdn.jsdelivr.net/gh/hjnilsson/country-flags@latest/svg/{0}.svg'` |\n| `hideFlag` | `boolean` | `false` | Hide the flag in tooltips |\n| `noDataText` | `string` | `'No data available'` | The text to be shown when no data is present |\n| `touchLink` | `boolean` | `false` | Set to `true` to open the link (see `data.values.link`) on mobile devices, by default the tooltip will be shown |\n| `onGetTooltip` | `function` | | Called when a tooltip is created to custimize the tooltip content (`function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }`) |\n| `countries` | `object` | | Additional options specific to countries: |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ EH` | `boolean` | `true` | When set to `false`, Western Sahara (EH) will be combined with Morocco (MA) |\n| `data` | `object` | | The chart data to use for coloring and to show in the tooltip. Use a unique data-id as key and provide following options as value: |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ name` | `string` | | The name of the data, it will be shown in the tooltip |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ format` | `string` | | The format for the data value, `{0}` will be replaced with the actual value |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ thousandSeparator` | `string` | `','` | The character to use as thousand separator |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ thresholdMax` | `number` | `null` | Maximal value to use for coloring calculations |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ thresholdMin` | `number` | `0` | Minimum value to use for coloring calculations |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ applyData` | `string` | | The ID (key) of the data that will be used for coloring |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ values` | `object` | | An object with the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code as key and the chart data for each country as value |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ color` | `string` | | Forces a color for this country |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ link` | `string` | | An URL to redirect to when clicking the country |\n| \u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;`↳ linkTarget` | `string` | | The target of the link. By default the link will be opened in the same tab. Use `'_blank'` to open the link in a new tab |\n| `countryNames` | `object` | | An object with the [ISO 3166-1 alpha-2](https://en.wikipedia.org/wiki/ISO_3166-1_alpha-2) country code as key and the country name as value |\n---\n\n## Styling\nYou can overwrite the following scss variables to customize the style of the map:\n\n| Variable | Default |\n|-|-|\n| $textColor | #111 |\n| $textColorLight | #777 |\n| $oceanColor | #d9ecff |\n| $mapActiveStrokeColor | #333 |\n| $mapActiveStrokeWidth | 1.5 |\n| $blockZoomNoticeColor | #fff |\n| $blockZoomNoticeBackgroundColor | rgba(0, 0, 0, 0.8) |\n| $mapControlsColor | #fff |\n| $mapControlsBackgroundColor | #fff |\n| $mapControlsIconColor | #ccc |\n| $mapControlsIconColorActive | #000 |\n| $mapControlsDisabledColor | #eee |\n| $mapControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |\n| $mapTooltipColor | #111 |\n| $mapTooltipBackgroundColor | #fff |\n| $mapTooltipFlagBackgroundColor | rgba(0, 0, 0, 0.15) |\n| $mapTooltipBoxShadowColor | rgba(0, 0, 0, 0.2) |\n| $continentControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |\n| $countryStrokeColor | #fff |\n---\n\n## Localize\n\nUse the option `countryNames` to translate country names. In the folder `demo/html/local` or `demo/es6/local` you can find translations in following languages: Arabic, Chinese, English, French, German, Hindi, Portuguese, Russian, Spanish, Urdu.\n\nTo create your own translations, check out [country-list](https://github.com/umpirsky/country-list) by [Saša Stamenković](https://github.com/umpirsky).\n\n---\n\n## Attribution\n\nIf you need more detailed maps or more options for your data, there is a great open source project called [datawrapper](https://github.com/datawrapper/datawrapper) out there, with a lot more power than svgMap.\n\nsvgMap uses [svg-pan-zoom](https://github.com/bumbu/svg-pan-zoom) by [Anders Riutta](https://github.com/ariutta) (now maintained by [bumpu](https://github.com/bumpu)).\n\nThe country flag images are from [country-flags](https://github.com/hampusborgos/country-flags) by [Hampus Joakim Borgos](https://github.com/hampusborgos).\n\nMost data in the demos was taken from [Wikipedia](https://www.wikipedia.org).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanwagner%2Fsvgmap","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fstephanwagner%2Fsvgmap","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fstephanwagner%2Fsvgmap/lists"}