Browse Source

Improve map and layout

master
rui hildt 2 years ago
parent
commit
877b54f6aa
  1. 1
      .gitignore
  2. 14839
      package-lock.json
  3. 156
      public/belgium-map-old.svg
  4. 185
      public/belgium-map.svg
  5. 45
      src/components/HomeView.jsx
  6. 4
      src/components/Map.jsx

1
.gitignore vendored

@ -1 +1,2 @@
node_modules
build

14839
package-lock.json generated

File diff suppressed because it is too large Load Diff

156
public/belgium-map-old.svg

@ -0,0 +1,156 @@
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" id="svg116" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" sodipodi:docname="belgium-map.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 1136 988" style="enable-background:new 0 0 1136 988" xml:space="preserve">
<style type="text/css">
.st3{fill:none;stroke:#00856e;stroke-width:4}.st10{font-size:25px}.st11{fill:#00856e}.st12{fill:#ffc408}
</style>
<sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview118" inkscape:current-layer="g10" inkscape:cx="294.90731" inkscape:cy="463.42751" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="976" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="1920" inkscape:window-y="26" inkscape:zoom="0.80364372" objecttolerance="10" pagecolor="#ffffff" showgrid="false"/>
<path id="path2" d="M0,0h1136v988H0V0z" style="fill:none"/>
<g id="g10">
<path id="path6" d="M485.8,172.6l-12,14l-18,18l-9,4l0,0l-3,2l-3,2h-6l0,0l-8,3l-2,3l-4,4l-6,2h-2l-2-2h-2l-2,4l-4,1
h-3l-1-2l2-2v-2l-1-2l-2,1l-2,3l-1,2l-5,1l-9-1h-1l-1-1l0,0l-2-1v-12l1-3l-1-2l-3-1l-2,1l-3-3l0,0l-4-1h-6l0,0l-6-3l-8-1l-1-1h-3
l-2-1l-7-5l-2-1h-1l0,0h-1v5l-1,1l-1-1l-3-2l0,0l-3,2l-3,1l-4-2l0,0h-1l0,0v1l2,16h-3l-4,1l-2,1h-11l0,0l-2-1h-1l-2-4l-2-1l-4-4
l-5-5v-1l-4-4v-2h2v-1l-1-3l-1-2l5-5l1-3l-1-2l-2-4l-2-7h-2l-2,2l-7,2l-10,3l-5,3l-3,1h-4l-2,2l-2,1v-3h-2l-2,3h-1l2-5h-1l-2,2
l-1,4l-2,1l-8,3l-4,2l-3,1l-9,4l-7,7l-14,8l-5,3l-5,4l-3,1l-3,1l2,4v2l-1-1l-1-1l-1-1l0,0l-2-1l-1,2l-1,1l0,0l-9,7l-11,7l-4,2l-7,5
l-8,4l-4,3l0,0l-6,4l-7,3l-7,4h-1l-7,4l-1,1l-3,2l-2,1l-8,4l-1,1l1,3v2l1,2l1,2l0,0l1,3l2,14l-1,4l2,5h1l1,1l5,2l1,1v2l1,4v1l2,2
l2,5l-3,3v2l-5,6l-2,2l1,1h3v3l2,3l-1,5l1,2l-1,2l1,4l-3,5l3,1h1l1,4l2,3l1,6h5l1-1l2-3l1,1h1l1,1l1,2h8l1,1l0,0l1,2v4l1,2l1,2l4,3
l3,3l1,4l-1,1l5,2l1,3v3l2,4l5,3h2l5-3l2,2l1,3l2,2l1,1h4l1,2h3l1-1h2l2-1v-3l1-4v-2h2l1-2l-1-3l3-3h6l2-2l1-2l3-1l2-2l1-1h4l0,0
l5-2l0,0l2-1l1,1l4,1h2l6-5h3l2-1h2l3,1v3l4,7l2,3l1,1v2l1,2l3,2l1,2l-1,2l2,2l2,2l4,1h3l3,5v3l3,4l-1,1l-5,3l-1,1v3l1,3l1,2l-1,2
l1,2l1,4l2,2l3,3v5l1,1l-1,4l2,4l-1,2v1l1,3l-1,1l1,1l-1,2v5l2,3l2,2l10,6l5,1l5,5h1l1-1l2-3h5l2-1h1l1-1h5l1-4l3-5l6,1l4,2l2,2
l-4,5l-1,1l-1,2l1,4l4-1l5-2h4l3-1l2,1l3,2h1l4-3l1,1l5,6l1,2v1l3,3l2,1l1,2v5l2,1l1,2v4l1,4v7l-3,6l-1,4l1,2l1,1v4l2,3l1,4l2,3v2
l2,2l3,1h1l-1-3l1-1l4,3l1-2l-1-4l2-5l2-3l2-1l2,1l3-3l6,2l3-1v1l2,2h1v-2l6-1l5,5l2,1l2-1l1,1v2l4,1l7-2l4-3l2-1h1l1,1l3-1l2,1
l2-1l2-2h3l1-2l1-1l1,1l1,3l1,1l2,1l2,1l1,4h2l2,2l2,5l2-2l2,1l3,3l1,1l1,1l1,3v7h2l1,1v3l1,2h3l4-2v-2l-4-3v-2l2-2l1-1l2,1l1,3
l2,1h3l2,1l1,2l1,3v3l-1,2l-8,6v2l-2,3l-3,1l-1,1l2,6v3l-2,2l-1,3v1l1,1v3l-4,4v3l-2,4l2,2h2l2-1l3-2h4l3,1h2l-1,3l0,0l1,3l-1,3
l1,1l1,1l-1,1v1l2,2l3,3l2,3v2l-1,2l-7,4l-2,2l-1,1l-3-1l-3,1l-1,1l-3,6l-1,1v6l1,3h2l2,2l-1,2l-3,5l1,1l1,1l4-1h2v2h2l2,1v4l1,1
l2-1h6l4-2h8l2-1l3-1h1l4,2h2l2,3l2,1h7l2,2l2,1l2-1l7,2h2l1,2l3-1l6-2h1l6-1l4-3l1-3l1-1l2-1h3l3-1l2-4l3-1l7-1l2-1h5l1-1h1l1-1
l5-1l1-2l1-5l2-7l1-7v-2l-5-1v-2l2-3v-2l1-2l2-3l1-2l7-3l2-1l2-1l1-3l1-3l2-3l1-1l6-4l1-1h2l2-3v-2l2-1l2,2l1,2l5,2l5-1l1,1v2l3,3
l-2,2l-1,1l-3,2v9l1,1v3h-1l-2-3h-4l-1,3l1,2l-1,1v5l-4,1l1,4l-1,1l4,3v2l-5,4l-1,5l1,2l-1,2l1,3l0,0l-1,2l-2,4h-2l-1,2l-1,6l2,2
l1,1l7,1h2l2,2l2,4l2,2l3,2v3l2,6l-1,2l-3,4v2l-1,3l-1,2l-1,1l-1,1v1l1,6l3,1v3l1,5v1l-2,2l-2,6l-1,1l1,1l3,1l1-2h1l4,2l3,1l3-1
l6-2v-2l3-1h1l1,1l1-1h2l3,1l2,1v1l3,5l3,2l4,2l2,1l3-1l1,1l1,3l0,0h2l3-1l2,1l7,12l-1,4l1,2l3-1l1,2h1l1-3h2l1,3v3l0,0v3h4l4,1
l1-1h2l1,2l1,1l2-1l5,1l3-3l3,1l4,3l5,4l1,2l2,1l3,5l-3,3l-2,4l-1,3l2,6v-1l2-2l5-1v-3l2-1l3,3h1l2,1l3,1v1l10,8v3l2,7l4,1l-3,6
l4,2l2,3v2l-2,2l-2,2h-2l-2,1l7,4v3l3,3v-4l2-3l6,1l3-2l4-1l3-5h5l5,3l1,1l2,4h2l1-2l1-2l-1-4l1-2l2-2l1-2l4-2h1l5,1l7,2h5v-1h2
l1,1l1,1l2-1v-1l1-2v-2l1-2l3-1l3,1l1,1l1,2h3l1,1l1,1h1l2-1l3-3l1-1h1l5-4l2-2l-2-2l2-3h-5l-1-3l1-1l5-3v-5l2-3l1-1v-2l0,0h3l1-2
v-6l1-2v-1l-2-1l-10-4l0,0l1-3l1-4l5-5l-4-6l-1-1h-2l-3,2l-4-2v-8l-1-1l-1-1l-2-3l-6-14l-2,1h-2l-4,1l-1-8l-1-1l1-5l-2-2l-1-1l2-2
l1-2v-3l2-1l-1-4l1-1l0,0h1l2,1h1l0,0l1-1h1v-2l0,0l-3-3l-2-2h-3l-4-3l3-4l3-2l1-1v-5l2-1l1-3l-1-3l2-4l1-1l3-1l3,1l1-2v-2l2-1l3-1
v-1l1-3l-2-2l0,0l-1-2l0,0l-1-1v-4l1-1l6-3l2-4v-1l3-4l-1-1l-2-4l-1-1l1-2l3-3h3l1-1l1-2l-1-3l1-2l1-3v-3l2-3l3-1l10-4l1-7l1-2v-1
l-1-4l3-2h5l6-3l0,0h2v1l1,4l1,2l4,1l0,0l2,2h2l2-1l1-2v-3l7,1l0,0l3,2l-2,2l2,2l-2,4l2,3l4,2v-2l1-1h2l1-2l-1-4h-3l2-2l0,0l-1-4
l2-4l0,0l2,1l1-1l2-1l4,1l1-2l-2-4l1-3l-1-4l-1-1l-2-1l-1-2h1l1-1v-2l0,0v-2h4l1-1l2-2v-3h1l3-2l2-1l5-1l2-1h4l5-4l-2-3v-3l2-2l1-4
l1-1l1-1l1-2h2l1-1h2l2,1l2,1l2,2l7-4h3l0,0l1-1l-1-7l-7-6l-1-2l-1-1l-5-4l1-3l5-8v-7l3-4l-1-5l-6-4l-1-1l-1-1v-3l1-2v-3l-3-3l-5-1
h-5l-2-2h-3l-2,1l-1-1h-3l-3,3l-2-1l-2-5h-1l-1-1l-1-3l-3-3l1-1v-4l-2,1l-1-1l-1-1v-4l-1-1l6-5l2-2l4-3l1-3h1l2,2l2-1v-3l1-3l2-2
l2-3v-3l-6,1l-2-1h-1l-4-2h-4l-2,1l-2,1l-1-1l1-1l-2-2l-1-2l3-3l1-2h-1l-2-1l-1-2l-2-4h-1l-1-2l-8-10l-1-3l-2-4h-10l-2-1l-1,1l-2,1
h-2l-1-2v-1l2-5l-1-2l-4-3h-12l-1-3h-3l-3,1l-2,1h-2l-2,1h-5v1h-1l-1-1l-1-2v-2l-1-2l-2,2h-2l-1,1l-2,2l-1-3l-1-1l-7,4h-2l-4-5
l-2,1l-2-5l-1-1h-1l-4,3l-2,3l-1,3h-3l-1-2l0,0l-1,1l-2,1h-1v-1l-2,2h-1l-2-1l0,0l4-7v-2l-2-5l1-3v-1l0,0l-1-1l-1-1l-4-6l-4-3l-1-1
l-1-8v-5l1-1l3-2l0,0h2l0,0l1-1l1-1l1-1v-1l1-1v-1l1-2v-2h2l3-1l2-1l2-7l4-4l1-4l1-1l0,0l-1-3h-1l-5,2v-1l-1-1l3-5v-1l6-5l1-3l1-2
l1-3l1-6l-4-2v-2l3-4l1-3v-2l0,0l2-1l0,0l2,2l1-1l1-2v-3l1-2l-1-3v-2l0,0l1-1h4l0,0l3-1v-3l0,0l-5-2l0,0v-3l0,0l1-3h2l3-1l1-2l2-3
l0,0v-3l-3-2h-2l-1-1h-3l-2,1v-4h-2l1-1l-2-2v-1l-10-4l-6,1l-4,1h-3l-5-1h-1l-1-2l-15-3l-3-4l-3-3l0,0l-2-1l-3-3l-1-7v-8l-5-4
l-12-9l-4,5v1l-6,3h-4l-2,5l-5-1v-1l-12-2l-2,5l-4-1l-16,1l-3,1h-2l-1-1l-2-3l0,0l4-13l-5-4l-2-1l-1-1l-10,2h-7v-5l-2-9l0,0l-7-9
l-1-1l-5-5l5-12l-2-11l-2-6h-7v-1l-1-1l-1-5h-1l-2,2l-4,4l1,5v1l-1,3l-4,3l-15,15l-2,1l-1,1l-5-7h-1l-2-1l-6,1h-3l-12,1l-4-1l-3-1
l-1-6l3-1l11,4v-4h-1v-1l-2-4v-4l3-1v-4l1-3v-1l-2-1l-2-4l-7-2l-1-2l0,0l-5,2l-3,4l-1,1l-2,2h-1l-1,2v2l-3,5l-1,3l-2,3l-1,2l-4,4
l-7,1h-3l-5-1l-8-2l-3-1l-4,2l-1,1l-2-5l-2-8l1-5l-1-3l-13,2l-1-1h-1l-2,4h-4l-3,1l-4,2l-11,6l2,3v6l3,6l8,11v4l-4,2h-5l-1,1l-2-1
h-4l-3-2l-2-4l-1-1l-15,1h-7 M485.8,172.6l2-2l-1-2l-4-3v-2h5" style="fill:#fdc646"/>
</g>
<path id="path12" d="M629.7,480.1L813,430" style="fill:none;stroke:#00856e;stroke-width:4;stroke-miterlimit:10"/>
<path id="path14" class="st3" d="M523,366.9L813,430"/>
<path id="path16" class="st3" d="M424,511l99-141"/>
<path id="path18" d="M851,796L629.7,480.1" style="fill:none;stroke:#00856e;stroke-width:3.8709"/>
<path id="path20" class="st3" d="M523,366.9l14.7-79.7"/>
<path id="path22" class="st3" d="M539.4,282.1l-19.1-82.7"/>
<path id="path24" d="M355.1,262.2l165.2-65" style="fill:none;stroke:#00856e;stroke-width:4.0034"/>
<path id="path26" d="M254.1,221.6l101,40.6" style="fill:none;stroke:#00856e;stroke-width:4.2063"/>
<path id="path28" class="st3" d="M355.1,262.2L296,453"/>
<path id="path30" class="st3" d="M296,453l128,58"/>
<path id="path32" class="st3" d="M424,507l205.3-24.9"/>
<path id="path34" class="st3" d="M296,453l225-86.1"/>
<path id="path36" d="M362.8,266.5L521,366.9" style="fill:none;stroke:#00856e;stroke-width:3.9063"/>
<ellipse id="ellipse40" class="st8 antwerp" cx="519.5" cy="197.2" rx="12.2" ry="11.9"/>
<ellipse id="ellipse38" class="st8 brussels" cx="523.2" cy="366.9" rx="12.2" ry="11.9"/>
<ellipse id="ellipse42" class="st8 ghent" cx="356.3" cy="263.3" rx="12.2" ry="11.9"/>
<ellipse id="ellipse44" class="st8 bruges" cx="253.8" cy="221.6" rx="12.2" ry="11.9"/>
<ellipse id="ellipse46" class="st8 mechelen" cx="538.7" cy="282.8" rx="12.2" ry="11.9"/>
<ellipse id="ellipse48" class="st8 mons" cx="423.8" cy="509.3" rx="12.2" ry="11.9"/>
<ellipse id="ellipse50" class="st8 namur" cx="629.3" cy="481.9" rx="12.2" ry="11.9"/>
<ellipse id="ellipse52" class="st8 liege" cx="812.6" cy="429.6" rx="12.2" ry="11.9"/>
<ellipse id="ellipse54" class="st8 tournai" cx="294.5" cy="454.1" rx="12.2" ry="11.9"/>
<ellipse id="ellipse56" class="st8 arlon" cx="853.4" cy="798" rx="12.2" ry="11.9"/>
<text font-weight="bold" transform="matrix(1 0 0 1 556.0674 292.1056)" class="mechelen st8 st9 st10">
MECHELEN
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 537.4283 207.463)" class="antwerp st8 st9 st10">
ANTWERP
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 659.7698 502.9895)" class="namur st8 st9 st10">
NAMUR
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 833.0781 439.6074)" class="liege st11 st9 st10">
LIEGE
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 738.7654 807.2338)" class="arlon st8 st9 st10">
ARLON
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 386.4514 546.0341)" class="mons st8 st9 st10">
MONS
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 115.2342 233.5001)" class="bruges st8 st9 st10">
BRUGES
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 247.6856 292.1054)" class="ghent st8 st9 st10">
GHENT
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 542.7684 366.9001)" class="brussels st8 st9 st10">
BRUSSELS
</text>
<text font-weight="bold" transform="matrix(1 0 0 1 150.914 464.1399)" class="tournai st8 st9 st10">
TOURNAI
</text>
<rect id="rect1175" x="284.8" y="230.2" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 290.1011 252.3633)" class="st12 st9 st10">
40
</text>
<rect id="rect1175-3" x="309.8" y="337.7" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 315.1353 359.8834)" class="st12 st9 st10">
60
</text>
<rect id="rect1175-9" x="422.1" y="303.2" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 427.4669 325.3563)" class="st12 st9 st10">
50
</text>
<rect id="rect1175-8" x="508.9" y="228.4" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 514.1873 250.542)" class="st12 st9 st10">
20
</text>
<rect id="rect1175-9-3" x="432" y="216" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 437.3274 238.1829)" class="st12 st9 st10">
50
</text>
<rect id="rect1175-9-3-2" x="393.7" y="396.4" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 399.0247 418.6705)" class="st12 st9 st10">
70
</text>
<rect id="rect1175-9-3-2-1" x="340" y="471.4" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 345.3274 493.6232)" class="st12 st9 st10">
40
</text>
<rect id="rect1175-9-3-2-7" x="458.2" y="422.4" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 463.4906 444.614)" class="st12 st9 st10">
50
</text>
<rect id="rect1175-9-3-2-0" x="512.4" y="480.5" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 517.7662 502.6427)" class="st12 st9 st10">
60
</text>
<rect id="rect1175-9-3-2-10" x="708.3" y="610.5" class="st11" width="46.5" height="25.6"/>
<text transform="matrix(1 0 0 1 710.0944 632.7145)" class="st12 st9 st10">
110
</text>
<rect id="rect1175-9-3-2-2" x="633.4" y="384.3" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 638.7507 406.4456)" class="st12 st9 st10">
90
</text>
<rect id="rect1175-9-3-2-5" x="513.1" y="308.9" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 518.4424 331.1189)" class="st12 st9 st10">
20
</text>
<rect id="rect1175-9-3-2-0_1_" x="701.4" y="442" class="st11" width="40.7" height="25.6"/>
<text transform="matrix(1 0 0 1 706.7465 464.1396)" class="st12 st9 st10">
50
</text>
</svg>

