map update

3 files changed, 436 insertions, 190 deletions

diff --git a/package.json b/package.json
index 7057e577..00d29f0a 100644
--- a/package.json
+++ b/package.json
@@ -54,6 +54,7 @@
 	"dependencies": {
 		"@scure/bip39": "^1.2.1",
 		"html2canvas": "^1.4.1",
-		"leaflet-tooltip-layout": "^0.1.2"
+		"leaflet-tooltip-layout": "^0.1.2",
+		"maplibre-gl": "^3.3.1"
 	}
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 2860602e..ce0d43d1 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -14,6 +14,9 @@ dependencies:
   leaflet-tooltip-layout:
     specifier: ^0.1.2
     version: 0.1.2([email protected])
+  maplibre-gl:
+    specifier: ^3.3.1
+    version: 3.3.1
 
 devDependencies:
   '@scure/base':
@@ -317,6 +320,54 @@ packages:
     resolution: {integrity: sha512-XPSJHWmi394fuUuzDnGz1wiKqWfo1yXecHQMRf2l6hztTO+nPru658AyDngaBe7isIxEkRsPR3FZh+s7iVa4Uw==}
     dev: true
 
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
+    hasBin: true
+    dependencies:
+      get-stream: 6.0.1
+      minimist: 1.2.7
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-rY0o9A5ECsTQRVhv7tL/OyDpGAoUB4tTvLiW1DSzQGq4bvTPhNw1VpSNjDJc5GFZ2XuyOtSWSVN05qOtcD71qQ==}
+    engines: {node: '>= 0.6'}
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-6j56HdLTwWGO0fJPlrZtdU/B13q8Uwmo18Ck2GnGgN9PCFyKTZ3UbXeEdRFh18i9XQ92eH2VdtpJHpBD3aripQ==}
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-qMqa27TLw+ZQz5Jk+RcwZGH7BQf5G/TrutJhspsca/3SHwmgKQ1iq+d3Jxz5oysPVYTGP6aXxCo5Lk9Er6YBAA==}
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-nMkuDXFv60aBr9soUG5q+GvZYL+2KZHVvsqFCzqnkGEf46U2fvmytHaEVc1/YZbiLn8X+eR3QzX1+dwDO1lxlw==}
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-MCEddb8u44/xfQ3oD+Srl/tNcQoqTw3goGk2oLsrFxOTc3dUp+kAnby3PvAeeBYSMSjSPD1nd1AJA6W49WnoUw==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+    dev: false
+
+  /@mapbox/[email protected]:
+    resolution: {integrity: sha512-Es6WcD0nO5l+2BOQS4uLfNPYQaNDfbot3X1XUoloz+x0mPDS3eeORZJl06HXjwBG1fOGwCRnzK88LMdxKRrd6Q==}
+    engines: {node: '>=6.0.0'}
+    dev: false
+
+  /@maplibre/[email protected]:
+    resolution: {integrity: sha512-C2JAk64XUz9v78+bpyTk1zvgjjnDsB8CCjNumyAYdWK2dvdDtILzh1AGBMdS/llX3KaHjGYxAE5wOwfdwq4Pog==}
+    hasBin: true
+    dependencies:
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/unitbezier': 0.0.1
+      json-stringify-pretty-compact: 3.0.0
+      minimist: 1.2.8
+      rw: 1.3.3
+      sort-object: 3.0.3
+    dev: false
+
   /@noble/[email protected]:
     resolution: {integrity: sha512-6YBxJDAapHSdd3bLDv6x2wRPwq4QFMUaB3HvljNBUTThDd12eSm7/3F+2lnfzx2jvM+S6Nsy0jEt9QbPqSwqRw==}
     dev: true
@@ -534,6 +585,22 @@ packages:
     resolution: {integrity: sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==}
     dev: true
 
