svgmap 2.12.2 → 2.14.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/README.md +60 -58
  2. package/demo/es6/package-lock.json +1888 -875
  3. package/demo/es6/package.json +1 -1
  4. package/demo/html/index.html +1 -0
  5. package/demo/react/app/package-lock.json +10808 -5764
  6. package/demo/react/app/package.json +1 -1
  7. package/dist/svgMap.css +3 -0
  8. package/dist/svgMap.js +53 -9
  9. package/dist/svgMap.min.css +1 -1
  10. package/dist/svgMap.min.js +1 -1
  11. package/package.json +6 -6
  12. package/src/js/svgMap.js +53 -9
  13. package/src/scss/map.scss +4 -0
  14. package/src/scss/variables.scss +1 -1
package/README.md CHANGED
@@ -74,69 +74,71 @@ https://stephanwagner.me/create-world-map-charts-with-svgmap#svgMapDemoGDP
74
74
 
75
75
  You can pass the following options into svgMap:
76
76
 
77
- | Option | Type | Default | |
78
- |----------------------------------------------------------------|----------------------|-----------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|
79
- | `targetElementID` | `string` | | The ID of the element where the world map will render (Required) |
80
- | `minZoom` | `float` | `1` | Minimal zoom level |
81
- | `maxZoom` | `float` | `25` | Maximal zoom level |
82
- | `initialZoom` | `float` | `1.06` | Initial zoom level |
83
- | `initialPan` | `object` | | Initial pan on x and y axis (e.g. `{ x: 30, y: 60 }`) |
84
- | `showContinentSelector` | `boolean` | `false` | Show continent selector |
85
- | `zoomScaleSensitivity` | `float` | `0.2` | Sensitivity when zooming |
86
- | `showZoomReset` | `boolean` | `false` | Show zoom reset button |
87
- | `mouseWheelZoomEnabled` | `boolean` | `true` | Enables or disables zooming with the scroll wheel |
88
- | `mouseWheelZoomWithKey` | `boolean` | `false` | Allow zooming only when one of the following keys is pressed: SHIFT, CONTROL, ALT, COMMAND, OPTION |
89
- | `mouseWheelKeyMessage` | `string` | `'Press the [ALT] key to zoom'` | The message when trying to scroll without a key |
90
- | `mouseWheelKeyMessageMac` | `string ` | `Press the [COMMAND] key to zoom` | The message when trying to scroll without a key on MacOS |
91
- | `colorMax` | `string` | `'#CC0033'` | Color for highest value. Accepts CSS vars, color names, rgb or hex values. |
92
- | `colorMin` | `string` | `'#FFE5D9'` | Color for lowest value. Accepts CSS vars, color names, rgb or hex values. |
93
- | `colorNoData` | `string` | `'#E2E2E2'` | Color when there is no data. Accepts CSS vars, color names, rgb or hex values. |
94
- | `flagType` | `'image'`, `'emoji'` | `'image'` | The type of the flag in the tooltip |
95
- | `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'` |
96
- | `hideFlag` | `boolean` | `false` | Hide the flag in tooltips |
97
- | `noDataText` | `string` | `'No data available'` | The text to be shown when no data is present |
98
- | `touchLink` | `boolean` | `false` | Set to `true` to open the link (see `data.values.link`) on mobile devices, by default the tooltip will be shown |
99
- | `onGetTooltip` | `function` | | Called when a tooltip is created to custimize the tooltip content (`function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }`) |
100
- | `countries` | `object` | | Additional options specific to countries: |
101
- |    `↳ EH` | `boolean` | `true` | When set to `false`, Western Sahara (EH) will be combined with Morocco (MA) |
102
- | `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: |
103
- |    `↳ name` | `string` | | The name of the data, it will be shown in the tooltip |
104
- |    `↳ format` | `string` | | The format for the data value, `{0}` will be replaced with the actual value |
105
- |    `↳ thousandSeparator` | `string` | `','` | The character to use as thousand separator |
106
- |    `↳ thresholdMax` | `number` | `null` | Maximal value to use for coloring calculations |
107
- |    `↳ thresholdMin` | `number` | `0` | Minimum value to use for coloring calculations |
108
- |    `↳ applyData` | `string` | | The ID (key) of the data that will be used for coloring |
109
- |    `↳ 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 |
110
- |         `↳ color` | `string` | | Forces a color for this country |
111
- |         `↳ link` | `string` | | An URL to redirect to when clicking the country |
112
- |         `↳ 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 |
113
- | `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 |
77
+ | Option | Type | Default ||
78
+ |-|-|-|-|
79
+ | `targetElementID` | `string` | | The ID of the element where the world map will render (Required) |
80
+ | `allowInteraction` | `boolean` | `true` | Allow users to zoom and pan around the map
81
+ | `minZoom` | `float` | `1` | Minimal zoom level |
82
+ | `maxZoom` | `float` | `25` | Maximal zoom level |
83
+ | `initialZoom` | `float` | `1.06` | Initial zoom level |
84
+ | `initialPan` | `object` | | Initial pan on x and y axis (e.g. `{ x: 30, y: 60 }`) |
85
+ | `showContinentSelector` | `boolean` | `false` | Show continent selector |
86
+ | `zoomScaleSensitivity` | `float` | `0.2` | Sensitivity when zooming |
87
+ | `showZoomReset` | `boolean` | `false` | Show zoom reset button |
88
+ | `mouseWheelZoomEnabled` | `boolean` | `true` | Enables or disables zooming with the scroll wheel |
89
+ | `mouseWheelZoomWithKey` | `boolean` | `false` | Allow zooming only when one of the following keys is pressed: SHIFT, CONTROL, ALT, COMMAND, OPTION |
90
+ | `mouseWheelKeyMessage` | `string` | `'Press the [ALT] key to zoom'` | The message when trying to scroll without a key |
91
+ | `mouseWheelKeyMessageMac` | `string ` | `Press the [COMMAND] key to zoom` | The message when trying to scroll without a key on MacOS |
92
+ | `colorMax` | `string` | `'#CC0033'` | Color for highest value. Accepts CSS vars, color names, rgb or hex values. |
93
+ | `colorMin` | `string` | `'#FFE5D9'` | Color for lowest value. Accepts CSS vars, color names, rgb or hex values. |
94
+ | `colorNoData` | `string` | `'#E2E2E2'` | Color when there is no data. Accepts CSS vars, color names, rgb or hex values. |
95
+ | `flagType` | `'image'`, `'emoji'` | `'image'` | The type of the flag in the tooltip |
96
+ | `ratioType` | `'linear'`, `'log'`, `function` | `'linear'` | Ratio type for the color scale |
97
+ | `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'` |
98
+ | `hideFlag` | `boolean` | `false` | Hide the flag in tooltips |
99
+ | `noDataText` | `string` | `'No data available'` | The text to be shown when no data is present |
100
+ | `touchLink` | `boolean` | `false` | Set to `true` to open the link (see `data.values.link`) on mobile devices, by default the tooltip will be shown |
101
+ | `onGetTooltip` | `function` | | Called when a tooltip is created to custimize the tooltip content (`function (tooltipDiv, countryID, countryValues) { return 'Custom HTML'; }`) |
102
+ | `countries` | `object` | | Additional options specific to countries: |
103
+ |    `↳ EH` | `boolean` | `true` | When set to `false`, Western Sahara (EH) will be combined with Morocco (MA) |
104
+ | `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: |
105
+ |    `↳ name` | `string` | | The name of the data, it will be shown in the tooltip |
106
+ |    `↳ format` | `string` | | The format for the data value, `{0}` will be replaced with the actual value |
107
+ |    `↳ thousandSeparator` | `string` | `','` | The character to use as thousand separator |
108
+ |    `↳ thresholdMax` | `number` | `null` | Maximal value to use for coloring calculations |
109
+ |    `↳ thresholdMin` | `number` | `0` | Minimum value to use for coloring calculations |
110
+ |    `↳ applyData` | `string` | | The ID (key) of the data that will be used for coloring |
111
+ |    `↳ 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 |
112
+ |         `↳ color` | `string` | | Forces a color for this country |
113
+ |         `↳ link` | `string` | | An URL to redirect to when clicking the country |
114
+ |         `↳ 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 |
115
+ | `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 |
114
116
  ---