After

Width:  |  Height:  |  Size: 12 KiB

185
public/belgium-map.svg

@ -1,61 +1,124 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -22 1136 988">
<path fill="none" d="M0-22h1136v988H0z"/>
<g fill="none" stroke="#646464" stroke-linejoin="round" stroke-miterlimit="3.9" stroke-width="4.3">
<path d="M84 247l1-1 8-4 2-1 3-2 1-1 7-4h1l7-4 7-3 6-4h0l4-3 8-4 7-5 4-2 11-7 9-7h0l1-1 1-2 2 1h0l1 1 1 1 1 1v-2l-2-4 3-1 3-1 5-4 5-3 14-8 7-7 9-4 3-1 4-2 8-3 2-1 1-4 2-2h1l-2 5h1l2-3h2v3l2-1 2-2h4l3-1 5-3 10-3 7-2 2-2h2m211 8l-12 14-18 18-9 4h0l-3 2-3 2h-6 0l-8 3-2 3-4 4-6 2h-2l-2-2h-2l-2 4-4 1h-3l-1-2 2-2v-2l-1-2-2 1-2 3-1 2-5 1-9-1h-1l-1-1h0l-2-1v-12l1-3-1-2-3-1-2 1-3-3h0l-4-1h-6 0l-6-3-8-1-1-1h-3l-2-1-7-5-2-1h-1 0-1v5l-1 1-1-1-3-2h0l-3 2-3 1-4-2h0-1 0v1l2 16h-3l-4 1-2 1h-11 0l-2-1h-1l-2-4-2-1-4-4-5-5v-1l-4-4v-2h2v-1l-1-3-1-2 5-5 1-3-1-2-2-4-2-7m211 8l2-2-1-2-4-3v-2h5"/>
<path d="M495 139h7l15-1 1 1 2 4 3 2h4l2 1 1-1h5l4-2v-4l-8-11-3-6v-6l-2-3 11-6 4-2 3-1h4l2-4h1l1 1 13-2 1 3-1 5 2 8 2 5 1-1 4-2 3 1 8 2 5 1h3l7-1 4-4 1-2 2-3 1-3 3-5v-2l1-2h1l2-2 1-1 3-4 5-2h0l1 2 7 2 2 4 2 1v1l-1 3v4l-3 1v4l2 4v1h1v4l-11-4-3 1 1 6 3 1 4 1 12-1h3l6-1 2 1h1l5 7 1-1 2-1 15-15 4-3 1-3v-1l-1-5 4-4 2-2h1l1 5 1 1v1h7l2 6 2 11-5 12 5 5 1 1 7 9h0l2 9v5h7l10-2 1 1 2 1 5 4-4 13h0l2 3 1 1h2l3-1 16-1 4 1 2-5 12 2v1l5 1 2-5h4l6-3v-1l4-5 12 9 5 4v8l1 7 3 3 2 1h0l3 3 3 4 15 3 1 2h1l5 1h3l4-1 6-1 10 4v1l2 2-1 1h2v4l2-1h3l1 1h2l3 2v3h0l-2 3-1 2-3 1h-2l-1 3h0v3h0l5 2h0v3l-3 1h0-4l-1 1h0v2l1 3-1 2v3l-1 2-1 1-2-2h0l-2 1h0v2l-1 3-3 4v2l4 2-1 6-1 3-1 2-1 3-6 5v1l-3 5 1 1v1l5-2h1l1 3h0l-1 1-1 4-4 4-2 7-2 1-3 1h-2v2l-1 2v1l-1 1v1l-1 1-1 1-1 1h0-2 0l-3 2-1 1v5l1 8 1 1 4 3 4 6 1 1 1 1h0v1l-1 3 2 5v2l-4 7h0l2 1h1l2-2v1h1l2-1 1-1h0l1 2h3l1-3 2-3 4-3h1l1 1 2 5 2-1 4 5h2l7-4 1 1 1 3 2-2 1-1h2l2-2 1 2v2l1 2 1 1h1v-1h5l2-1h2l2-1 3-1h3l1 3h12l4 3 1 2-2 5v1l1 2h2l2-1 1-1 2 1h10l2 4 1 3 8 10 1 2h1l2 4 1 2 2 1h1l-1 2-3 3 1 2 2 2-1 1 1 1 2-1 2-1h4l4 2h1l2 1 6-1v3l-2 3-2 2-1 3v3l-2 1-2-2h-1l-1 3-4 3-2 2-6 5 1 1v4l1 1 1 1 2-1v4l-1 1 3 3 1 3 1 1h1l2 5 2 1 3-3h3l1 1 2-1h3l2 2h5l5 1 3 3v3l-1 2v3l1 1 1 1 6 4 1 5-3 4v7l-5 8-1 3 5 4 1 1 1 2 7 6 1 7-1 1h0-3l-7 4-2-2-2-1-2-1h-2l-1 1h-2l-1 2-1 1-1 1-1 4-2 2v3l2 3-5 4h-4l-2 1-5 1-2 1-3 2h-1v3l-2 2-1 1h-4v2h0v2l-1 1h-1l1 2 2 1 1 1 1 4-1 3 2 4-1 2-4-1-2 1-1 1-2-1h0l-2 4 1 4h0l-2 2h3l1 4-1 2h-2l-1 1v2l-4-2-2-3 2-4-2-2 2-2-3-2h0l-7-1v3l-1 2-2 1h-2l-2-2h0l-4-1-1-2-1-4v-1h-2 0l-6 3h-5l-3 2 1 4v1l-1 2-1 7-10 4-3 1-2 3v3l-1 3-1 2 1 3-1 2-1 1h-3l-3 3-1 2 1 1 2 4 1 1-3 4v1l-2 4-6 3-1 1v4l1 1h0l1 2h0l2 2-1 3v1l-3 1-2 1v2l-1 2-3-1-3 1-1 1-2 4 1 3-1 3-2 1v5l-1 1-3 2-3 4 4 3h3l2 2 3 3h0v2h-1l-1 1h0-1l-2-1h-1 0l-1 1 1 4-2 1v3l-1 2-2 2 1 1 2 2-1 5 1 1 1 8 4-1h2l2-1 6 14 2 3 1 1 1 1v8l4 2 3-2h2l1 1 4 6-5 5-1 4-1 3h0l10 4 2 1v1l-1 2v6l-1 2h-3 0v2l-1 1-2 3v5l-5 3-1 1 1 3h5l-2 3 2 2-2 2-5 4h-1l-1 1-3 3-2 1h-1l-1-1-1-1h-3l-1-2-1-1-3-1-3 1-1 2v2l-1 2v1l-2 1-1-1-1-1h-2v1h-5l-7-2-5-1h-1l-4 2-1 2-2 2-1 2 1 4-1 2-1 2h-2l-2-4-1-1-5-3h-5l-3 5-4 1-3 2-6-1-2 3v4l-3-3v-3l-7-4 2-1h2l2-2 2-2v-2l-2-3-4-2 3-6-4-1-2-7v-3l-10-8v-1l-3-1-2-1h-1l-3-3-2 1v3l-5 1-2 2v1l-2-6 1-3 2-4 3-3-3-5-2-1-1-2-5-4-4-3-3-1-3 3-5-1-2 1-1-1-1-2h-2l-1 1-4-1h-4v-3h0v-3l-1-3h-2l-1 3h-1l-1-2-3 1-1-2 1-4-7-12-2-1-3 1h-2 0l-1-3-1-1-3 1-2-1-4-2-3-2-3-5v-1l-2-1-3-1h-2l-1 1-1-1h-1l-3 1v2l-6 2-3 1-3-1-4-2h-1l-1 2-3-1-1-1 1-1 2-6 2-2v-1l-1-5v-3l-3-1-1-6v-1l1-1 1-1 1-2 1-3v-2l3-4 1-2-2-6v-3l-3-2-2-2-2-4-2-2h-2l-7-1-1-1-2-2 1-6 1-2h2l2-4 1-2h0l-1-3 1-2-1-2 1-5 5-4v-2l-4-3 1-1-1-4 4-1v-5l1-1-1-2 1-3h4l2 3h1v-3l-1-1v-9l3-2 1-1 2-2-3-3v-2l-1-1-5 1-5-2-1-2-2-2-2 1v2l-2 3h-2l-1 1-6 4-1 1-2 3-1 3-1 3-2 1-2 1-7 3-1 2-2 3-1 2v2l-2 3v2l5 1v2l-1 7-2 7-1 5-1 2-5 1-1 1h-1l-1 1h-5l-2 1-7 1-3 1-2 4-3 1h-3l-2 1-1 1-1 3-4 3-6 1h-1l-6 2-3 1-1-2h-2l-7-2-2 1-2-1-2-2h-7l-2-1-2-3h-2l-4-2h-1l-3 1-2 1h-8l-4 2h-6l-2 1-1-1v-4l-2-1h-2v-2h-2l-4 1-1-1-1-1 3-5 1-2-2-2h-2l-1-3v-6l1-1 3-6 1-1 3-1 3 1 1-1 2-2 7-4 1-2v-2l-2-3-3-3-2-2v-1l1-1-1-1-1-1 1-3-1-3h0l1-3h-2l-3-1h-4l-3 2-2 1h-2l-2-2 2-4v-3l4-4v-3l-1-1v-1l1-3 2-2v-3l-2-6 1-1 3-1 2-3v-2l8-6 1-2v-3l-1-3-1-2-2-1h-3l-2-1-1-3-2-1-1 1-2 2v2l4 3v2l-4 2h-3l-1-2v-3l-1-1h-2v-7l-1-3-1-1-1-1-3-3-2-1-2 2-2-5-2-2h-2l-1-4-2-1-2-1-1-1-1-3-1-1-1 1-1 2h-3l-2 2-2 1-2-1-3 1-1-1h-1l-2 1-4 3-7 2-4-1v-2l-1-1-2 1-2-1-5-5-6 1v2h-1l-2-2v-1l-3 1-6-2-3 3-2-1-2 1-2 3-2 5 1 4-1 2-4-3-1 1 1 3h-1l-3-1-2-2v-2l-2-3-1-4-2-3v-4l-1-1-1-2 1-4 3-6v-7l-1-4v-4l-1-2-2-1v-5l-1-2-2-1-3-3v-1l-1-2-5-6-1-1-4 3h-1l-3-2-2-1-3 1h-4l-5 2-4 1-1-4 1-2 1-1 4-5-2-2-4-2-6-1-3 5-1 4h-5l-1 1h-1l-2 1h-5l-2 3-1 1h-1l-5-5-5-1-10-6-2-2-2-3v-5l1-2-1-1 1-1-1-3v-1l1-2-2-4 1-4-1-1v-5l-3-3-2-2-1-4-1-2 1-2-1-2-1-3v-3l1-1 5-3 1-1-3-4v-3l-3-5h-3l-4-1-2-2-2-2 1-2-1-2-3-2-1-2v-2l-1-1-2-3-4-7v-3l-3-1h-2l-2 1h-3l-6 5h-2l-4-1-1-1-2 1h0l-5 2h0-4l-1 1-2 2-3 1-1 2-2 2h-6l-3 3 1 3-1 2h-2v2l-1 4v3l-2 1h-2l-1 1h-3l-1-2h-4l-1-1-2-2-1-3-2-2-5 3h-2l-5-3-2-4v-3l-1-3-5-2 1-1-1-4-3-3-4-3-1-2-1-2v-4l-1-2h0l-1-1h-8l-1-2-1-1h-1l-1-1-2 3-1 1h-5l-1-6-2-3-1-4h-1l-3-1 3-5-1-4 1-2-1-2 1-5-2-3v-3h-3l-1-1 2-2 5-6v-2l3-3-2-5-2-2v-1l-1-4v-2l-1-1-5-2-1-1h-1l-2-5 1-4-2-14-1-3h0l-1-2-1-2v-2l-1-3"/>
<path d="M671 108l-7 10-8-2 2-10z"/>
</g>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M612 457l201-49" class="liege-namur namur-liege"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M523 348l290 60" class="liege-brussels brussels-liege"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M424 489l99-141" class="brussels-mons mons-brussels"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M851 774L614 459" class="namur-arlon arlon-namur"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M523 348l16-46" class="mechelen-brussels brussels-mechelen"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M539 302l-23-128" class="antwerp-mechelen mechelen-antwerp"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M363 233l153-59" class="ghent-antwerp antwerp-ghent"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M254 201l108 33" class="bruges-ghent ghent-bruges"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M360 236l-64 195" class="ghent-tournai tournai-ghent"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M296 431l128 58" class="mons-tournai tournai-mons"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M424 485l188-28" class="mons-namur namur-mons"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M296 431l227-83" class="tournai-brussels brussels-tournai"/>
<path fill="none" stroke="#00aa90" stroke-width="4" d="M364 239l157 102" class="ghent-brussels brussels-ghent"/>
<ellipse cx="523.2" cy="344.9" fill="#00aa90" class="brussels" rx="12.2" ry="11.9"/>
<ellipse cx="515.7" cy="174.4" fill="#00aa90" class="antwerp" rx="12.2" ry="11.9"/>
<ellipse cx="362.3" cy="235.3" fill="#00aa90" class="ghent" rx="12.2" ry="11.9"/>
<ellipse cx="253.8" cy="199.6" fill="#00aa90" class="bruges" rx="12.2" ry="11.9"/>
<ellipse cx="538.7" cy="300.8" fill="#00aa90" class="mechelen" rx="12.2" ry="11.9"/>
<ellipse cx="423.8" cy="487.3" fill="#00aa90" class="mons" rx="12.2" ry="11.9"/>
<ellipse cx="611.3" cy="457.9" fill="#00aa90" class="namur" rx="12.2" ry="11.9"/>
<ellipse cx="812.6" cy="407.6" fill="#00aa90" class="liege" rx="12.2" ry="11.9"/>
<ellipse cx="294.5" cy="432.1" fill="#00aa90" class="tournai" rx="12.2" ry="11.9"/>
<ellipse cx="853.4" cy="776" fill="#00aa90" class="arlon" rx="12.2" ry="11.9"/>
<text>
<tspan x="534" y="182" fill="#66baa3" class="antwerp" font-family="sans-serif" font-size="26.7" font-weight="700">ANTWERP</tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-3)" class="liege" font-family="sans-serif" font-size="26.7" transform="translate(283 243)">
<tspan x="547" y="178"><tspan font-weight="700">LIEGE</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-3-7)" class="mechelen" font-family="sans-serif" font-size="26.7" transform="translate(9 125)">
<tspan x="547" y="178"><tspan font-weight="700">MECHELEN</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35)" class="bruges" font-family="sans-serif" font-size="26.7" transform="translate(-394 60)">
<tspan x="547" y="178"><tspan font-weight="700">BRUGES</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9)" class="tournai" font-family="sans-serif" font-size="26.7" transform="translate(-227 264)">
<tspan x="547" y="178"><tspan font-weight="700">TOURNAI</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2)" class="mons" font-family="sans-serif" font-size="26.7" transform="translate(-107 331)">
<tspan x="547" y="178"><tspan font-weight="700">MONS</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0)" class="brussels" font-family="sans-serif" font-size="26.7" transform="translate(-4 169)">
<tspan x="547" y="178"><tspan font-weight="700">BRUSSELS</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-3)" class="ghent" font-family="sans-serif" font-size="26.7" transform="translate(-160 70)">
<tspan x="547" y="178"><tspan font-weight="700">GHENT</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-0)" class="namur" font-family="sans-serif" font-size="26.7" transform="translate(95 300)">
<tspan x="547" y="178"><tspan font-weight="700">NAMUR</tspan></tspan>
</text>
<text fill="#66baa3" style="line-height:1.25;shape-inside:url(#rect881-35-9-2-0-0-6)" class="arlon" font-family="sans-serif" font-size="26.7" transform="translate(180 593)">
<tspan x="547" y="178"><tspan font-weight="700">ARLON</tspan></tspan>
</text>
</svg>
<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1"
id="svg116" inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07)" sodipodi:docname="belgium-map.svg" xmlns:cc="http://creativecommons.org/ns#" xmlns:dc="http://purl.org/dc/elements/1.1/" xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 951 770.6"
style="enable-background:new 0 0 951 770.6;" xml:space="preserve">
<style type="text/css">
.st0{fill:none;}
.st1{fill:#FDC646;}
.st2{fill:none;stroke:#00856E;stroke-width:4;stroke-miterlimit:10;}
.st3{fill:none;stroke:#00856E;stroke-width:4;}
.st4{fill:none;stroke:#00856E;stroke-width:4;}
.st5{fill:none;stroke:#00856E;stroke-width:4;}
.st6{fill:none;stroke:#00856E;stroke-width:4;}
.st7{fill:none;stroke:#00856E;stroke-width:4;}
.st9{font-size:25px;}
.st10{fill:#00856E;}
.st11{fill:#FFC408;}
</style>
<sodipodi:namedview bordercolor="#666666" borderopacity="1" gridtolerance="10" guidetolerance="10" id="namedview118" inkscape:current-layer="g10" inkscape:cx="294.90731" inkscape:cy="463.42751" inkscape:pageopacity="0" inkscape:pageshadow="2" inkscape:window-height="976" inkscape:window-maximized="1" inkscape:window-width="1920" inkscape:window-x="1920" inkscape:window-y="26" inkscape:zoom="0.80364372" objecttolerance="10" pagecolor="#ffffff" showgrid="false">
</sodipodi:namedview>
<path id="path2" class="st0" d="M0,0h951v770.6H0V0z"/>
<g id="g10">
<path id="path6" class="st1" d="M420.8,63.6l-12,14l-18,18l-9,4l0,0l-3,2l-3,2h-6l0,0l-8,3l-2,3l-4,4l-6,2h-2l-2-2h-2l-2,4l-4,1h-3
l-1-2l2-2v-2l-1-2l-2,1l-2,3l-1,2l-5,1l-9-1h-1l-1-1l0,0l-2-1v-12l1-3l-1-2l-3-1l-2,1l-3-3l0,0l-4-1h-6l0,0l-6-3l-8-1l-1-1h-3l-2-1
l-7-5l-2-1h-1l0,0h-1v5l-1,1l-1-1l-3-2l0,0l-3,2l-3,1l-4-2l0,0h-1l0,0v1l2,16h-3l-4,1l-2,1h-11l0,0l-2-1h-1l-2-4l-2-1l-4-4l-5-5v-1
l-4-4v-2h2v-1l-1-3l-1-2l5-5l1-3l-1-2l-2-4l-2-7h-2l-2,2l-7,2l-10,3l-5,3l-3,1h-4l-2,2l-2,1v-3h-2l-2,3h-1l2-5h-1l-2,2l-1,4l-2,1
l-8,3l-4,2l-3,1l-9,4l-7,7l-14,8l-5,3l-5,4l-3,1l-3,1l2,4v2l-1-1l-1-1l-1-1l0,0l-2-1l-1,2l-1,1l0,0l-9,7l-11,7l-4,2l-7,5l-8,4l-4,3
l0,0l-6,4l-7,3l-7,4h-1l-7,4l-1,1l-3,2l-2,1l-8,4l-1,1l1,3v2l1,2l1,2l0,0l1,3l2,14l-1,4l2,5h1l1,1l5,2l1,1v2l1,4v1l2,2l2,5l-3,3v2
l-5,6l-2,2l1,1h3v3l2,3l-1,5l1,2l-1,2l1,4l-3,5l3,1h1l1,4l2,3l1,6h5l1-1l2-3l1,1h1l1,1l1,2h8l1,1l0,0l1,2v4l1,2l1,2l4,3l3,3l1,4
l-1,1l5,2l1,3v3l2,4l5,3h2l5-3l2,2l1,3l2,2l1,1h4l1,2h3l1-1h2l2-1v-3l1-4v-2h2l1-2l-1-3l3-3h6l2-2l1-2l3-1l2-2l1-1h4l0,0l5-2l0,0
l2-1l1,1l4,1h2l6-5h3l2-1h2l3,1v3l4,7l2,3l1,1v2l1,2l3,2l1,2l-1,2l2,2l2,2l4,1h3l3,5v3l3,4l-1,1l-5,3l-1,1v3l1,3l1,2l-1,2l1,2l1,4
l2,2l3,3v5l1,1l-1,4l2,4l-1,2v1l1,3l-1,1l1,1l-1,2v5l2,3l2,2l10,6l5,1l5,5h1l1-1l2-3h5l2-1h1l1-1h5l1-4l3-5l6,1l4,2l2,2l-4,5l-1,1
l-1,2l1,4l4-1l5-2h4l3-1l2,1l3,2h1l4-3l1,1l5,6l1,2v1l3,3l2,1l1,2v5l2,1l1,2v4l1,4v7l-3,6l-1,4l1,2l1,1v4l2,3l1,4l2,3v2l2,2l3,1h1
l-1-3l1-1l4,3l1-2l-1-4l2-5l2-3l2-1l2,1l3-3l6,2l3-1v1l2,2h1v-2l6-1l5,5l2,1l2-1l1,1v2l4,1l7-2l4-3l2-1h1l1,1l3-1l2,1l2-1l2-2h3
l1-2l1-1l1,1l1,3l1,1l2,1l2,1l1,4h2l2,2l2,5l2-2l2,1l3,3l1,1l1,1l1,3v7h2l1,1v3l1,2h3l4-2v-2l-4-3v-2l2-2l1-1l2,1l1,3l2,1h3l2,1
l1,2l1,3v3l-1,2l-8,6v2l-2,3l-3,1l-1,1l2,6v3l-2,2l-1,3v1l1,1v3l-4,4v3l-2,4l2,2h2l2-1l3-2h4l3,1h2l-1,3l0,0l1,3l-1,3l1,1l1,1l-1,1
v1l2,2l3,3l2,3v2l-1,2l-7,4l-2,2l-1,1l-3-1l-3,1l-1,1l-3,6l-1,1v6l1,3h2l2,2l-1,2l-3,5l1,1l1,1l4-1h2v2h2l2,1v4l1,1l2-1h6l4-2h8
l2-1l3-1h1l4,2h2l2,3l2,1h7l2,2l2,1l2-1l7,2h2l1,2l3-1l6-2h1l6-1l4-3l1-3l1-1l2-1h3l3-1l2-4l3-1l7-1l2-1h5l1-1h1l1-1l5-1l1-2l1-5
l2-7l1-7v-2l-5-1v-2l2-3v-2l1-2l2-3l1-2l7-3l2-1l2-1l1-3l1-3l2-3l1-1l6-4l1-1h2l2-3v-2l2-1l2,2l1,2l5,2l5-1l1,1v2l3,3l-2,2l-1,1
l-3,2v9l1,1v3h-1l-2-3h-4l-1,3l1,2l-1,1v5l-4,1l1,4l-1,1l4,3v2l-5,4l-1,5l1,2l-1,2l1,3l0,0l-1,2l-2,4h-2l-1,2l-1,6l2,2l1,1l7,1h2
l2,2l2,4l2,2l3,2v3l2,6l-1,2l-3,4v2l-1,3l-1,2l-1,1l-1,1v1l1,6l3,1v3l1,5v1l-2,2l-2,6l-1,1l1,1l3,1l1-2h1l4,2l3,1l3-1l6-2v-2l3-1h1
l1,1l1-1h2l3,1l2,1v1l3,5l3,2l4,2l2,1l3-1l1,1l1,3l0,0h2l3-1l2,1l7,12l-1,4l1,2l3-1l1,2h1l1-3h2l1,3v3l0,0v3h4l4,1l1-1h2l1,2l1,1
l2-1l5,1l3-3l3,1l4,3l5,4l1,2l2,1l3,5l-3,3l-2,4l-1,3l2,6v-1l2-2l5-1v-3l2-1l3,3h1l2,1l3,1v1l10,8v3l2,7l4,1l-3,6l4,2l2,3v2l-2,2
l-2,2h-2l-2,1l7,4v3l3,3v-4l2-3l6,1l3-2l4-1l3-5h5l5,3l1,1l2,4h2l1-2l1-2l-1-4l1-2l2-2l1-2l4-2h1l5,1l7,2h5v-1h2l1,1l1,1l2-1v-1
l1-2v-2l1-2l3-1l3,1l1,1l1,2h3l1,1l1,1h1l2-1l3-3l1-1h1l5-4l2-2l-2-2l2-3h-5l-1-3l1-1l5-3v-5l2-3l1-1v-2l0,0h3l1-2v-6l1-2v-1l-2-1
l-10-4l0,0l1-3l1-4l5-5l-4-6l-1-1h-2l-3,2l-4-2v-8l-1-1l-1-1l-2-3l-6-14l-2,1h-2l-4,1l-1-8l-1-1l1-5l-2-2l-1-1l2-2l1-2v-3l2-1l-1-4
l1-1l0,0h1l2,1h1l0,0l1-1h1v-2l0,0l-3-3l-2-2h-3l-4-3l3-4l3-2l1-1v-5l2-1l1-3l-1-3l2-4l1-1l3-1l3,1l1-2v-2l2-1l3-1v-1l1-3l-2-2l0,0
l-1-2l0,0l-1-1v-4l1-1l6-3l2-4v-1l3-4l-1-1l-2-4l-1-1l1-2l3-3h3l1-1l1-2l-1-3l1-2l1-3v-3l2-3l3-1l10-4l1-7l1-2v-1l-1-4l3-2h5l6-3
l0,0h2v1l1,4l1,2l4,1l0,0l2,2h2l2-1l1-2v-3l7,1l0,0l3,2l-2,2l2,2l-2,4l2,3l4,2v-2l1-1h2l1-2l-1-4h-3l2-2l0,0l-1-4l2-4l0,0l2,1l1-1
l2-1l4,1l1-2l-2-4l1-3l-1-4l-1-1l-2-1l-1-2h1l1-1v-2l0,0v-2h4l1-1l2-2v-3h1l3-2l2-1l5-1l2-1h4l5-4l-2-3v-3l2-2l1-4l1-1l1-1l1-2h2
l1-1h2l2,1l2,1l2,2l7-4h3l0,0l1-1l-1-7l-7-6l-1-2l-1-1l-5-4l1-3l5-8v-7l3-4l-1-5l-6-4l-1-1l-1-1v-3l1-2v-3l-3-3l-5-1h-5l-2-2h-3
l-2,1l-1-1h-3l-3,3l-2-1l-2-5h-1l-1-1l-1-3l-3-3l1-1v-4l-2,1l-1-1l-1-1v-4l-1-1l6-5l2-2l4-3l1-3h1l2,2l2-1v-3l1-3l2-2l2-3v-3l-6,1
l-2-1h-1l-4-2h-4l-2,1l-2,1l-1-1l1-1l-2-2l-1-2l3-3l1-2h-1l-2-1l-1-2l-2-4h-1l-1-2l-8-10l-1-3l-2-4h-10l-2-1l-1,1l-2,1h-2l-1-2v-1
l2-5l-1-2l-4-3h-12l-1-3h-3l-3,1l-2,1h-2l-2,1h-5v1h-1l-1-1l-1-2v-2l-1-2l-2,2h-2l-1,1l-2,2l-1-3l-1-1l-7,4h-2l-4-5l-2,1l-2-5l-1-1
h-1l-4,3l-2,3l-1,3h-3l-1-2l0,0l-1,1l-2,1h-1v-1l-2,2h-1l-2-1l0,0l4-7v-2l-2-5l1-3v-1l0,0l-1-1l-1-1l-4-6l-4-3l-1-1l-1-8v-5l1-1
l3-2l0,0h2l0,0l1-1l1-1l1-1v-1l1-1v-1l1-2v-2h2l3-1l2-1l2-7l4-4l1-4l1-1l0,0l-1-3h-1l-5,2v-1l-1-1l3-5v-1l6-5l1-3l1-2l1-3l1-6l-4-2
v-2l3-4l1-3v-2l0,0l2-1l0,0l2,2l1-1l1-2v-3l1-2l-1-3v-2l0,0l1-1h4l0,0l3-1v-3l0,0l-5-2l0,0v-3l0,0l1-3h2l3-1l1-2l2-3l0,0v-3l-3-2
h-2l-1-1h-3l-2,1v-4h-2l1-1l-2-2v-1l-10-4l-6,1l-4,1h-3l-5-1h-1l-1-2l-15-3l-3-4l-3-3l0,0l-2-1l-3-3l-1-7v-8l-5-4l-12-9l-4,5v1
l-6,3h-4l-2,5l-5-1v-1l-12-2l-2,5l-4-1l-16,1l-3,1h-2l-1-1l-2-3l0,0l4-13l-5-4l-2-1l-1-1l-10,2h-7v-5l-2-9l0,0l-7-9l-1-1l-5-5l5-12
l-2-11l-2-6h-7v-1l-1-1l-1-5h-1l-2,2l-4,4l1,5v1l-1,3l-4,3l-15,15l-2,1l-1,1l-5-7h-1l-2-1l-6,1h-3l-12,1l-4-1l-3-1l-1-6l3-1l11,4
v-4h-1v-1l-2-4v-4l3-1v-4l1-3v-1l-2-1l-2-4l-7-2l-1-2l0,0l-5,2l-3,4l-1,1l-2,2h-1l-1,2v2l-3,5l-1,3l-2,3l-1,2l-4,4l-7,1h-3l-5-1
l-8-2l-3-1l-4,2l-1,1l-2-5l-2-8l1-5l-1-3l-13,2l-1-1h-1l-2,4h-4l-3,1l-4,2l-11,6l2,3v6l3,6l8,11v4l-4,2h-5l-1,1l-2-1h-4l-3-2l-2-4
l-1-1l-15,1h-7 M420.8,63.6l2-2l-1-2l-4-3v-2h5"/>
</g>
<path id="path12" class="st2" d="M564.7,371.1L748,321"/>
<path id="path14" class="st3" d="M458,257.9L748,321"/>
<path id="path16" class="st3" d="M359,402l99-141"/>
<path id="path18" class="st4" d="M786,687L564.7,371.1"/>
<path id="path20" class="st3" d="M458,257.9l14.7-79.7"/>
<path id="path22" class="st3" d="M474.4,173.1l-19.1-82.7"/>
<path id="path24" class="st5" d="M290.1,153.2l165.2-65"/>
<path id="path26" class="st6" d="M189.1,112.6l101,40.6"/>
<path id="path28" class="st3" d="M290.1,153.2L231,344"/>
<path id="path30" class="st3" d="M231,344l128,58"/>
<path id="path32" class="st3" d="M359,398l205.3-24.9"/>
<path id="path34" class="st3" d="M231,344l225-86.1"/>
<path id="path36" class="st7" d="M297.8,157.5L456,257.9"/>
<ellipse fill="#00856E" class="antwerp" id="ellipse40" cx="454.5" cy="88.2" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="brussels" id="ellipse38" cx="458.2" cy="257.9" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="ghent" id="ellipse42" cx="291.3" cy="154.3" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="bruges" id="ellipse44" cx="188.8" cy="112.6" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="mechelen" id="ellipse46" cx="473.7" cy="173.8" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="mons" id="ellipse48" cx="358.8" cy="400.3" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="namur" id="ellipse50" cx="564.3" cy="372.9" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="liege" id="ellipse52" cx="747.6" cy="320.6" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="tournai" id="ellipse54" cx="229.5" cy="345.1" rx="12.2" ry="11.9"/>
<ellipse fill="#00856E" class="arlon" id="ellipse56" cx="788.4" cy="689" rx="12.2" ry="11.9"/>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 491.0674 183.1056)" class="mechelen st9">MECHELEN</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 472.4283 98.463)" class="antwerp st9">ANTWERP</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 594.7698 393.9895)" class="namur st9">NAMUR</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 768.0781 330.6074)" class="liege st9">LIEGE</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 673.7654 698.2338)" class="arlon st9">ARLON</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 321.4514 437.0341)" class="mons st9">MONS</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 50.2342 124.5001)" class="bruges st9">BRUGES</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 182.6856 183.1054)" class="ghent st9">GHENT</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 477.7684 257.9001)" class="brussels st9">BRUSSELS</text>
<text font-weight="bold" fill="#00856E" transform="matrix(1 0 0 1 85.914 355.1399)" class="tournai st9">TOURNAI</text>
<rect id="rect1175" x="219.8" y="121.2" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 225.1011 143.3633)" class="st11 st9">40</text>
<rect id="rect1175-3" x="244.8" y="228.7" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 250.1353 250.8834)" class="st11 st9">60</text>
<rect id="rect1175-9" x="357.1" y="194.2" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 362.4669 216.3563)" class="st11 st9">50</text>
<rect id="rect1175-8" x="443.9" y="119.4" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 449.1873 141.542)" class="st11 st9">20</text>
<rect id="rect1175-9-3" x="367" y="107" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 372.3274 129.1829)" class="st11 st9">50</text>
<rect id="rect1175-9-3-2" x="328.7" y="287.4" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 334.0247 309.6705)" class="st11 st9">70</text>
<rect id="rect1175-9-3-2-1" x="275" y="362.4" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 280.3274 384.6232)" class="st11 st9">40</text>
<rect id="rect1175-9-3-2-7" x="393.2" y="313.4" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 398.4906 335.614)" class="st11 st9">50</text>
<rect id="rect1175-9-3-2-0" x="447.4" y="371.5" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 452.7662 393.6427)" class="st11 st9">60</text>
<rect id="rect1175-9-3-2-10" x="643.3" y="501.5" class="st10" width="46.5" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 645.0945 523.7145)" class="st11 st9">110</text>
<rect id="rect1175-9-3-2-2" x="568.4" y="275.3" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 573.7507 297.4456)" class="st11 st9">90</text>
<rect id="rect1175-9-3-2-5" x="448.1" y="199.9" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 453.4424 222.1189)" class="st11 st9">20</text>
<rect id="rect1175-9-3-2-0_1_" x="636.4" y="333" class="st10" width="40.7" height="25.6"/>
<text font-weight="bold" transform="matrix(1 0 0 1 641.7466 355.1396)" class="st11 st9">50</text>
</svg>

