https://szekula.org/map.html

1<!DOCTYPE html>
2<html lang=en>
3<head>
4  <meta charset=utf-8>
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <link rel="apple-touch-icon" sizes="180x180" href="/pics/favicon/apple-touch-icon.png">
7  <link rel="icon" type="image/png" sizes="32x32" href="/pics/favicon/favicon-32x32.png">
8  <link rel="icon" type="image/png" sizes="16x16" href="/pics/favicon/favicon-16x16.png">
9  <link rel="manifest" href="/pics/favicon/site.webmanifest">
10  <link rel="mask-icon" href="/pics/favicon/safari-pinned-tab.svg" color="#39869c">
11  <link rel="shortcut icon" href="/pics/favicon/favicon.ico">
12  <meta name="msapplication-TileColor" content="#da532c">
13  <meta name="msapplication-config" content="/pics/favicon/browserconfig.xml">
14  <meta name="theme-color" content="#ffffff">
15	<title>Map</title>
16  <link rel="stylesheet" href="./css/szekula.css?v20240214">
17  <link rel="stylesheet" href="./css/map.css?v20240214">
18  <style>
19    :root { /* colors for map and legend */
20      --fillColor1:#98dffc;
21      --fillColor2:#67b7dd;
22      --fillColor3:#368fbf;
23      --fillColor4:#0568a1;
24    }
25    main {
26      position:relative;
27    }
28    input[type="checkbox"] {
29      display:none;
30    }
31    input[type="checkbox"] + label:hover {
32      cursor:pointer;
33    }
34    input[type="checkbox"] + label::after {
35      font-family:var(--symbol-font);
36      font-stretch:normal;
37      text-shadow:1px 0 0 var(--blackbar-text-color), 1px -1px 0 var(--blackbar-text-color), 0 -1px 0 var(--blackbar-text-color); /* make checkbox a bit thicker to match Oswald character font */
38      content:"☐";
39    }
40    input[type="checkbox"]:checked + label {
41      color:var(--fillColor1);
42    }
43    input[type="checkbox"]:checked + label::after {
44      text-shadow:1px 0 0 var(--fillColor1), 1px -1px 0 var(--fillColor1), 0 -1px 0 var(--fillColor1);
45      content:"☑";
46    }
47    #worldmap {
48      width:100%;
49      margin-left:-3%;
50    }
51    dl { /* legend */
52      position:absolute;
53      top:60px;
54      right:50px;
55      border:2px solid dimgrey;
56      padding:4px 5px;
57      font-size:18px;
58      line-height:16px;
59    }
60    dt, dd {
61      display:inline-block;
62      width:20px;
63      margin:1px 0;
64      text-align:right;
65    }
66  </style>
67  

67<script>
68    /* if url parameter lang=de change language of document to german */
69    const queryString = window.location.search,
70          urlParams = new URLSearchParams(queryString);
71    if (urlParams.has('lang')) {
72      switch (urlParams.get('lang')) {
73        case 'de':
74        case 'de-CH':
75          document.documentElement.lang = 'de';
76          document.title = 'Familienstammbaum';
77          break;
78      }
79    }
80  </script>

80
81</head>
82
83<body onload="trigger()">
84<header>
85  <div class="blackbar">
86    <h1 id="SzekulaFamily">
87      <a href="index.php" class="en">The S<sub>z</sub>ekula Family of Stamp Dealers</a>
88      <a href="index.php?lang=de" class="de">Die S<sub>z</sub>ekula-Familie von Briefmarkenhändlern</a>
89    </h1>
90    <div class="en">
91      <a href="map.html" class="selected">EN</a> / <a href="map.html?lang=de">DE</a>
92    </div>
93    <div class="de">
94      <a href="map.html">EN</a> / <a href="map.html?lang=de" class="selected">DE</a>
95    </div>
96  </div>
97</header>
98<main>
99  <form>
100    <span class="en">Mail contacts of</span><span class="de">Briefverkehr von</span>
101    <span>
102      <input type="checkbox" id="Bela" name="person" checked="checked" value="Béla Sekula">
103      <label for="Bela">Béla </label>,
104      <input type="checkbox" id="Geza" name="person" checked="checked" value="Géza Sekula">
105      <label for="Geza">Géza </label>,
106      <input type="checkbox" id="Eugen" name="person" checked="checked" value="Eugen Sekula">
107      <label for="Eugen">Eugen </label>,
108      <input type="checkbox" id="Frank" name="person" checked="checked" value="Frank Sekula">
109      <label for="Frank">Frank </label>
110<!--
111      <input type="checkbox" id="Charles" name="person" checked="checked" value="Charles Sekula">
112      <label for="Charles">Charles </label>,
113      <input type="checkbox" id="Gabor" name="person" checked="checked" value="Gabor Sekula">
114      <label for="Gabor">Gabor </label>,
115      <input type="checkbox" id="Max" name="person" checked="checked" value="Max Goldberger">
116      <label for="Max">Max Goldberger </label>,
117      <input type="checkbox" id="Hermann" name="person" checked="checked" value="Hermann Wiederhold">
118      <label for="Hermann">Hermann Wiederhold </label>
119      <br>
120-->
121    </span>
122    <span class="en">by today’s countries</span><span class="en"> (based on this collection) </span><span class="de">mit (heutigen) Ländern</span><span class="de"> (auf Basis dieser Sammlung) </span>
123  </form>
124  <object id="worldmap" data="data/worldmap.svg" type="image/svg+xml"></object>
125  <dl><!--legend-->
126    <dt style="background-color:var(--fillColor1)">&nbsp;</dt><dd>1</dd><br>
127    <dt style="background-color:var(--fillColor2)">&nbsp;</dt><dd>2</dd><br>
128    <dt style="background-color:var(--fillColor3)">&nbsp;</dt><dd>3</dd><br>
129    <dt style="background-color:var(--fillColor4)">&nbsp;</dt><dd>4</dd>
130  </dl>
131</main>
132

