arevdata 0.1.17

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 (289) hide show
  1. package/README.md +499 -0
  2. package/dist/arevdata.cjs +38955 -0
  3. package/dist/arevdata.cjs.map +1 -0
  4. package/dist/arevdata.js +38955 -0
  5. package/dist/arevdata.js.map +1 -0
  6. package/dist/assets/flags/LICENSE.flag-icons.txt +21 -0
  7. package/dist/assets/flags/README.md +11 -0
  8. package/dist/assets/flags/index.html +88 -0
  9. package/dist/assets/flags/overrides/xn.svg +6 -0
  10. package/dist/assets/flags/svg/ad.svg +150 -0
  11. package/dist/assets/flags/svg/ae.svg +6 -0
  12. package/dist/assets/flags/svg/af.svg +81 -0
  13. package/dist/assets/flags/svg/ag.svg +14 -0
  14. package/dist/assets/flags/svg/al.svg +5 -0
  15. package/dist/assets/flags/svg/am.svg +5 -0
  16. package/dist/assets/flags/svg/ao.svg +13 -0
  17. package/dist/assets/flags/svg/ar.svg +32 -0
  18. package/dist/assets/flags/svg/at.svg +4 -0
  19. package/dist/assets/flags/svg/au.svg +8 -0
  20. package/dist/assets/flags/svg/az.svg +8 -0
  21. package/dist/assets/flags/svg/ba.svg +12 -0
  22. package/dist/assets/flags/svg/bb.svg +6 -0
  23. package/dist/assets/flags/svg/bd.svg +4 -0
  24. package/dist/assets/flags/svg/be.svg +7 -0
  25. package/dist/assets/flags/svg/bf.svg +7 -0
  26. package/dist/assets/flags/svg/bg.svg +5 -0
  27. package/dist/assets/flags/svg/bh.svg +4 -0
  28. package/dist/assets/flags/svg/bi.svg +15 -0
  29. package/dist/assets/flags/svg/bj.svg +14 -0
  30. package/dist/assets/flags/svg/bn.svg +36 -0
  31. package/dist/assets/flags/svg/bo.svg +673 -0
  32. package/dist/assets/flags/svg/br.svg +45 -0
  33. package/dist/assets/flags/svg/bs.svg +13 -0
  34. package/dist/assets/flags/svg/bt.svg +89 -0
  35. package/dist/assets/flags/svg/bw.svg +7 -0
  36. package/dist/assets/flags/svg/by.svg +18 -0
  37. package/dist/assets/flags/svg/bz.svg +145 -0
  38. package/dist/assets/flags/svg/ca.svg +4 -0
  39. package/dist/assets/flags/svg/cd.svg +5 -0
  40. package/dist/assets/flags/svg/cf.svg +15 -0
  41. package/dist/assets/flags/svg/cg.svg +12 -0
  42. package/dist/assets/flags/svg/ch.svg +9 -0
  43. package/dist/assets/flags/svg/cl.svg +13 -0
  44. package/dist/assets/flags/svg/cm.svg +15 -0
  45. package/dist/assets/flags/svg/cn.svg +11 -0
  46. package/dist/assets/flags/svg/co.svg +7 -0
  47. package/dist/assets/flags/svg/cr.svg +7 -0
  48. package/dist/assets/flags/svg/cu.svg +13 -0
  49. package/dist/assets/flags/svg/cv.svg +13 -0
  50. package/dist/assets/flags/svg/cy.svg +6 -0
  51. package/dist/assets/flags/svg/cz.svg +5 -0
  52. package/dist/assets/flags/svg/de.svg +5 -0
  53. package/dist/assets/flags/svg/dj.svg +13 -0
  54. package/dist/assets/flags/svg/dk.svg +5 -0
  55. package/dist/assets/flags/svg/dm.svg +152 -0
  56. package/dist/assets/flags/svg/do.svg +121 -0
  57. package/dist/assets/flags/svg/dz.svg +5 -0
  58. package/dist/assets/flags/svg/ec.svg +138 -0
  59. package/dist/assets/flags/svg/ee.svg +5 -0
  60. package/dist/assets/flags/svg/eg.svg +38 -0
  61. package/dist/assets/flags/svg/er.svg +8 -0
  62. package/dist/assets/flags/svg/es.svg +544 -0
  63. package/dist/assets/flags/svg/et.svg +14 -0
  64. package/dist/assets/flags/svg/fi.svg +5 -0
  65. package/dist/assets/flags/svg/fj.svg +120 -0
  66. package/dist/assets/flags/svg/fm.svg +11 -0
  67. package/dist/assets/flags/svg/fr.svg +5 -0
  68. package/dist/assets/flags/svg/ga.svg +7 -0
  69. package/dist/assets/flags/svg/gb.svg +7 -0
  70. package/dist/assets/flags/svg/gd.svg +27 -0
  71. package/dist/assets/flags/svg/ge.svg +6 -0
  72. package/dist/assets/flags/svg/gh.svg +6 -0
  73. package/dist/assets/flags/svg/gm.svg +14 -0
  74. package/dist/assets/flags/svg/gn.svg +7 -0
  75. package/dist/assets/flags/svg/gq.svg +23 -0
  76. package/dist/assets/flags/svg/gr.svg +16 -0
  77. package/dist/assets/flags/svg/gt.svg +204 -0
  78. package/dist/assets/flags/svg/gw.svg +13 -0
  79. package/dist/assets/flags/svg/gy.svg +9 -0
  80. package/dist/assets/flags/svg/hn.svg +18 -0
  81. package/dist/assets/flags/svg/hr.svg +58 -0
  82. package/dist/assets/flags/svg/ht.svg +116 -0
  83. package/dist/assets/flags/svg/hu.svg +7 -0
  84. package/dist/assets/flags/svg/id.svg +4 -0
  85. package/dist/assets/flags/svg/ie.svg +7 -0
  86. package/dist/assets/flags/svg/il.svg +14 -0
  87. package/dist/assets/flags/svg/in.svg +25 -0
  88. package/dist/assets/flags/svg/iq.svg +10 -0
  89. package/dist/assets/flags/svg/ir.svg +219 -0
  90. package/dist/assets/flags/svg/is.svg +12 -0
  91. package/dist/assets/flags/svg/it.svg +7 -0
  92. package/dist/assets/flags/svg/jm.svg +8 -0
  93. package/dist/assets/flags/svg/jo.svg +16 -0
  94. package/dist/assets/flags/svg/jp.svg +11 -0
  95. package/dist/assets/flags/svg/ke.svg +23 -0
  96. package/dist/assets/flags/svg/kg.svg +4 -0
  97. package/dist/assets/flags/svg/kh.svg +61 -0
  98. package/dist/assets/flags/svg/ki.svg +36 -0
  99. package/dist/assets/flags/svg/km.svg +16 -0
  100. package/dist/assets/flags/svg/kn.svg +14 -0
  101. package/dist/assets/flags/svg/kp.svg +15 -0
  102. package/dist/assets/flags/svg/kr.svg +24 -0
  103. package/dist/assets/flags/svg/kw.svg +13 -0
  104. package/dist/assets/flags/svg/kz.svg +36 -0
  105. package/dist/assets/flags/svg/la.svg +12 -0
  106. package/dist/assets/flags/svg/lb.svg +15 -0
  107. package/dist/assets/flags/svg/lc.svg +8 -0
  108. package/dist/assets/flags/svg/li.svg +43 -0
  109. package/dist/assets/flags/svg/lk.svg +22 -0
  110. package/dist/assets/flags/svg/lr.svg +14 -0
  111. package/dist/assets/flags/svg/ls.svg +8 -0
  112. package/dist/assets/flags/svg/lt.svg +7 -0
  113. package/dist/assets/flags/svg/lu.svg +5 -0
  114. package/dist/assets/flags/svg/lv.svg +6 -0
  115. package/dist/assets/flags/svg/ly.svg +13 -0
  116. package/dist/assets/flags/svg/ma.svg +4 -0
  117. package/dist/assets/flags/svg/mc.svg +6 -0
  118. package/dist/assets/flags/svg/md.svg +70 -0
  119. package/dist/assets/flags/svg/me.svg +116 -0
  120. package/dist/assets/flags/svg/mg.svg +7 -0
  121. package/dist/assets/flags/svg/mh.svg +7 -0
  122. package/dist/assets/flags/svg/mk.svg +5 -0
  123. package/dist/assets/flags/svg/ml.svg +7 -0
  124. package/dist/assets/flags/svg/mm.svg +12 -0
  125. package/dist/assets/flags/svg/mn.svg +14 -0
  126. package/dist/assets/flags/svg/mr.svg +6 -0
  127. package/dist/assets/flags/svg/mt.svg +58 -0
  128. package/dist/assets/flags/svg/mu.svg +8 -0
  129. package/dist/assets/flags/svg/mv.svg +6 -0
  130. package/dist/assets/flags/svg/mw.svg +10 -0
  131. package/dist/assets/flags/svg/mx.svg +382 -0
  132. package/dist/assets/flags/svg/my.svg +26 -0
  133. package/dist/assets/flags/svg/mz.svg +21 -0
  134. package/dist/assets/flags/svg/na.svg +16 -0
  135. package/dist/assets/flags/svg/ne.svg +6 -0
  136. package/dist/assets/flags/svg/ng.svg +6 -0
  137. package/dist/assets/flags/svg/ni.svg +129 -0
  138. package/dist/assets/flags/svg/nl.svg +5 -0
  139. package/dist/assets/flags/svg/no.svg +7 -0
  140. package/dist/assets/flags/svg/np.svg +13 -0
  141. package/dist/assets/flags/svg/nr.svg +12 -0
  142. package/dist/assets/flags/svg/nz.svg +36 -0
  143. package/dist/assets/flags/svg/om.svg +115 -0
  144. package/dist/assets/flags/svg/pa.svg +14 -0
  145. package/dist/assets/flags/svg/pe.svg +4 -0
  146. package/dist/assets/flags/svg/pg.svg +9 -0
  147. package/dist/assets/flags/svg/ph.svg +6 -0
  148. package/dist/assets/flags/svg/pk.svg +15 -0
  149. package/dist/assets/flags/svg/pl.svg +6 -0
  150. package/dist/assets/flags/svg/ps.svg +6 -0
  151. package/dist/assets/flags/svg/pt.svg +57 -0
  152. package/dist/assets/flags/svg/pw.svg +11 -0
  153. package/dist/assets/flags/svg/py.svg +157 -0
  154. package/dist/assets/flags/svg/qa.svg +4 -0
  155. package/dist/assets/flags/svg/ro.svg +7 -0
  156. package/dist/assets/flags/svg/rs.svg +292 -0
  157. package/dist/assets/flags/svg/ru.svg +5 -0
  158. package/dist/assets/flags/svg/rw.svg +13 -0
  159. package/dist/assets/flags/svg/sa.svg +25 -0
  160. package/dist/assets/flags/svg/sb.svg +13 -0
  161. package/dist/assets/flags/svg/sc.svg +7 -0
  162. package/dist/assets/flags/svg/sd.svg +13 -0
  163. package/dist/assets/flags/svg/se.svg +4 -0
  164. package/dist/assets/flags/svg/sg.svg +13 -0
  165. package/dist/assets/flags/svg/si.svg +18 -0
  166. package/dist/assets/flags/svg/sk.svg +9 -0
  167. package/dist/assets/flags/svg/sl.svg +7 -0
  168. package/dist/assets/flags/svg/sm.svg +75 -0
  169. package/dist/assets/flags/svg/sn.svg +8 -0
  170. package/dist/assets/flags/svg/so.svg +11 -0
  171. package/dist/assets/flags/svg/sr.svg +6 -0
  172. package/dist/assets/flags/svg/ss.svg +8 -0
  173. package/dist/assets/flags/svg/st.svg +16 -0
  174. package/dist/assets/flags/svg/sv.svg +593 -0
  175. package/dist/assets/flags/svg/sy.svg +6 -0
  176. package/dist/assets/flags/svg/sz.svg +34 -0
  177. package/dist/assets/flags/svg/td.svg +7 -0
  178. package/dist/assets/flags/svg/tg.svg +14 -0
  179. package/dist/assets/flags/svg/th.svg +7 -0
  180. package/dist/assets/flags/svg/tj.svg +22 -0
  181. package/dist/assets/flags/svg/tl.svg +13 -0
  182. package/dist/assets/flags/svg/tm.svg +204 -0
  183. package/dist/assets/flags/svg/tn.svg +4 -0
  184. package/dist/assets/flags/svg/to.svg +10 -0
  185. package/dist/assets/flags/svg/tr.svg +8 -0
  186. package/dist/assets/flags/svg/tt.svg +5 -0
  187. package/dist/assets/flags/svg/tv.svg +9 -0
  188. package/dist/assets/flags/svg/tw.svg +34 -0
  189. package/dist/assets/flags/svg/tz.svg +13 -0
  190. package/dist/assets/flags/svg/ua.svg +6 -0
  191. package/dist/assets/flags/svg/ug.svg +30 -0
  192. package/dist/assets/flags/svg/us.svg +9 -0
  193. package/dist/assets/flags/svg/uy.svg +28 -0
  194. package/dist/assets/flags/svg/uz.svg +30 -0
  195. package/dist/assets/flags/svg/va.svg +190 -0
  196. package/dist/assets/flags/svg/vc.svg +8 -0
  197. package/dist/assets/flags/svg/ve.svg +26 -0
  198. package/dist/assets/flags/svg/vn.svg +11 -0
  199. package/dist/assets/flags/svg/vu.svg +21 -0
  200. package/dist/assets/flags/svg/ws.svg +7 -0
  201. package/dist/assets/flags/svg/xk.svg +5 -0
  202. package/dist/assets/flags/svg/xn.svg +6 -0
  203. package/dist/assets/flags/svg/ye.svg +7 -0
  204. package/dist/assets/flags/svg/za.svg +17 -0
  205. package/dist/assets/flags/svg/zm.svg +27 -0
  206. package/dist/assets/flags/svg/zw.svg +21 -0
  207. package/dist/data/languages/index.html +86 -0
  208. package/dist/docs/api-worker-plan/index.html +439 -0
  209. package/dist/docs/cities/index.html +193 -0
  210. package/dist/docs/continents-currencies/index.html +306 -0
  211. package/dist/docs/countries/index.html +274 -0
  212. package/dist/docs/country-maps/index.html +262 -0
  213. package/dist/docs/flags/index.html +300 -0
  214. package/dist/docs/geography/index.html +454 -0
  215. package/dist/docs/languages/index.html +304 -0
  216. package/dist/docs/phone-codes/index.html +152 -0
  217. package/dist/docs/states/index.html +334 -0
  218. package/dist/docs/world-map/index.html +345 -0
  219. package/dist/examples/vue-app/index.html +208 -0
  220. package/dist/index.html +784 -0
  221. package/dist/robots.txt +2 -0
  222. package/dist/style/app.css +1 -0
  223. package/dist/types/__tests__/cities.test.d.ts +1 -0
  224. package/dist/types/__tests__/continents.test.d.ts +1 -0
  225. package/dist/types/__tests__/countries.test.d.ts +1 -0
  226. package/dist/types/__tests__/countryMaps.test.d.ts +1 -0
  227. package/dist/types/__tests__/geography.test.d.ts +1 -0
  228. package/dist/types/__tests__/index.test.d.ts +1 -0
  229. package/dist/types/__tests__/phoneCodes.test.d.ts +1 -0
  230. package/dist/types/__tests__/states.test.d.ts +1 -0
  231. package/dist/types/__tests__/translations.test.d.ts +1 -0
  232. package/dist/types/api/index.d.ts +5 -0
  233. package/dist/types/api/index.test.d.ts +1 -0
  234. package/dist/types/api/query.d.ts +3 -0
  235. package/dist/types/api/response.d.ts +16 -0
  236. package/dist/types/api/router.d.ts +1 -0
  237. package/dist/types/api/routes/cities.d.ts +2 -0
  238. package/dist/types/api/routes/countries.d.ts +2 -0
  239. package/dist/types/api/routes/health.d.ts +1 -0
  240. package/dist/types/api/routes/maps.d.ts +1 -0
  241. package/dist/types/api/routes/meta.d.ts +1 -0
  242. package/dist/types/api/routes/phoneCodes.d.ts +1 -0
  243. package/dist/types/data/cities.d.ts +22 -0
  244. package/dist/types/data/continents.d.ts +9 -0
  245. package/dist/types/data/countries.d.ts +23 -0
  246. package/dist/types/data/countryMaps.d.ts +104 -0
  247. package/dist/types/data/currencies.d.ts +13 -0
  248. package/dist/types/data/flags.d.ts +37 -0
  249. package/dist/types/data/geography.d.ts +48 -0
  250. package/dist/types/data/languages/index.d.ts +2 -0
  251. package/dist/types/data/languages/language.test.d.ts +1 -0
  252. package/dist/types/data/languages/languageData.d.ts +6 -0
  253. package/dist/types/data/languages/languageFunctions.d.ts +43 -0
  254. package/dist/types/data/languages/translations/ar.d.ts +1189 -0
  255. package/dist/types/data/languages/translations/de.d.ts +1189 -0
  256. package/dist/types/data/languages/translations/es.d.ts +1189 -0
  257. package/dist/types/data/languages/translations/fr.d.ts +1189 -0
  258. package/dist/types/data/languages/translations/hi.d.ts +1189 -0
  259. package/dist/types/data/languages/translations/it.d.ts +1189 -0
  260. package/dist/types/data/languages/translations/ja.d.ts +1189 -0
  261. package/dist/types/data/languages/translations/ko.d.ts +1189 -0
  262. package/dist/types/data/languages/translations/nl.d.ts +1189 -0
  263. package/dist/types/data/languages/translations/pl.d.ts +1189 -0
  264. package/dist/types/data/languages/translations/pt.d.ts +1189 -0
  265. package/dist/types/data/languages/translations/ru.d.ts +1189 -0
  266. package/dist/types/data/languages/translations/tr.d.ts +1189 -0
  267. package/dist/types/data/languages/translations/zh.d.ts +1189 -0
  268. package/dist/types/data/phoneCodes.d.ts +16 -0
  269. package/dist/types/data/states.d.ts +18 -0
  270. package/dist/types/data/translations/ar.d.ts +1832 -0
  271. package/dist/types/data/translations/de.d.ts +2005 -0
  272. package/dist/types/data/translations/es.d.ts +1852 -0
  273. package/dist/types/data/translations/fr.d.ts +1860 -0
  274. package/dist/types/data/translations/hi.d.ts +1816 -0
  275. package/dist/types/data/translations/it.d.ts +1824 -0
  276. package/dist/types/data/translations/ja.d.ts +1833 -0
  277. package/dist/types/data/translations/ko.d.ts +1832 -0
  278. package/dist/types/data/translations/nl.d.ts +1826 -0
  279. package/dist/types/data/translations/pl.d.ts +1818 -0
  280. package/dist/types/data/translations/pt.d.ts +1829 -0
  281. package/dist/types/data/translations/ru.d.ts +1838 -0
  282. package/dist/types/data/translations/tr.d.ts +1818 -0
  283. package/dist/types/data/translations/zh.d.ts +1834 -0
  284. package/dist/types/data/translations.d.ts +73 -0
  285. package/dist/types/data/worldMap.d.ts +122 -0
  286. package/dist/types/index.d.ts +33 -0
  287. package/dist/types/types/index.d.ts +348 -0
  288. package/dist/types/utils/geo.d.ts +101 -0
  289. package/package.json +67 -0