+  /@types/[email protected]:
+    resolution: {integrity: sha512-L7A0AINMXQpVwxHJ4jxD6/XjZ4NDufaRlUJHjNIFKYUFBH1SvOW+neaqb0VTRSLW5suSrSu19ObFEFnfNcr+qg==}
+    dev: false
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
+    dev: false
+
+  /@types/[email protected]:
+    resolution: {integrity: sha512-RpwGE57xM4a/YCH6XWzfcPVRPAu/jiCll0bEGRn6a4iubN2k4xZizskQoRj8fuXyo9BpI7F3bwz3uxs0pWbGNw==}
+    dependencies:
+      '@types/geojson': 7946.0.11
+      '@types/mapbox__point-geometry': 0.1.2
+      '@types/pbf': 3.0.3
+    dev: false
+
   /@types/[email protected]:
     resolution: {integrity: sha512-HJSUJmni4BeDHhfzn6nF0sVmd1SMezP7/4F0Lq+aXzmp2xm9O7WXrUtHW/CHlYVtZUbByEvWidHqRtcJXGF2Ng==}
     dev: true
@@ -542,6 +609,10 @@ packages:
     resolution: {integrity: sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==}
     dev: true
 
+  /@types/[email protected]:
+    resolution: {integrity: sha512-hw6bDMjvm+QTvEC+pRLpnTknQXoPu8Fnf+A+zX9HB7j/7RfYajFSbdukabo3adPwvvEHhIMafQl0R0Tpej7clQ==}
+    dev: false
+
   /@types/[email protected]:
     resolution: {integrity: sha512-SnHmG9wN1UVmagJOnyo/qkk0Z7gejYxOYYmaAwr5u2yFYfsupN3sg10kyzN8Hep/2zbHxCnsumxOoRIRMBwKCg==}
     dev: true
@@ -556,6 +627,12 @@ packages:
       '@types/node': 18.11.17
     dev: true
 
+  /@types/[email protected]:
+    resolution: {integrity: sha512-dNK02GO1UApgo+1KpY4jOfm3uWb2eBCMB/VMM2y8cMoF49FiqVVcOawEg19wxYcaX7SvEs370incOuFtFGrVLg==}
+    dependencies:
+      '@types/geojson': 7946.0.11
+    dev: false
+
   /@zerodevx/[email protected]:
     resolution: {integrity: sha512-vWiY6IqsstcOoQ8PFBuFuxgPkj1JFAGhUF9gC7wLx7c5A9SSfdtxWs/39ekGSIeyJK0yqWhTcmzGrCEWSELzDw==}
     dev: true
@@ -591,6 +668,16 @@ packages:
     resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-sKpyeERZ02v1FeCZT8lrfJq5u6goHCtpTAzPwJYe7c8SPFOboNjNg1vz2L4VTn9T4PQxEx13TbXLmYUcS6Ug7Q==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-Q+JC7Whu8HhmTdBph/Tq59IoRtoy6KAm5zzPv00WdujX82lbAL8K7WVjne7vdCsAmbF4AYaDOPyO3k0kl8qIrw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /[email protected]([email protected]):
     resolution: {integrity: sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==}
     engines: {node: ^10 || ^12 || >=14}
@@ -702,6 +789,19 @@ packages:
       streamsearch: 1.1.0
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-nZD//kc78OOxeYtRlVk8/zXqTB4gf/nlguL1ggWA8FuchMyOxcyHR4QPQZMUmA7czC+YnaBrPUCubqAWe50DaA==}
+    dependencies:
+      typewise-core: 1.2.0
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-rHuuseJ9iQ0na6UDhnrRVDh8YnWVlU6xM3VH6q/+yHDeUH2zIhUzP+2/h3LIrhLDBtTqzWpE3p3tP/boefskKQ==}
+    dependencies:
+      bytewise-core: 1.2.3
+      typewise: 1.0.3
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-7O+FbCihrB5WGbFYesctwmTKae6rOiIzmz1icreWJ+0aA7LJfuqhEso2T9ncpcFtzMQtzXf2QGGueWJGTYsqrA==}
     dependencies:
@@ -815,6 +915,10 @@ packages:
     resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-/pjZsA1b4RPHbeWZQn66SWS8nZZWLQQ23oE3Eam7aroEFGEvwKAsJfZ9ytiEMycfzXWpca4FA9QIOehf7PocBQ==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==}
     dev: true