115
117
 
116
118
  ## Styling
117
119
  You can overwrite the following scss variables to customize the style of the map:
118
120
 
119
- | Variable | Default |
120
- |---------------------------------|------------------------------|
121
- | $textColor | #111 |
122
- | $textColorLight | #777 |
123
- | $oceanColor | #d9ecff |
124
- | $mapActiveStrokeColor | #333 |
125
- | $mapActiveStrokeWidth | 1.5 |
126
- | $blockZoomNoticeColor | #fff |
127
- | $blockZoomNoticeBackgroundColor | rgba(0, 0, 0, 0.8) |
128
- | $mapControlsColor | #fff |
129
- | $mapControlsBackgroundColor | #fff |
130
- | $mapControlsIconColor | #ccc |
131
- | $mapControlsIconColorActive | #000 |
132
- | $mapControlsDisabledColor | #eee |
133
- | $mapControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
134
- | $mapTooltipColor | #111 |
135
- | $mapTooltipBackgroundColor | #fff |
136
- | $mapTooltipFlagBackgroundColor | rgba(0, 0, 0, 0.15) |
137
- | $mapTooltipBoxShadowColor | rgba(0, 0, 0, 0.2) |
138
- | $continentControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
139
- | $countryStrokeColor | #fff |
121
+ | Variable | Default |
122
+ |-|-|
123
+ | $textColor | #111 |
124
+ | $textColorLight | #777 |
125
+ | $oceanColor | #d9ecff |
126
+ | $mapActiveStrokeColor | #333 |
127
+ | $mapActiveStrokeWidth | 1.5 |
128
+ | $blockZoomNoticeColor | #fff |
129
+ | $blockZoomNoticeBackgroundColor | rgba(0, 0, 0, 0.8) |
130
+ | $mapControlsColor | #fff |
131
+ | $mapControlsBackgroundColor | #fff |
132
+ | $mapControlsIconColor | #ccc |
133
+ | $mapControlsIconColorActive | #000 |
134
+ | $mapControlsDisabledColor | #eee |
135
+ | $mapControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
136
+ | $mapTooltipColor | #111 |
137
+ | $mapTooltipBackgroundColor | #fff |
138
+ | $mapTooltipFlagBackgroundColor | rgba(0, 0, 0, 0.15) |
139
+ | $mapTooltipBoxShadowColor | rgba(0, 0, 0, 0.2) |
140
+ | $continentControlsBoxShadow | 0 0 0 2px rgba(0, 0, 0, 0.1) |
141
+ | $countryStrokeColor | #fff |
140
142
  ---
141
143
 
142
144
  ## Localize