package/dist/docs/countries/index.html ADDED
@@ -0,0 +1,274 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta name="type" content="content">
6
+ <title>Countries</title>
7
+ <link href="/style/app.css" rel="stylesheet" type="text/css">
8
+ </head>
9
+ <body class="page--countries">
10
+ <div class="page-container">
11
+ <header class="header">
12
+ <div class="header__container">
13
+ </div>
14
+ </header>
15
+ <main class="main">
16
+ <section class="section">
17
+ <div class="container">
18
+ <div class="content"><h1 id="countries" tabindex="-1">Countries</h1>
19
+ <p><a href="../README.md">← Back to README</a></p>
20
+ <p>The <code>countries</code> array is the central dataset of <code>arev</code>. It contains ~195 sovereign states following the ISO 3166-1 standard, covering every continent.</p>
21
+ <h2 id="import" tabindex="-1">Import</h2>
22
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span>
23
+ countries<span class="token punctuation">,</span>
24
+ getCountryByCode<span class="token punctuation">,</span>
25
+ getCountriesByContinent<span class="token punctuation">,</span>
26
+ getCountryFlag<span class="token punctuation">,</span>
27
+ <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
28
+ <span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> Country<span class="token punctuation">,</span> ContinentName <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
29
+ </code></pre>
30
+ <h2 id="data-shape" tabindex="-1">Data shape</h2>
31
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">Country</span> <span class="token punctuation">{</span>
32
+ name<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Full English name, e.g. "United States"</span>
33
+ nativeName<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Name in the country's own language (optional)</span>
34
+ alpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO 3166-1 alpha-2 (2-letter), e.g. "US"</span>
35
+ alpha3<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO 3166-1 alpha-3 (3-letter), e.g. "USA"</span>
36
+ numeric<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO 3166-1 numeric (zero-padded 3 digits), e.g. "840"</span>
37
+ flag<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Unicode emoji flag, e.g. "🇺🇸"</span>
38
+ phoneCode<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// International dialling prefix, e.g. "+1"</span>
39
+ capital<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Name of the capital city, e.g. "Washington D.C."</span>
40
+ continent<span class="token operator">:</span> ContinentName<span class="token punctuation">;</span> <span class="token comment">// "Africa"|"Antarctica"|"Asia"|"Europe"|"North America"|"Oceania"|"South America"</span>
41
+ currency<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// ISO 4217 currency code, e.g. "USD"</span>
42
+ languages<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">[</span><span class="token punctuation">]</span><span class="token punctuation">;</span> <span class="token comment">// Primary languages, e.g. ["English"]</span>
43
+ tld<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span> <span class="token comment">// Internet ccTLD, e.g. ".us"</span>
44
+ <span class="token punctuation">}</span>
45
+ </code></pre>
46
+ <h2 id="examples" tabindex="-1">Examples</h2>
47
+ <h3 id="all-countries" tabindex="-1">All countries</h3>
48
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> countries <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
49
+
50
+ <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>countries<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// ~195</span>
51
+ <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>countries<span class="token punctuation">[</span><span class="token number">0</span><span class="token punctuation">]</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
52
+ <span class="token comment">// {</span>
53
+ <span class="token comment">// name: "Afghanistan",</span>
54
+ <span class="token comment">// alpha2: "AF", alpha3: "AFG", numeric: "004",</span>
55
+ <span class="token comment">// flag: "🇦🇫", phoneCode: "+93",</span>
56
+ <span class="token comment">// capital: "Kabul", continent: "Asia",</span>
57
+ <span class="token comment">// currency: "AFN", languages: ["Dari", "Pashto"],</span>
58
+ <span class="token comment">// tld: ".af"</span>
59
+ <span class="token comment">// }</span>
60
+ </code></pre>
61
+ <h3 id="look-up-a-country-by-alpha-2-code" tabindex="-1">Look up a country by alpha-2 code</h3>
62
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryByCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
63
+
64
+ <span class="token keyword">const</span> de <span class="token operator">=</span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span><span class="token string">"DE"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
65
+ <span class="token comment">// { name: "Germany", alpha2: "DE", flag: "🇩🇪", capital: "Berlin", ... }</span>
66
+
67
+ <span class="token comment">// Case-insensitive</span>
68
+ <span class="token function">getCountryByCode</span><span class="token punctuation">(</span><span class="token string">"de"</span><span class="token punctuation">)</span> <span class="token operator">===</span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span><span class="token string">"DE"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// true</span>
69
+
70
+ <span class="token comment">// Returns undefined if not found</span>
71
+ <span class="token function">getCountryByCode</span><span class="token punctuation">(</span><span class="token string">"ZZ"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
72
+ </code></pre>
73
+ <h3 id="get-all-countries-in-a-continent" tabindex="-1">Get all countries in a continent</h3>
74
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountriesByContinent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
75
+
76
+ <span class="token keyword">const</span> europeanCountries <span class="token operator">=</span> <span class="token function">getCountriesByContinent</span><span class="token punctuation">(</span><span class="token string">"Europe"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
77
+ <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>europeanCountries<span class="token punctuation">.</span>length<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 44+</span>
78
+
79
+ <span class="token keyword">const</span> africanCodes <span class="token operator">=</span> <span class="token function">getCountriesByContinent</span><span class="token punctuation">(</span><span class="token string">"Africa"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span>c <span class="token operator">=></span> c<span class="token punctuation">.</span>alpha2<span class="token punctuation">)</span><span class="token punctuation">;</span>
80
+ <span class="token comment">// ["DZ", "AO", "BJ", ...]</span>
81
+ </code></pre>
82
+ <h3 id="get-the-flag-emoji-for-a-country-code" tabindex="-1">Get the flag emoji for a country code</h3>
83
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryFlag <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
84
+
85
+ <span class="token function">getCountryFlag</span><span class="token punctuation">(</span><span class="token string">"NL"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "🇳🇱"</span>
86
+ <span class="token function">getCountryFlag</span><span class="token punctuation">(</span><span class="token string">"JP"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "🇯🇵"</span>
87
+ <span class="token function">getCountryFlag</span><span class="token punctuation">(</span><span class="token string">"us"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "🇺🇸" — case-insensitive</span>
88
+ </code></pre>
89
+ <h3 id="build-a-country-selector" tabindex="-1">Build a country selector</h3>
90
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> countries <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
91
+
92
+ <span class="token keyword">const</span> options <span class="token operator">=</span> countries<span class="token punctuation">.</span><span class="token function">map</span><span class="token punctuation">(</span><span class="token punctuation">(</span>c<span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">(</span><span class="token punctuation">{</span>
93
+ value<span class="token operator">:</span> c<span class="token punctuation">.</span>alpha2<span class="token punctuation">,</span>
94
+ label<span class="token operator">:</span> <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>c<span class="token punctuation">.</span>flag<span class="token interpolation-punctuation punctuation">}</span></span><span class="token string"> </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>c<span class="token punctuation">.</span>name<span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">,</span>
95
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
96
+ <span class="token comment">// [{ value: "AF", label: "🇦🇫 Afghanistan" }, ...]</span>
97
+ </code></pre>
98
+ <h3 id="get-all-european-countries-sorted-alphabetically" tabindex="-1">Get all European countries sorted alphabetically</h3>
99
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountriesByContinent <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
100
+
101
+ <span class="token keyword">const</span> sorted <span class="token operator">=</span> <span class="token function">getCountriesByContinent</span><span class="token punctuation">(</span><span class="token string">"Europe"</span><span class="token punctuation">)</span>
102
+ <span class="token punctuation">.</span><span class="token function">sort</span><span class="token punctuation">(</span><span class="token punctuation">(</span>a<span class="token punctuation">,</span> b<span class="token punctuation">)</span> <span class="token operator">=></span> a<span class="token punctuation">.</span>name<span class="token punctuation">.</span><span class="token function">localeCompare</span><span class="token punctuation">(</span>b<span class="token punctuation">.</span>name<span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
103
+ </code></pre>
104
+ <h3 id="find-the-currency-for-a-given-country" tabindex="-1">Find the currency for a given country</h3>
105
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountryByCode <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
106
+
107
+ <span class="token keyword">const</span> country <span class="token operator">=</span> <span class="token function">getCountryByCode</span><span class="token punctuation">(</span><span class="token string">"FR"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
108
+ <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>country<span class="token operator">?.</span>currency<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// "EUR"</span>
109
+ </code></pre>
110
+ <h2 id="continent-name-values" tabindex="-1">Continent name values</h2>
111
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">type</span> <span class="token class-name">ContinentName</span> <span class="token operator">=</span>
112
+ <span class="token operator">|</span> <span class="token string">"Africa"</span>
113
+ <span class="token operator">|</span> <span class="token string">"Antarctica"</span>
114
+ <span class="token operator">|</span> <span class="token string">"Asia"</span>
115
+ <span class="token operator">|</span> <span class="token string">"Europe"</span>
116
+ <span class="token operator">|</span> <span class="token string">"North America"</span>
117
+ <span class="token operator">|</span> <span class="token string">"Oceania"</span>
118
+ <span class="token operator">|</span> <span class="token string">"South America"</span><span class="token punctuation">;</span>
119
+ </code></pre>
120
+ <h2 id="coverage" tabindex="-1">Coverage</h2>
121
+ <p>All 195 UN-recognised sovereign states are included, plus Kosovo. Antarctica has no countries but appears in the <code>continents</code> array.</p>
122
+ <table>
123
+ <thead>
124
+ <tr>
125
+ <th>Continent</th>
126
+ <th>Countries</th>
127
+ </tr>
128
+ </thead>
129
+ <tbody>
130
+ <tr>
131
+ <td>Africa</td>
132
+ <td>54</td>
133
+ </tr>
134
+ <tr>
135
+ <td>Asia</td>
136
+ <td>49</td>
137
+ </tr>
138
+ <tr>
139
+ <td>Europe</td>
140
+ <td>44</td>
141
+ </tr>
142
+ <tr>
143
+ <td>North America</td>
144
+ <td>23</td>
145
+ </tr>
146
+ <tr>
147
+ <td>South America</td>
148
+ <td>12</td>
149
+ </tr>
150
+ <tr>
151
+ <td>Oceania</td>
152
+ <td>14</td>
153
+ </tr>
154
+ <tr>
155
+ <td>Antarctica</td>
156
+ <td>0</td>
157
+ </tr>
158
+ </tbody>
159
+ </table>
160
+ <h2 id="related" tabindex="-1">Related</h2>
161
+ <ul>
162
+ <li><a href="phone-codes.md">Phone codes</a> — <code>phoneCountryCodes</code> extends country data with territory entries</li>
163
+ <li><a href="geography.md">Geography</a> — <code>countryGeography</code> adds centroids, bounds, and climate data per country</li>
164
+ <li><a href="flags.md">Flags</a> — <code>flagData</code> adds SVG/PNG URLs, colours, and similar-flag groups per country</li>
165
+ <li><a href="cities.md">Cities</a> — <code>cities</code> has capital and major city coordinates</li>
166
+ <li><a href="continents-currencies.md">Currencies</a> — <code>getCurrencyByCountry()</code> looks up currency from country code</li>
167
+ <li><a href="languages.md">Languages</a> — official-language mappings and language selectors keyed by country code</li>
168
+ </ul>
169
+
170
+ </div>
171
+ </div>
172
+ </section>
173
+ </main>
174
+ </div>
175
+ <footer class="footer">
176
+ <div class="footer__container">
177
+ <div class="footer__controls">
178
+ <div class="footer__control"><span class="footer__label">Theme</span>
179
+ <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
180
+ </div>
181
+ </div>
182
+ </div>
183
+ </footer>
184
+ </body>
185
+ <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
186
+ let localMode = isDarkMode ? "dark" : "light";
187
+
188
+ const updateColorModeToggle = () => {
189
+ const toggle = document.querySelector("[data-color-mode-toggle]");
190
+ if (!toggle) return;
191
+
192
+ const value = toggle.querySelector(".color-mode-toggle__value");
193
+ if (!value) return;
194
+
195
+ value.textContent = localMode === "dark" ? "Dark" : "Light";
196
+ };
197
+
198
+ const initColorMode = () => {
199
+ localMode = localStorage.getItem("colorMode");
200
+ setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
201
+ };
202
+
203
+ const setCurrentMode = (mode) => {
204
+ localMode = mode;
205
+ localStorage.setItem("colorMode", localMode);
206
+ document.body.setAttribute("color-mode", mode);
207
+ updateColorModeToggle();
208
+ };
209
+
210
+ const switchMode = () => {
211
+ if (localMode == "dark") setCurrentMode("light");
212
+ else setCurrentMode("dark");
213
+ };
214
+
215
+ const bindColorModeToggle = () => {
216
+ const toggle = document.querySelector("[data-color-mode-toggle]");
217
+ if (!toggle) return;
218
+
219
+ toggle.addEventListener("click", () => {
220
+ switchMode();
221
+ });
222
+ };
223
+
224
+ initColorMode();
225
+ bindColorModeToggle();
226
+ const tables = document.querySelectorAll("table");
227
+ let initTableWrap = false;
228
+
229
+ const wrapTables = (tables) => {
230
+ tables &&
231
+ tables.forEach((table) => {
232
+ if (table.getBoundingClientRect().width > window.screen.width) {
233
+ table.classList.add("wrap");
234
+ initTableWrap = true;
235
+ }
236
+ });
237
+ };
238
+
239
+ const labelTables = (tables) => {
240
+ tables &&
241
+ tables.forEach((table) => {
242
+ // Set all headers as attributes to td's
243
+ const headerElements = table.querySelectorAll("thead th");
244
+ const bodyElementRows = table.querySelectorAll("tbody tr");
245
+ const heads = [];
246
+
247
+ if (headerElements && bodyElementRows) {
248
+ // Get TH heads
249
+ headerElements.forEach((th) => {
250
+ heads.push(th.textContent);
251
+ });
252
+ }
253
+
254
+ if (heads.length) {
255
+ bodyElementRows.forEach((tr) => {
256
+ const tds = tr.querySelectorAll("td");
257
+
258
+ tds.forEach((td, i) => {
259
+ td.setAttribute("data-label", heads[i]);
260
+ });
261
+ });
262
+ }
263
+ });
264
+ };
265
+
266
+ wrapTables(tables);
267
+ labelTables(tables);
268
+
269
+ window.addEventListener("resize", () => {
270
+ if (!initTableWrap) wrapTables(tables);
271
+ });
272
+
273
+ </script>
274
+ </html>
package/dist/docs/country-maps/index.html ADDED
@@ -0,0 +1,262 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1">
5
+ <meta name="type" content="content">
6
+ <title>Country Maps</title>
7
+ <link href="/style/app.css" rel="stylesheet" type="text/css">
8
+ </head>
9
+ <body class="page--country-maps">
10
+ <div class="page-container">
11
+ <header class="header">
12
+ <div class="header__container">
13
+ </div>
14
+ </header>
15
+ <main class="main">
16
+ <section class="section">
17
+ <div class="container">
18
+ <div class="content"><h1 id="country-maps" tabindex="-1">Country Maps</h1>
19
+ <p><code>arev</code> provides functions to render a standalone SVG for any individual country, using the bundled world-map vector data and the bundled cities dataset.</p>
20
+ <p>Each country SVG shows the country’s <strong>outline</strong> and, optionally, <strong>city marker dots</strong> (with the capital city highlighted in a different colour).</p>
21
+ <p>For maps that also show administrative-subdivision (province / state / region) boundaries, use <a href="#getcountrysubdivisionmapurl"><code>getCountrySubdivisionMapUrl</code></a> to obtain a URL pointing to an external Wikimedia Commons source.</p>
22
+ <hr>
23
+ <h2 id="functions" tabindex="-1">Functions</h2>
24
+ <h3 id="getcountrysvg(alpha2%2C-options%3F)" tabindex="-1"><code>getCountrySvg(alpha2, options?)</code></h3>
25
+ <p>Renders a standalone <code>&lt;svg&gt;…&lt;/svg&gt;</code> string for a single country.</p>
26
+ <p><strong>Signature:</strong></p>
27
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span>
28
+ alpha2<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">,</span>
29
+ options<span class="token operator">?</span><span class="token operator">:</span> CountryMapOptions<span class="token punctuation">,</span>
30
+ <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token keyword">null</span><span class="token punctuation">;</span>
31
+ </code></pre>
32
+ <ul>
33
+ <li>Returns <code>null</code> if the country code is unknown or the country has no drawable path data (e.g. very small territories not represented in the world-map dataset).</li>
34
+ <li>The <code>alpha2</code> lookup is <strong>case-insensitive</strong> (<code>&quot;de&quot;</code> and <code>&quot;DE&quot;</code> both work).</li>
35
+ </ul>
36
+ <p><strong>Every country <code>&lt;path&gt;</code> element has:</strong></p>
37
+ <ul>
38
+ <li><code>id</code> — ISO alpha-2 code, e.g. <code>id=&quot;DE&quot;</code></li>
39
+ <li><code>data-code</code> — same code</li>
40
+ <li><code>data-name</code> — human-readable country name</li>
41
+ </ul>
42
+ <p><strong>Every city <code>&lt;circle&gt;</code> element has:</strong></p>
43
+ <ul>
44
+ <li><code>data-city</code> — city name</li>
45
+ <li><code>data-capital=&quot;true&quot;</code> — only on the capital city</li>
46
+ <li><code>&lt;title&gt;</code> child with the city name (for accessibility / tooltip)</li>
47
+ </ul>
48
+ <p><strong>Example:</strong></p>
49
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountrySvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
50
+
51
+ <span class="token comment">// Render Germany with default styling</span>
52
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span><span class="token string">"DE"</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">""</span><span class="token punctuation">;</span>
53
+
54
+ <span class="token comment">// Custom styling – blue fill, no city markers</span>
55
+ <span class="token keyword">const</span> svg <span class="token operator">=</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span><span class="token string">"JP"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
56
+ fill<span class="token operator">:</span> <span class="token string">"#4a90e2"</span><span class="token punctuation">,</span>
57
+ stroke<span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
58
+ showCities<span class="token operator">:</span> <span class="token boolean">false</span><span class="token punctuation">,</span>
59
+ className<span class="token operator">:</span> <span class="token string">"country-map"</span><span class="token punctuation">,</span>
60
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
61
+
62
+ <span class="token comment">// Use a specific capital city colour</span>
63
+ <span class="token keyword">const</span> svg2 <span class="token operator">=</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span><span class="token string">"US"</span><span class="token punctuation">,</span> <span class="token punctuation">{</span>
64
+ fill<span class="token operator">:</span> <span class="token string">"#e8f4f8"</span><span class="token punctuation">,</span>
65
+ cityColor<span class="token operator">:</span> <span class="token string">"#888888"</span><span class="token punctuation">,</span>
66
+ capitalColor<span class="token operator">:</span> <span class="token string">"#e24a4a"</span><span class="token punctuation">,</span>
67
+ capitalRadius<span class="token operator">:</span> <span class="token number">6</span><span class="token punctuation">,</span>
68
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
69
+ </code></pre>
70
+ <hr>
71
+ <h3 id="getcountrysubdivisionmapurl(alpha3)" tabindex="-1"><code>getCountrySubdivisionMapUrl(alpha3)</code></h3>
72
+ <p>Returns a URL to a PNG rendering of the country’s administrative-subdivision map hosted on Wikimedia Commons. The underlying file is an SVG that typically shows province, state, or region boundaries. This image is <strong>not bundled</strong> in the package.</p>
73
+ <p><strong>Signature:</strong></p>
74
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">getCountrySubdivisionMapUrl</span><span class="token punctuation">(</span>alpha3<span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">)</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
75
+ </code></pre>
76
+ <ul>
77
+ <li><code>alpha3</code> is the ISO 3166-1 alpha-3 code (e.g. <code>&quot;DEU&quot;</code>, <code>&quot;USA&quot;</code>, <code>&quot;FRA&quot;</code>).</li>
78
+ <li>The lookup is <strong>case-insensitive</strong>.</li>
79
+ </ul>
80
+ <p><strong>Example:</strong></p>
81
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountrySubdivisionMapUrl <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
82
+
83
+ <span class="token keyword">const</span> url <span class="token operator">=</span> <span class="token function">getCountrySubdivisionMapUrl</span><span class="token punctuation">(</span><span class="token string">"DEU"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
84
+ <span class="token comment">// → "https://upload.wikimedia.org/wikipedia/commons/thumb/maps/DEU.svg/800px-DEU.svg.png"</span>
85
+
86
+ <span class="token keyword">const</span> img <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">createElement</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
87
+ img<span class="token punctuation">.</span>src <span class="token operator">=</span> <span class="token function">getCountrySubdivisionMapUrl</span><span class="token punctuation">(</span><span class="token string">"FRA"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
88
+ img<span class="token punctuation">.</span>alt <span class="token operator">=</span> <span class="token string">"France administrative divisions map"</span><span class="token punctuation">;</span>
89
+ document<span class="token punctuation">.</span>body<span class="token punctuation">.</span><span class="token function">appendChild</span><span class="token punctuation">(</span>img<span class="token punctuation">)</span><span class="token punctuation">;</span>
90
+ </code></pre>
91
+ <hr>
92
+ <h3 id="latlontomappoint(lat%2C-lon)" tabindex="-1"><code>latLonToMapPoint(lat, lon)</code></h3>
93
+ <p>Converts geographic coordinates (latitude / longitude) to the SVG coordinate system used by the bundled world-map path data (equirectangular, 2000 × 857 canvas).</p>
94
+ <p>Useful when you need to position custom markers at specific coordinates on top of a country or world-map SVG.</p>
95
+ <p><strong>Signature:</strong></p>
96
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">function</span> <span class="token function">latLonToMapPoint</span><span class="token punctuation">(</span>
97
+ lat<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
98
+ lon<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span>
99
+ <span class="token punctuation">)</span><span class="token operator">:</span> <span class="token punctuation">{</span> x<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span> y<span class="token operator">:</span> <span class="token builtin">number</span> <span class="token punctuation">}</span><span class="token punctuation">;</span>
100
+ </code></pre>
101
+ <p><strong>Example:</strong></p>
102
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">import</span> <span class="token punctuation">{</span> latLonToMapPoint<span class="token punctuation">,</span> getCountrySvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
103
+
104
+ <span class="token keyword">const</span> berlin <span class="token operator">=</span> <span class="token function">latLonToMapPoint</span><span class="token punctuation">(</span><span class="token number">52.52</span><span class="token punctuation">,</span> <span class="token number">13.41</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
105
+ <span class="token comment">// → { x: 1074.5, y: 207.9 }</span>
106
+
107
+ <span class="token comment">// Add a custom marker to the Germany SVG</span>
108
+ <span class="token keyword">const</span> svgContent <span class="token operator">=</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span><span class="token string">"DE"</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">""</span><span class="token punctuation">;</span>
109
+ <span class="token keyword">const</span> withMarker <span class="token operator">=</span> svgContent<span class="token punctuation">.</span><span class="token function">replace</span><span class="token punctuation">(</span>
110
+ <span class="token string">"&lt;/svg>"</span><span class="token punctuation">,</span>
111
+ <span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">&lt;circle cx="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>berlin<span class="token punctuation">.</span>x<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" cy="</span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>berlin<span class="token punctuation">.</span>y<span class="token punctuation">.</span><span class="token function">toFixed</span><span class="token punctuation">(</span><span class="token number">1</span><span class="token punctuation">)</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token string">" r="8" fill="red"/>\n&lt;/svg></span><span class="token template-punctuation string">`</span></span>
112
+ <span class="token punctuation">)</span><span class="token punctuation">;</span>
113
+ </code></pre>
114
+ <hr>
115
+ <h2 id="types" tabindex="-1">Types</h2>
116
+ <h3 id="countrymapoptions" tabindex="-1"><code>CountryMapOptions</code></h3>
117
+ <p>All fields are optional. Omitted values fall back to <code>COUNTRY_MAP_DEFAULTS</code>.</p>
118
+ <pre class="language-ts"><code class="language-ts"><span class="token keyword">interface</span> <span class="token class-name">CountryMapOptions</span> <span class="token punctuation">{</span>
119
+ <span class="token comment">/** Fill color for the country shape. Default: "#d0d0d0" */</span>
120
+ fill<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
121
+ <span class="token comment">/** Stroke (border) color for the outline. Default: "#ffffff" */</span>
122
+ stroke<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
123
+ <span class="token comment">/** Stroke width in SVG units. Default: 0.5 */</span>
124
+ strokeWidth<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
125
+ <span class="token comment">/** SVG width attribute (e.g. "100%", 800). Default: "100%" */</span>
126
+ width<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
127
+ <span class="token comment">/** SVG height attribute (e.g. "auto", 400). Default: "auto" */</span>
128
+ height<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span> <span class="token operator">|</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
129
+ <span class="token comment">/** Optional CSS class on the &lt;svg> element. */</span>
130
+ className<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
131
+ <span class="token comment">/** Whether to show city marker dots. Default: true */</span>
132
+ showCities<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">boolean</span><span class="token punctuation">;</span>
133
+ <span class="token comment">/** Fill color for regular city markers. Default: "#555555" */</span>
134
+ cityColor<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
135
+ <span class="token comment">/** Fill color for the capital city marker. Default: "#cc2222" */</span>
136
+ capitalColor<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">string</span><span class="token punctuation">;</span>
137
+ <span class="token comment">/** Radius of regular city markers in SVG units. Default: 3 */</span>
138
+ cityRadius<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
139
+ <span class="token comment">/** Radius of the capital city marker in SVG units. Default: 5 */</span>
140
+ capitalRadius<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
141
+ <span class="token comment">/** Extra space (in SVG units) around the country outline. Default: 5 */</span>
142
+ padding<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
143
+ <span class="token punctuation">}</span>
144
+ </code></pre>
145
+ <h3 id="country_map_defaults" tabindex="-1"><code>COUNTRY_MAP_DEFAULTS</code></h3>
146
+ <pre class="language-ts"><code class="language-ts"><span class="token punctuation">{</span>
147
+ fill<span class="token operator">:</span> <span class="token string">"#d0d0d0"</span><span class="token punctuation">,</span>
148
+ stroke<span class="token operator">:</span> <span class="token string">"#ffffff"</span><span class="token punctuation">,</span>
149
+ strokeWidth<span class="token operator">:</span> <span class="token number">0.5</span><span class="token punctuation">,</span>
150
+ width<span class="token operator">:</span> <span class="token string">"100%"</span><span class="token punctuation">,</span>
151
+ height<span class="token operator">:</span> <span class="token string">"auto"</span><span class="token punctuation">,</span>
152
+ className<span class="token operator">:</span> <span class="token string">""</span><span class="token punctuation">,</span>
153
+ showCities<span class="token operator">:</span> <span class="token boolean">true</span><span class="token punctuation">,</span>
154
+ cityColor<span class="token operator">:</span> <span class="token string">"#555555"</span><span class="token punctuation">,</span>
155
+ capitalColor<span class="token operator">:</span> <span class="token string">"#cc2222"</span><span class="token punctuation">,</span>
156
+ cityRadius<span class="token operator">:</span> <span class="token number">3</span><span class="token punctuation">,</span>
157
+ capitalRadius<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
158
+ padding<span class="token operator">:</span> <span class="token number">5</span><span class="token punctuation">,</span>
159
+ <span class="token punctuation">}</span>
160
+ </code></pre>
161
+ <hr>
162
+ <h2 id="styling-tips" tabindex="-1">Styling tips</h2>
163
+ <p>Because each country path has a predictable <code>id</code> attribute, you can style or interact with individual paths via CSS or JavaScript:</p>
164
+ <pre class="language-css"><code class="language-css"><span class="token comment">/* Hover effect */</span>
165
+ <span class="token selector">#DE:hover</span> <span class="token punctuation">{</span> <span class="token property">fill</span><span class="token punctuation">:</span> steelblue<span class="token punctuation">;</span> <span class="token property">cursor</span><span class="token punctuation">:</span> pointer<span class="token punctuation">;</span> <span class="token punctuation">}</span>
166
+ </code></pre>
167
+ <pre class="language-js"><code class="language-js"><span class="token keyword">import</span> <span class="token punctuation">{</span> getCountrySvg <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">"arev"</span><span class="token punctuation">;</span>
168
+
169
+ document<span class="token punctuation">.</span><span class="token function">getElementById</span><span class="token punctuation">(</span><span class="token string">"map"</span><span class="token punctuation">)</span><span class="token operator">!</span><span class="token punctuation">.</span>innerHTML <span class="token operator">=</span> <span class="token function">getCountrySvg</span><span class="token punctuation">(</span><span class="token string">"BR"</span><span class="token punctuation">)</span> <span class="token operator">??</span> <span class="token string">""</span><span class="token punctuation">;</span>
170
+
171
+ <span class="token comment">// Listen for clicks on any city marker</span>
172
+ document<span class="token punctuation">.</span><span class="token function">querySelectorAll</span><span class="token punctuation">(</span><span class="token string">"#map circle[data-city]"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">circle</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
173
+ circle<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
174
+ <span class="token keyword">const</span> city <span class="token operator">=</span> circle<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>city<span class="token punctuation">;</span>
175
+ <span class="token keyword">const</span> capital <span class="token operator">=</span> circle<span class="token punctuation">.</span>dataset<span class="token punctuation">.</span>capital <span class="token operator">===</span> <span class="token string">"true"</span><span class="token punctuation">;</span>
176
+ console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token template-string"><span class="token template-punctuation string">`</span><span class="token string">Clicked: </span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>city<span class="token interpolation-punctuation punctuation">}</span></span><span class="token interpolation"><span class="token interpolation-punctuation punctuation">${</span>capital <span class="token operator">?</span> <span class="token string">" (capital)"</span> <span class="token operator">:</span> <span class="token string">""</span><span class="token interpolation-punctuation punctuation">}</span></span><span class="token template-punctuation string">`</span></span><span class="token punctuation">)</span><span class="token punctuation">;</span>
177
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
178
+ <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
179
+ </code></pre>
180
+ <hr>
181
+ <h2 id="data-sources" tabindex="-1">Data sources</h2>
182
+ <ul>
183
+ <li><strong>Country outlines</strong> — extracted from the bundled world-map SVG path data (see <a href="./world-map.md">World Map</a>).</li>
184
+ <li><strong>City markers</strong> — derived from the bundled <a href="./cities.md">Cities</a> dataset.</li>
185
+ <li><strong>ViewBox</strong> — calculated from the geographic bounding boxes in the bundled <a href="./geography.md">Geography</a> dataset.</li>
186
+ <li><strong>Subdivision maps</strong> — external reference URLs pointing to <a href="https://commons.wikimedia.org/">Wikimedia Commons</a>.</li>
187
+ </ul>
188
+
189
+ </div>
190
+ </div>
191
+ </section>
192
+ </main>
193
+ </div>
194
+ <footer class="footer">
195
+ <div class="footer__container">
196
+ <div class="footer__controls">
197
+ <div class="footer__control"><span class="footer__label">Theme</span>
198
+ <button class="color-mode-toggle" type="button" data-color-mode-toggle aria-label="Toggle color mode"><span class="color-mode-toggle__value"></span></button>
199
+ </div>
200
+ </div>
201
+ </div>
202
+ </footer>
203
+ </body>
204
+ <script>const isDarkMode = window.matchMedia("prefers-color-scheme: dark").matches;
205
+ let localMode = isDarkMode ? "dark" : "light";
206
+
207
+ const updateColorModeToggle = () => {
208
+ const toggle = document.querySelector("[data-color-mode-toggle]");
209
+ if (!toggle) return;
210
+
211
+ const value = toggle.querySelector(".color-mode-toggle__value");
212
+ if (!value) return;
213
+
214
+ value.textContent = localMode === "dark" ? "Dark" : "Light";
215
+ };
216
+
217
+ const initColorMode = () => {
218
+ localMode = localStorage.getItem("colorMode");
219
+ setCurrentMode(localMode ? localMode : isDarkMode ? "dark" : "light");
220
+ };
221
+
222
+ const setCurrentMode = (mode) => {
223
+ localMode = mode;
224
+ localStorage.setItem("colorMode", localMode);
225
+ document.body.setAttribute("color-mode", mode);
226
+ updateColorModeToggle();
227
+ };
228
+
229
+ const switchMode = () => {
230
+ if (localMode == "dark") setCurrentMode("light");
231
+ else setCurrentMode("dark");
232
+ };
233
+
234
+ const bindColorModeToggle = () => {
235
+ const toggle = document.querySelector("[data-color-mode-toggle]");
236
+ if (!toggle) return;
237
+
238
+ toggle.addEventListener("click", () => {
239
+ switchMode();
240
+ });
241
+ };
242
+
243
+ initColorMode();
244
+ bindColorModeToggle();
245
+ const container = document.querySelector(".container").querySelectorAll("*");
246
+
247
+ container.forEach((el) => {
248
+ const text = el.innerText;
249
+ if (el.innerHTML == el.textContent)
250
+ if (text) {
251
+ const matches = text.match(/#[a-fA-F0-9]{6}|#[a-fA-F0-9]{3}/i);
252
+ if (matches) {
253
+ el.innerHTML = el.innerHTML.replace(
254
+ matches[0],
255
+ `<span class="color-preview" style="--color-preview:${matches[0]}">${matches[0]}</span>`
256
+ );
257
+ }
258
+ }
259
+ });
260
+
261
+ </script>
262
+ </html>