@@ -866,6 +970,21 @@ packages:
     resolution: {integrity: sha512-Rfkk/Mp/DL7JVje3u18FxFujQlTNR2q6QfMSMB7AvCBx91NGj/ba3kCfza0f6dVDbw7YlRf/nDrn7pQrCCyQ/w==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-zCnTtlxNoAiDc3gqY2aYAWFx7XWWiasuF2K8Me5WbN8otHKTUKBwjPtNpRs/rbUZm7KxWAaNj7P1a/p52GbVug==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-extendable: 0.1.1
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-BwY5b5Ql4+qZoefgMj2NUmx+tehVTH/Kf4k1ZEtOHNFcm2wSxMRo992l6X3TIgni2eZVTZ85xMOjF31fwZAj6Q==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      assign-symbols: 1.0.0
+      is-extendable: 1.0.1
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-DVj4CQIYYow0BlaelwK1pHl5n5cRSJfM60UA0zK891sVInoPri2Ekj7+e1CT3/3qxXenpI+nBBmQAcJPJgaj4w==}
     engines: {node: '>=8.6.0'}
@@ -910,6 +1029,10 @@ packages:
     resolution: {integrity: sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-EvGQQi/zPrDA6zr6BnJD/YhwAkBP8nnJ9emh3EnHQKVMfg/MRVtPbMYdgVy/IaEmn4UfagD2a6fafPDL5hbtwg==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-QJVz1Tj7MS099PevUG5jvnt9tSkXN8K14dxQlikJuPt4uD9hHAHjLyLBiLR5zELelBdD9QNRAXZzsJx0WaDL9A==}
     dependencies:
@@ -918,6 +1041,20 @@ packages:
       has-symbols: 1.0.3
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==}
+    engines: {node: '>=10'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-Ln0UQDlxH1BapMu3GPtf7CuYNwRZf2gwCuPqbyG6pB8WfmFpzqcy4xtAaAMUhnNqjMKTiCPZG2oMT3YSx8U2NA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-wcCp8vu8FT22BnvKVPjXa/ICBWRq/zjFfdofZy1WSpQZpphblv12/bOQLBC1rMM7SGOFS9ltVmKOHil5+Ml7gA==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==}
     engines: {node: '>= 6'}
@@ -954,6 +1091,15 @@ packages:
       once: 1.4.0
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-awConJSVCHVGND6x3tmMaKcQvwXLhjdkmomy2W+Goaui8YPgYgXJZewhg3fWC+DlfqqQuWg8AwqjGTD2nAPVWg==}
+    engines: {node: '>=6'}
+    dependencies:
+      ini: 1.3.8
+      kind-of: 6.0.3
+      which: 1.3.1
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-40oNTM9UfG6aBmuKxk/giHn5nQ8RVz/SS4Ir6zgzOv9/qC3kKZ9v4etGTcJbEl/NyVQH7FGU7d+X1egr57Md2Q==}
     dev: true
@@ -992,7 +1138,6 @@ packages:
 
   /[email protected]:
     resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==}
-    dev: true
 
   /[email protected]:
     resolution: {integrity: sha512-k92I/b08q4wvFscXCLvqfsHCrjrF7yiXsQuIVvVE7N82W3+aqpzuUdBbfhWcy/FZR3/4IgflMgKLOsvPDrGCJA==}
@@ -1005,6 +1150,10 @@ packages:
     resolution: {integrity: sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==}
     engines: {node: '>=8'}
@@ -1025,6 +1174,18 @@ packages:
       has: 1.0.3
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-5BMULNob1vgFX6EjQw5izWDxrecWK9AM72rugNr0TFldMOi0fj6Jk+zeKIt0xGj4cEfQIJth4w3OKWOJ4f+AFw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-arnXMxT1hhoKo9k1LZdmlNyJdDDfy2v0fXjFlmok4+i8ul/6WlbVge9bhM74OpNPQPMGUToDtz+KXa1PneJxOA==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      is-plain-object: 2.0.4
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==}
     engines: {node: '>=0.10.0'}