133<script>
134// wait with SVG update until both all DOM tree elements are ready (=BODY onload fires) and reference list (JSON) has been loaded
135let resourceCounter = 0;
136function trigger() { // must be triggered twice to fire
137  ++resourceCounter;
138  if (resourceCounter > 1) {
139    refs = request.response;
140    updateSVGcontent();
141  }
142}
143
144// worldmap from SVG file
145const worldmap = document.getElementById('worldmap');
146
147// country references from JSON file
148const requestURL = 'data/country.refs.json',
149      request = new XMLHttpRequest();
150request.onload = trigger;
151request.open('GET', requestURL);
152request.responseType = 'json';
153request.send();
154
155// make checkboxes/dealer names functional to update SVG content
156const index = {}; // to checkbox {"Béla": 0, "Géza": 1, "Eugen": 2, "Frank": 3}
157const checkbox = document.querySelectorAll('input[type=checkbox][name=person]'),
158      fillColor = Array(checkbox.length);
159for (let i = 0; i < checkbox.length; i++) {
160  index[checkbox[i].value] = i;
161  checkbox[i].addEventListener('change', updateSVGcontent, false);
162  fillColor[i] = getComputedStyle(document.documentElement).getPropertyValue('--fillColor' + (i + 1));
163}
164
165// fetch the document for the given embedding_element
166function getSubDocument(embedding_element) {
167  if (embedding_element.contentDocument) {
168    return embedding_element.contentDocument;
169  } else {
170    let subdoc = null;
171    try {
172      subdoc = embedding_element.getSVGDocument();
173    } catch(e) {}
174    return subdoc;
175  }
176}
177
178function bitCount (n) {
179  return n.toString(2).match(/1/g).length;
180}
181
182function updateSVGcontent() {
183  // get SVG content
184  const subdoc = getSubDocument(worldmap); //get SVG content from object
185  const subdocns = subdoc.documentElement.namespaceURI; //get SVG namespace
186  // for every country in the JSON reference list
187  for (let i = 0; i < refs.length; i++) {
188    let found = 0; // bit mask {1, 2, 4, 8} for persons found; only used as bit counter
189    const foundNames = [],
190          covers = []; // array with one string per group/person
191    // for every person associated with that country, test if name=box is checked
192    for (let j = 0; j < refs[i].persons.length; j++) {
193      let person = refs[i].persons[j].name;
194      if (person in index && checkbox[index[person]].checked) {
195        found |= 1 << index[person];
196        foundNames.push(' ' + person.split(' ')[0]);
197        //prepare link as ['person1:cover1,cover2,...', 'person2:cover1,...', ...]
198        covers.push(person + ':' + refs[i].persons[j].covers.join());
199      }
200    }
201    // find country's path definition(s) in SVG worldmap
202    const country = subdoc.getElementsByClassName(refs[i].name.replace(/ /g, '_'));
203    for (let k = 0; k < country.length; k++) {
204      let title = country[k].getElementsByTagName('title');
205      if (found) { // add tooltip and link (or update if already present) and set fill color
206        const language = document.getElementsByTagName('html')[0].getAttribute('lang');
207        const tooltip = (language == 'de' ? refs[i].name_de : refs[i].name) + ':\n' + foundNames;
208        if (title.length == 0) { //create tooltip
209          title = document.createElementNS(subdocns, 'title');
210          title.textContent = tooltip;
211          country[k].appendChild(title);
212        } else { //update tooltip
213          title[0].textContent = tooltip;
214        }
215        const href = '../index.php?' + (language == 'de' ? 'lang=de&' : '') + 'selection=' + encodeURIComponent(covers.join(';'));
216        if (country[k].parentElement.tagName != 'a') {
217          //wrap new anchor tag around country path definition
218          const a = document.createElementNS(subdocns, 'a');
219          a.setAttribute('href', href);
220          a.setAttribute('target', '_top'); // or else link will open within the SVG!
221          a.appendChild(country[k].cloneNode(true));
222          country[k].parentElement.replaceChild(a, country[k]);
223          country[k] = a.firstChild;
224        } else { //update link
225          country[k].parentElement.setAttribute('href', href);
226        }
227        country[k].setAttribute('fill', fillColor[bitCount(found) - 1]);
228        country[k].setAttribute('stroke', 'black');
229      } else { // remove tooltip, link and color (if any)
230        if (title.length > 0) {
231          country[k].removeChild(title[0]);
232        }
233        if (country[k].parentElement.tagName == 'a') {
234          country[k].parentElement.parentElement.replaceChild(country[k], country[k].parentElement);
235        }
236        country[k].removeAttribute('fill');
237        country[k].removeAttribute('stroke');
238      }
239    }
240  }
241}
242</script>

242
243</body>
244</html>