Before

Width:  |  Height:  |  Size: 9.6 KiB

After

Width:  |  Height:  |  Size: 12 KiB

45
src/components/HomeView.jsx

@ -12,16 +12,16 @@ const { Header, Content } = Layout;
const { Option } = Select;
let highlightInitial = {
bruges: '#00aa90',
ghent: '#00aa90',
antwerp: '#00aa90',
mechelen: '#00aa90',
tournai: '#00aa90',
brussels: '#00aa90',
mons: '#00aa90',
namur: '#00aa90',
liege: '#00aa90',
arlon: '#00aa90',
bruges: '#00856E',
ghent: '#00856E',
antwerp: '#00856E',
mechelen: '#00856E',
tournai: '#00856E',
brussels: '#00856E',
mons: '#00856E',
namur: '#00856E',
liege: '#00856E',
arlon: '#00856E',
};
function HomeView() {
@ -113,7 +113,7 @@ function HomeView() {
// Add cities to highlight
let updatedgHighlighted = {};
data.path.forEach((city) => {
updatedgHighlighted[city.name] = '#E83015';
updatedgHighlighted[city.name] = '#E63318';
});
setHighlighted(updatedgHighlighted);
@ -156,10 +156,9 @@ function HomeView() {
display: 'flex',
flexFlow: 'row wrap',
justifyContent: 'space-between',
alignItems: 'center',
}}
>
<div style={{ margin: '0 20px' }}>
<div style={{ margin: '150px 20px' }}>
<Section>
<h2>Starting Point</h2>
<div>
@ -206,6 +205,16 @@ function HomeView() {
</Button>
{errorSelect.flag && <p>{errorSelect.message}</p>}
</Section>
</div>
<div>
{graph.nodes.length > 0 && (
<div>
<div style={{ width: '600px' }}>
<Map highlighted={highlighted} />
</div>
</div>
)}
{shortestPath && (
<Section>
@ -227,14 +236,6 @@ function HomeView() {
</Section>
)}
</div>
{graph.nodes.length > 0 && (
<div>
<div style={{ width: '500px' }}>
<Map highlighted={highlighted} />
</div>
</div>
)}
</Main>
</Content>
</>
@ -255,7 +256,7 @@ const InlineH1 = styled.h1`
const Main = styled.main`
padding-top: 20px;
max-width: 1200px;
max-width: 1000px;
margin: 0 auto;
`;

4
src/components/Map.jsx

@ -11,10 +11,6 @@ export default function Map({ highlighted }) {
height: '500px',
}}
>
<SvgProxy
selector='.liege-namur, .namur-liege'
fill={highlighted.LN}
/>
<SvgProxy selector='.ghent' fill={highlighted.ghent} />
<SvgProxy selector='.brussels' fill={highlighted.brussels} />
<SvgProxy selector='.antwerp' fill={highlighted.antwerp} />

Loading…
Cancel
Save