@@ -1046,12 +1207,41 @@ packages:
     engines: {node: '>=0.12.0'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-h5PpgXkWitc38BBMYawTYMWJHFZJVnBquFE57xFpjB8pJFiF6gZ+bU+WyI/yqXiFR5mdLsgYNaPe8uao6Uv9Og==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      isobject: 3.0.1
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-U82MsXXiFIrjCK4otLT+o2NA2Cd2g5MLoOVXUZjIOhLurrRxpEXzI8O0KZHr3IjLvlAH1kTPYSuqer5T9ZVBKQ==}
     dependencies:
       '@types/estree': 0.0.39
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-Rc2suX5meI0S3bfdZuA7JMFBGkJ875ApfVyq2WHELjBiiG22My/l7/8zPpH/CfFVQHuVLd8NLR0nv6vi0BYYKA==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-WbCVYJ27Sz8zi9Q7Q0xHC+05iwkm3Znipc2XTlrnJbsHMYktW4hPhXUE8Ys1engBrvffoSCqbil1JQAa7clRpA==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-dcS1ul+9tmeD95T+x28/ehLgd9mENa3LsvDTtzm3vyBEO7RPptvAD+t44WVXaUjTBRcrpFeFlC8WCruUR456hw==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-o+NO+8WrRiQEE4/7nwRJhN1HWpVmJm511pBHUxPLtp0BUISzlBplORYSmTclCnJvQq2tKu/sgl3xVpkc7ZWuQQ==}
     engines: {node: '>=6'}
@@ -1101,6 +1291,37 @@ packages:
       '@jridgewell/sourcemap-codec': 1.4.14
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-SfRq9bT68GytDzCOG0IoTGg2rASbgdYunW/6xhnp55QuLmwG1M/YOlXxqHaphwia7kZbMvBOocvY0fp5yfTjZA==}
+    engines: {node: '>=16.14.0', npm: '>=8.1.0'}
+    dependencies:
+      '@mapbox/geojson-rewind': 0.5.2
+      '@mapbox/jsonlint-lines-primitives': 2.0.2
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/tiny-sdf': 2.0.6
+      '@mapbox/unitbezier': 0.0.1
+      '@mapbox/vector-tile': 1.3.1
+      '@mapbox/whoots-js': 3.1.0
+      '@maplibre/maplibre-gl-style-spec': 19.3.2
+      '@types/geojson': 7946.0.11
+      '@types/mapbox__point-geometry': 0.1.2
+      '@types/mapbox__vector-tile': 1.3.1
+      '@types/pbf': 3.0.3
+      '@types/supercluster': 7.1.1
+      earcut: 2.2.4
+      geojson-vt: 3.2.1
+      gl-matrix: 3.4.3
+      global-prefix: 3.0.0
+      kdbush: 4.0.2
+      murmurhash-js: 1.0.0
+      pbf: 3.2.1
+      potpack: 2.0.0
+      quickselect: 2.0.0
+      supercluster: 8.0.1
+      tinyqueue: 2.0.3
+      vt-pbf: 3.1.3
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
@@ -1140,7 +1361,10 @@ packages:
 
   /[email protected]:
     resolution: {integrity: sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==}
-    dev: true
+
+  /[email protected]:
+    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
+    dev: false
 
   /[email protected]:
     resolution: {integrity: sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==}
@@ -1163,6 +1387,10 @@ packages:
     resolution: {integrity: sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-TvmkNhkv8yct0SVBSy+o8wYzXjE4Zz3PCesbfs8HiCXXdcTuocApFv11UWlNFWKYsP2okqrhb7JNlSm9InBhIw==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -1218,6 +1446,14 @@ packages:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-ClrV7pNOn7rtmoQVF4TS1vyU0WhYRnP92fzbfF75jAIwpnzdJXf8iTd4CMEqO4yUenH6NDqLiwjqlh6QgZzgLQ==}
+    hasBin: true
+    dependencies:
+      ieee754: 1.2.1
+      resolve-protobuf-schema: 2.1.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==}
     dev: true
@@ -1311,6 +1547,10 @@ packages:
       source-map-js: 1.0.2
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-Q+/tYsFU9r7xoOJ+y/ZTtdVQwTWfzjbiXBDMM/JKUux3+QPP02iUuIoeBQ+Ot6oEDlC+/PGjB/5A3K7KKb7hcw==}
+    dev: false
+
   /[email protected]([email protected])([email protected]):
     resolution: {integrity: sha512-3doBi5NO4IVgaNPtwewvrgPpqAcvNv0NwJNflr76PIGgi9nf1oguQV1Hpdm9TI2ALIQVn/9iIwLpBO5UcD2Jiw==}
     peerDependencies:
@@ -1327,6 +1567,10 @@ packages:
     hasBin: true
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-TdDRD+/QNdrCGCE7v8340QyuXd4kIWIgapsE2+n/SaGiSSbomYl4TjHlvIoCWRpE7wFt02EpB35VVA2ImcBVqw==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-ModRIiW6oUnsP18QzrRYZSc/CFKFKIdj7pUs57AEVH20ajlglRpN3HukjHk0UbNMTlKGuaYl7Gt6/O5Gg2NU2Q==}
     dependencies:
@@ -1363,6 +1607,10 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
     dependencies:
@@ -1376,6 +1624,12 @@ packages:
       picomatch: 2.3.1
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-kI5ffTiZWmJaS/huM8wZfEMer1eRd7oJQhDuxeCLe3t7N7mX3z94CN0xPxBQxFYQTSNz9T0i+v6inKqSdK8xrQ==}
+    dependencies:
+      protocol-buffers-schema: 3.6.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==}
     hasBin: true
@@ -1427,6 +1681,10 @@ packages:
       queue-microtask: 1.2.3
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-PdhdWy89SiZogBLaw42zdeqtRJ//zFd2PgQavcICDUgJT5oW10QCRKbJ6bg4r0/UY2M6BWd5tkxuGFRvCkgfHQ==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-xal3CZX1Xlo/k4ApwCFrHVACi9fBqJ7V+mwhBsuf/1IOKbBy098Fex+Wa/5QMubw09pSZ/u8EY8PWgevJsXp1A==}
     engines: {node: '>=6'}
@@ -1452,6 +1710,16 @@ packages:
     resolution: {integrity: sha512-1jeBGaKNGdEq4FgIrORu/N570dwoPYio8lSoYLWmX7sQ//0JY08Xh9o5pBcgmHQ/MbsYp/aZnOe1s1lIsbLprQ==}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-JxHc1weCN68wRY0fhCoXpyK55m/XPHafOmK4UWD7m2CI14GMcFypt4w/0+NV5f/ZMby2F6S2wwA7fgynh9gWSw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 2.0.1
+      is-extendable: 0.1.1
+      is-plain-object: 2.0.4
+      split-string: 3.1.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-SFTs87RfXVulKrhhP6B5/qcFruOKQZaKf6jY9V4PJ7NOG0qIlQP6XL4pQq5xagsuP/Wd55S7tUBJpRajEsDUEQ==}
     dev: true
@@ -1483,6 +1751,28 @@ packages:
       sourcemap-codec: 1.4.8
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-umMGhjPeHAI6YjABoSTrFp2zaBtXBej1a0yKkuMUyjjqu6FJsTF+JYwCswWDg+zJfk/5npWUUbd33HH/WLzpaA==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-NqZqyvL4VPW+RAxxXnB8gvE1kyikh8+pR+T+CXLksVRN9eiQqkQlPwqWYU0mF9Jm7UnctShlxLyAt1CaBOTL1w==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-nK7WOY8jik6zaG9CRwZTaD5O7ETWDLZYMM12pqY8htll+7dYeqGfEUPcUBHOpSJg2vJOrvFIY2Dl5cX2ih1hAQ==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      bytewise: 1.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      sort-asc: 0.2.0
+      sort-desc: 0.2.0
+      union-value: 1.0.1
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==}
     engines: {node: '>=0.10.0'}
@@ -1493,6 +1783,13 @@ packages:
     deprecated: Please use @jridgewell/sourcemap-codec instead
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-NzNVhJDYpwceVVii8/Hu6DKfD2G+NrQHlS/V/qgv763EYudVwEcMQNxd2lh+0VrUByXN/oJkl5grOhYWvQUYiw==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      extend-shallow: 3.0.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==}
     engines: {node: '>=10.0.0'}
@@ -1505,6 +1802,12 @@ packages:
       min-indent: 1.0.1
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-IiOea5kJ9iqzD2t7QJq/cREyLHTtSmUT6gQsweojg9WH2sYJqZK9SswTu6jrscO6D1G5v5vYZ9ru/eq85lXeZQ==}
+    dependencies:
+      kdbush: 4.0.2
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
@@ -1657,6 +1960,10 @@ packages:
       globrex: 0.1.2
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-ppJZNDuKGgxzkHihX8v9v9G5f+18gzaTfrukGrq6ueg0lmH4nqVnA2IPG0AEH3jKEk2GRJCUhDoqpoiw3PHLBA==}
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==}
     engines: {node: '>=8.0'}
@@ -1669,6 +1976,16 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-2SCC/WLzj2SbUwzFOzqMCkz5amXLlxtJqDKTICqg30x+2DZxcfZN2MvQZmGfXWKNWaKK9pBPsvkcwv8bF/gxKg==}
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-aXofE06xGhaQSPzt8hlTY+/YWQhm9P0jYUp1f2XtmW/3Bk0qzXcyFWAtPoo2uTGQj1ZwbDuSyuxicq+aDo8lCQ==}
+    dependencies:
+      typewise-core: 1.2.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-HOjK8l6a57b2ZGXOcUsI5NLfoTrfmbOl90ixJDl0AEFG4wgHNDQxtZy15/ZQp7HhjkpaGlp/eneMgtsu1dIlUA==}
     engines: {node: '>=12.18'}
@@ -1676,6 +1993,16 @@ packages:
       busboy: 1.6.0
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-tJfXmxMeWYnczCVs7XAEvIV7ieppALdyepWMkHkwciRpZraG/xwT+s2JN8+pr1+8jCRf80FFzvr+MpQeeoF4Xg==}
+    engines: {node: '>=0.10.0'}
+    dependencies:
+      arr-union: 3.1.0
+      get-value: 2.0.6
+      is-extendable: 0.1.1
+      set-value: 2.0.1
+    dev: false
+
   /[email protected]([email protected]):
     resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
     hasBin: true
@@ -1746,6 +2073,21 @@ packages:
       vite: 4.2.1
     dev: true
 
+  /[email protected]:
+    resolution: {integrity: sha512-2LzDFzt0mZKZ9IpVF2r69G9bXaP2Q2sArJCmcCgvfTdCCZzSyz4aCLoQyUilu37Ll56tCblIZrXFIjNUpGIlmA==}
+    dependencies:
+      '@mapbox/point-geometry': 0.1.0
+      '@mapbox/vector-tile': 1.3.1
+      pbf: 3.2.1
+    dev: false
+
+  /[email protected]:
+    resolution: {integrity: sha512-HxJdYWq1MTIQbJ3nw0cqssHoTNU267KlrDuGZ1WYlxDStUtKUhOaJmh112/TZmHxxUfuJqPXSOm7tDyas0OSIQ==}
+    hasBin: true
+    dependencies:
+      isexe: 2.0.0
+    dev: false
+
   /[email protected]:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
     dev: true
diff --git a/src/components/LocationsMap.svelte b/src/components/LocationsMap.svelte
index 76523006..c4facf21 100644
--- a/src/components/LocationsMap.svelte
+++ b/src/components/LocationsMap.svelte
@@ -1,230 +1,133 @@
 <script>
-	export let locations;
-
 	import { onMount, onDestroy } from 'svelte';
 	import { browser } from '$app/environment';
-
 	import html2canvas from 'html2canvas';
 
-	function captureHighResMap(mapElement, scale = 2) {
-		// Backup original size
-		let originalWidth = mapElement.offsetWidth;
-		let originalHeight = mapElement.offsetHeight;
+	import 'maplibre-gl/dist/maplibre-gl.css';
 
-		// Scale the map element
-		mapElement.style.transform = `scale(${scale})`;
-		mapElement.style.transformOrigin = 'top left';
-		mapElement.style.width = originalWidth * scale + 'px';
-		mapElement.style.height = originalHeight * scale + 'px';
+	export let locations;
+	let map;
+	let mapContainer;
+	let markers = [];
 
-		return html2canvas(mapElement, {
-			width: originalWidth * scale,
-			height: originalHeight * scale,
-			scale: scale
-		}).then((canvas) => {
-			// Restore the original size
-			mapElement.style.transform = '';
-			mapElement.style.width = originalWidth + 'px';
-			mapElement.style.height = originalHeight + 'px';
+	let checkAddress = (location) => {
+		if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) {
+			return `${
+				location['addr:housenumber'] + ' ' + location['addr:street'] + ', ' + location['addr:city']
+			}`;
+		} else if (location['addr:street'] && location['addr:city']) {
+			return `${location['addr:street'] + ', ' + location['addr:city']}`;
+		} else if (location['addr:city']) {
+			return `${location['addr:city']}`;
+		} else {
+			return '';
+		}
+	};
 
-			return canvas;
-		});
-	}
+	function updateLabelVisibility() {
+		if (!map) return;
+		let zoom = map.getZoom();
+		let bounds = map.getBounds();
 
-	let mapElement;
-	let map;
+		for (let marker of markers) {
+			let isInView = bounds.contains(marker.getLngLat());
+			let popup = marker.getPopup();
+			let { tags } = marker;
 
-	function updateLabelVisibility() {
-		const zoom = map.getZoom();
-		map.eachLayer((layer) => {
-			if (layer.getTooltip) {
-				const tooltip = layer.getTooltip();
-				if (tooltip) {
-					if (zoom > 14) {
-						// Show labels at zoom levels greater than 14
-						tooltip.setOpacity(1.0);
-					} else {
-						tooltip.setOpacity(0.0);
-					}
-				}
+			if (zoom > 13 && isInView) {
+				popup.setHTML(`<span class='block font-bold'>${tags.name}</span>`).addTo(map);
+			} else {
+        popup.remove();
+				popup.setHTML(html(tags));
 			}
-		});
+		}
 	}
 
-	onMount(async () => {
-		if (browser) {
-			const L = await import('leaflet');
-
-			map = L.map(mapElement, {
-				zoomSnap: 0,
-				attributionControl: false
-			}).setView([49.26, -123.05], 12);
-
-			const myCustomColour = '#F7931A';
-
-			const markerHtmlStyles = `
-			  background-color: ${myCustomColour};
-			  width: 1.2rem;
-			  height: 1.2rem;
-			  display: block;
-			  position: relative;
-        border-radius: 100% 100% 0;
-			  transform: rotate(45deg);
-        opacity: 0.9;
-			  border: 1px solid #666`;
-
-			const icon = L.divIcon({
-				className: 'my-custom-pin',
-				iconAnchor: [0, 24],
-				labelAnchor: [-6, 0],
-				popupAnchor: [0, -36],
-				html: `<span style="${markerHtmlStyles}" />`
-			});
-
-			locations = locations.filter(
-				(location) =>
-					location['osm_json'].tags &&
-					location['osm_json'].tags['payment:coinos'] === 'yes' &&
-					location['osm_json'].lat &&
-					location['osm_json'].lon
-			);
-
-			L.tileLayer('https://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {
-				maxZoom: 18,
-				subdomains: ['a', 'b', 'c', 'd']
-			}).addTo(map);
+	let html = (tags) => `${
+		tags && tags.name ? `<span class='block font-bold'>${tags.name}</span>` : ''
+	}
 
-			const checkAddress = (location) => {
-				if (location['addr:housenumber'] && location['addr:street'] && location['addr:city']) {
-					return `${
-						location['addr:housenumber'] +
-						' ' +
-						location['addr:street'] +
-						', ' +
-						location['addr:city']
-					}`;
-				} else if (location['addr:street'] && location['addr:city']) {
-					return `${location['addr:street'] + ', ' + location['addr:city']}`;
-				} else if (location['addr:city']) {
-					return `${location['addr:city']}`;
-				} else {
-					return '';
-				}
-			};
+  <span class='block'>${tags && checkAddress(tags)}</span>
 
-			locations.forEach((location) => {
-				if (location['deleted_at']) return;
+  ${tags && tags.phone ? `<a href='tel:${tags.phone}' class='block'>${tags.phone}</a>` : ''}
 
-				location = location['osm_json'];
-				let marker = L.marker([location.lat, location.lon], { icon });
+  ${
+		tags && tags.website
+			? `<a href=${tags.website} target="_blank" rel="noreferrer" class='block text-blue-400'>${tags.website}</a>`
+			: ''
+	}`;
 
-				if (location.tags && location.tags.name) {
-					marker.bindTooltip(location.tags.name, { permanent: true }).openTooltip();
-				}
+	onMount(() => {
+		if (browser) {
+			import('maplibre-gl').then(({ default: maplibre }) => {
+				map = new maplibre.Map({
+					container: mapContainer,
+					style: 'https://tiles.stadiamaps.com/styles/stamen_toner.json',
+					center: [-123.05, 49.26],
+					zoom: 10.5
+				});
 
-				marker.bindPopup(
-					`${
-						location.tags && location.tags.name
-							? `<span class='block'>${location.tags.name}</span>`
-							: ''
-					}
+				map.on('load', () => {
+					locations.forEach((location) => {
+						if (location['deleted_at']) return;
 
-          <span class='block'>${location.tags && checkAddress(location.tags)}</span>
+						let { lat, lon, tags } = location['osm_json'];
 
-          ${
-						location.tags && location.tags.phone
-							? `<a href='tel:${location.tags.phone}' class='block'>${location.tags.phone}</a>`
-							: ''
-					}
+						let element = document.createElement('div');
+						element.className = 'marker';
 
-          ${
-						location.tags && location.tags.website
-							? `<a href=${location.tags.website} target="_blank" rel="noreferrer" class='block'>${location.tags.website}</a>`
-							: ''
-					}
+						let marker = new maplibre.Marker({ color: '#F7931A' })
+							.setLngLat([lon, lat])
+							.setPopup(new maplibre.Popup().setHTML(html(tags)))
+							.addTo(map);
 
-					${
-						location.tags && location.tags['contact:twitter']
-							? `<a href=${
-									location.tags['contact:twitter'].startsWith('http')
-										? location.tags['contact:twitter']
-										: `https://twitter.com/${location.tags['contact:twitter']}`
-							  } target="_blank" rel="noreferrer" class='block'>TWT: ${
-									location.tags['contact:twitter']
-							  }</a>`
-							: ''
-					}
+						marker.getElement().addEventListener('click', () => {
+              let h = html(marker.tags);
+							let popup = marker.getPopup();
+              popup.setHTML(h);
+						});
 
-	        ${
-						location.tags && location.tags['contact:instagram']
-							? `<a href=${
-									location.tags['contact:instagram'].startsWith('http')
-										? location.tags['contact:instagram']
-										: `https://instagram.com/${location.tags['contact:instagram']}`
-							  } target="_blank" rel="noreferrer" class='block'>IG: ${
-									location.tags['contact:instagram']
-							  }</a>`
-							: ''
-					}
+						marker.tags = tags;
 
-	        ${
-						location.tags && location.tags['contact:facebook']
-							? `<a href=${
-									location.tags['contact:facebook'].startsWith('http')
-										? location.tags['contact:facebook']
-										: `https://facebook.com/${location.tags['contact:facebook']}`
-							  } target="_blank" rel="noreferrer" class='block'>FB: ${
-									location.tags['contact:facebook']
-							  }</a>`
-							: ''
-					}
+						markers.push(marker);
+					});
 
-	        ${
-						location.tags && location.tags['contact:linkedin']
-							? `<a href=${
-									location.tags['contact:linkedin'].startsWith('http')
-										? location.tags['contact:linkedin']
-										: `https://linkedin.com/${location.tags['contact:linkedin']}`
-							  } target="_blank" rel="noreferrer" class='block'>LI: ${
-									location.tags['contact:linkedin']
-							  }</a>`
-							: ''
-					}`
-				);
-				marker.addTo(map);
+					updateLabelVisibility();
+					map.on('moveend', updateLabelVisibility);
+					map.on('zoomend', updateLabelVisibility);
+				});
 			});
-
-			updateLabelVisibility();
-			map.on('zoomend', updateLabelVisibility);
-			// map.fitBounds(locations.map(({ osm_json: { lat, lon } }) => [lat, lon]));
 		}
 	});
 
-	onDestroy(async () => {
-    if (map) {
-      map.off('zoomend', updateLabelVisibility);
-      map.remove();
-    } 
+	onDestroy(() => {
+		if (map) {
+			map.off('moveend', updateLabelVisibility);
+			map.off('zoomend', updateLabelVisibility);
+			map.remove();
+		}
 	});
 </script>
 
 <div class="container mx-auto max-w-4xl">
 	<div class="flex w-full">
-		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapElement} />
+		<div class="mx-auto h-[550px] w-full z-0" bind:this={mapContainer} />
 	</div>
 </div>
 
 <style>
-	@import 'leaflet/dist/leaflet.css';
+	:global(.maplibregl-popup-close-button) {
+		font-size: 18px;
+		padding: 8px;
+	}
 
-	:global(.leaflet-tooltip) {
-		border: none;
+	:global(.maplibregl-popup-content) {
+		padding: 0.5em 1em;
+		border: 1px solid black;
 		border-radius: 4px;
-		font-size: 12px;
-		font-weight: bolder;
+		font-size: 14px;
 		color: black;
-		background-color: rgba(255, 255, 255, 0.9);
-    left: 1.3rem;
-    top: -1rem;
+		background-color: white;
+		overflow: hidden;
 	}
 </style>