dots

lightning/package.json

@@ -7,22 +7,24 @@
     },
     "type": "module",
     "devDependencies": {
-        "@types/node": "^18.11.18",
+        "@types/node": "^18.15.11",
         "esbuild": "^0.14.54",
         "postcss": "^8.4.21",
-        "solid-start-node": "^0.2.19",
+        "solid-start-node": "^0.2.26",
-        "typescript": "^4.9.4",
+        "typescript": "^4.9.5",
-        "vite": "^4.1.4"
+        "vite": "^4.2.1"
     },
     "dependencies": {
-        "@solidjs/meta": "^0.28.2",
+        "@deck.gl/core": "^8.9.7",
+        "@deck.gl/layers": "^8.9.7",
+        "@solidjs/meta": "^0.28.4",
         "@solidjs/router": "^0.8.2",
-        "mapbox-gl": "npm:empty-npm-package@1.0.0",
+        "mapbox-gl": "npm:empty-npm-package@^1.0.0",
         "maplibre-gl": "^2.4.0",
-        "solid-js": "^1.7.2",
+        "solid-js": "^1.7.3",
         "solid-map-gl": "^1.7.2",
         "solid-start": "^0.2.26",
-        "undici": "^5.15.1"
+        "undici": "^5.21.2"
     },
     "engines": {
         "node": ">=16.8"

lightning/pnpm-lock.yaml

@@ -1,20 +1,26 @@
 lockfileVersion: '6.0'
 
 dependencies:
+  '@deck.gl/core':
+    specifier: ^8.9.7
+    version: 8.9.7
+  '@deck.gl/layers':
+    specifier: ^8.9.7
+    version: 8.9.7(@deck.gl/core@8.9.7)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19)
   '@solidjs/meta':
-    specifier: ^0.28.2
+    specifier: ^0.28.4
     version: 0.28.4(solid-js@1.7.3)
   '@solidjs/router':
     specifier: ^0.8.2
     version: 0.8.2(solid-js@1.7.3)
   mapbox-gl:
-    specifier: npm:empty-npm-package@1.0.0
+    specifier: npm:empty-npm-package@^1.0.0
     version: /empty-npm-package@1.0.0
   maplibre-gl:
     specifier: ^2.4.0
     version: 2.4.0
   solid-js:
-    specifier: ^1.7.2
+    specifier: ^1.7.3
     version: 1.7.3
   solid-map-gl:
     specifier: ^1.7.2
@@ -23,12 +29,12 @@ dependencies:
     specifier: ^0.2.26
     version: 0.2.26(@solidjs/meta@0.28.4)(@solidjs/router@0.8.2)(solid-js@1.7.3)(solid-start-node@0.2.26)(vite@4.2.1)
   undici:
-    specifier: ^5.15.1
+    specifier: ^5.21.2
     version: 5.21.2
 
 devDependencies:
   '@types/node':
-    specifier: ^18.11.18
+    specifier: ^18.15.11
     version: 18.15.11
   esbuild:
     specifier: ^0.14.54
@@ -37,13 +43,13 @@ devDependencies:
     specifier: ^8.4.21
     version: 8.4.21
   solid-start-node:
-    specifier: ^0.2.19
+    specifier: ^0.2.26
     version: 0.2.26(solid-start@0.2.26)(undici@5.21.2)(vite@4.2.1)
   typescript:
-    specifier: ^4.9.4
+    specifier: ^4.9.5
     version: 4.9.5
   vite:
-    specifier: ^4.1.4
+    specifier: ^4.2.1
     version: 4.2.1(@types/node@18.15.11)
 
 packages:
@@ -1155,6 +1161,45 @@ packages:
       '@babel/helper-validator-identifier': 7.19.1
       to-fast-properties: 2.0.0
 
+  /@deck.gl/core@8.9.7:
+    resolution: {integrity: sha512-khcOrlee8yD84VTYvxaZrWmUaOFKkrOhHk7hVupqBr7erzsHBWj3/RWJqlfwCCN8a8YbhZOcfpSOSSbAau0OIA==}
+    dependencies:
+      '@loaders.gl/core': 3.3.3
+      '@loaders.gl/images': 3.3.3
+      '@luma.gl/constants': 8.5.19
+      '@luma.gl/core': 8.5.19
+      '@luma.gl/webgl': 8.5.19
+      '@math.gl/core': 3.6.3
+      '@math.gl/sun': 3.6.3
+      '@math.gl/web-mercator': 3.6.3
+      '@probe.gl/env': 3.6.0
+      '@probe.gl/log': 3.6.0
+      '@probe.gl/stats': 3.6.0
+      gl-matrix: 3.4.3
+      math.gl: 3.6.3
+      mjolnir.js: 2.7.1
+    dev: false
+
+  /@deck.gl/layers@8.9.7(@deck.gl/core@8.9.7)(@loaders.gl/core@3.3.3)(@luma.gl/core@8.5.19):
+    resolution: {integrity: sha512-D4k1aDzTcXTBuYrM/cE3fqHhS6XPpT6XANOuc1i47sAEnOUjLqsreo4QyY5x5apFn00dkllnWLZfzLURm5liXg==}
+    peerDependencies:
+      '@deck.gl/core': ^8.0.0
+      '@loaders.gl/core': ^3.0.0
+      '@luma.gl/core': ^8.0.0
+    dependencies:
+      '@deck.gl/core': 8.9.7
+      '@loaders.gl/core': 3.3.3
+      '@loaders.gl/images': 3.3.3
+      '@loaders.gl/schema': 3.3.3
+      '@luma.gl/constants': 8.5.19
+      '@luma.gl/core': 8.5.19
+      '@mapbox/tiny-sdf': 2.0.6
+      '@math.gl/core': 3.6.3
+      '@math.gl/polygon': 3.6.3
+      '@math.gl/web-mercator': 3.6.3
+      earcut: 2.2.4
+    dev: false
+
   /@esbuild/android-arm64@0.17.16:
     resolution: {integrity: sha512-QX48qmsEZW+gcHgTmAj+x21mwTz8MlYQBnzF6861cNdQGvj2jzzFjqH0EBabrIa/WVZ2CHolwMoqxVryqKt8+Q==}
     engines: {node: '>=12'}
@@ -1382,6 +1427,97 @@ packages:
       '@jridgewell/resolve-uri': 3.1.0
       '@jridgewell/sourcemap-codec': 1.4.14
 
+  /@loaders.gl/core@3.3.3:
+    resolution: {integrity: sha512-kModKGZ3V1AYue8eQxM9H19PZQt9HxtVJUvAMmOeFiXZmhIiEO8gf5+c7Ph6C/+whPff8cRbMd06P93PJD5PlA==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@loaders.gl/loader-utils': 3.3.3
+      '@loaders.gl/worker-utils': 3.3.3
+      '@probe.gl/log': 3.6.0
+    dev: false
+
+  /@loaders.gl/images@3.3.3:
+    resolution: {integrity: sha512-IFRs3TuqaBI4crY9x3BhD+FbayiwQww7zH4PUs3vpMRQYVf593+wngW1rMbl7zgNnkFbudzxaTr8MW8VaWriCA==}
+    dependencies:
+      '@loaders.gl/loader-utils': 3.3.3
+    dev: false
+
+  /@loaders.gl/loader-utils@3.3.3:
+    resolution: {integrity: sha512-QHwc8dw5kn2KyoEQGqPvmuHRSEo+UeKOgUFwRM7FjNgkFySr+Wc1HMCCPH+VBCvdzGp0aIH+WWQB1Ug2yaQZeg==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@loaders.gl/worker-utils': 3.3.3
+      '@probe.gl/stats': 3.6.0
+    dev: false
+
+  /@loaders.gl/schema@3.3.3:
+    resolution: {integrity: sha512-l06pdG9pn2SABUgFm7N1JmfddU7KlBvGaxXlLbPhun+02Z0m2ExASHy0mEU7DVsdbfsbCyYDYqxuvn1O7yHX+A==}
+    dependencies:
+      '@types/geojson': 7946.0.10
+    dev: false
+
+  /@loaders.gl/worker-utils@3.3.3:
+    resolution: {integrity: sha512-mTQqbuAtFCgR2yu//7Rrt9pwhnDh0H2t69vOJ65Eh2YA0q4c58Kqd+260WxoPps3A0aiYNyA2099AHze7fI+Jg==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: false
+
+  /@luma.gl/constants@8.5.19:
+    resolution: {integrity: sha512-TNbONy1CQXCZ5+VOAiLh6G9wvvSwMgZxJJtbubhCgkHeR7Up+iTql6gaOF5qIX0SuQbltp7jvB5U5uEml2zUKg==}
+    dev: false
+
+  /@luma.gl/core@8.5.19:
+    resolution: {integrity: sha512-AfJNOrj4rEb/CJObxPUi8Ywe3z4sHzBkndRTWd01te4x7i9/0wjN/iuMMEyr/2OyHTMr/iMbh7ePwisExYhRQw==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@luma.gl/constants': 8.5.19
+      '@luma.gl/engine': 8.5.19
+      '@luma.gl/gltools': 8.5.19
+      '@luma.gl/shadertools': 8.5.19
+      '@luma.gl/webgl': 8.5.19
+    dev: false
+
+  /@luma.gl/engine@8.5.19:
+    resolution: {integrity: sha512-QlyTUTKcrRZ8qclloH9dldGeBN7SY8qPwtt7g6bTrsRMWQjdAQVfGtjJUkqxV2qIEEOSIdU07t5xFYCEES2M/w==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@luma.gl/constants': 8.5.19
+      '@luma.gl/gltools': 8.5.19
+      '@luma.gl/shadertools': 8.5.19
+      '@luma.gl/webgl': 8.5.19
+      '@math.gl/core': 3.6.3
+      '@probe.gl/env': 3.6.0
+      '@probe.gl/stats': 3.6.0
+      '@types/offscreencanvas': 2019.7.0
+    dev: false
+
+  /@luma.gl/gltools@8.5.19:
+    resolution: {integrity: sha512-ZeoJntgvkhf3kP88EqvwKkkQhc76ozY1iu6etyVoBv0GwXJQ6z9IF3jH+iTlOq3VW0jGb5u7RaRLh6aTowSwHQ==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@luma.gl/constants': 8.5.19
+      '@probe.gl/env': 3.6.0
+      '@probe.gl/log': 3.6.0
+      '@types/offscreencanvas': 2019.7.0
+    dev: false
+
+  /@luma.gl/shadertools@8.5.19:
+    resolution: {integrity: sha512-Jn/gCAagMA9Rl4/AtKrdghRwWT8dCO2XBGI+WE5HPZPP2anTzN7DgDxUwKf+vEH8fFNOsr+jLdUXubIrRU3vTw==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@math.gl/core': 3.6.3
+    dev: false
+
+  /@luma.gl/webgl@8.5.19:
+    resolution: {integrity: sha512-WzLYAujxYKpBN9fXgxeAR4Ww4+p9Z+bMNGZe4Ya8glWDVWimDuAEPtM9AkJrQ36c5RHEQLOQdsAIrsEzN7teIg==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@luma.gl/constants': 8.5.19
+      '@luma.gl/gltools': 8.5.19
+      '@probe.gl/env': 3.6.0
+      '@probe.gl/stats': 3.6.0
+    dev: false
+
   /@mapbox/geojson-rewind@0.5.2:
     resolution: {integrity: sha512-tJaT+RbYGJYStt7wI3cq4Nl4SXxG8W7JDG5DMJu97V25RnbNg3QtQtf+KD+VLjNpWKYsRvXDNmNrBgEETr1ifA==}
     hasBin: true
@@ -1422,6 +1558,37 @@ packages:
     engines: {node: '>=6.0.0'}
     dev: false
 
+  /@math.gl/core@3.6.3:
+    resolution: {integrity: sha512-jBABmDkj5uuuE0dTDmwwss7Cup5ZwQ6Qb7h1pgvtkEutTrhkcv8SuItQNXmF45494yIHeoGue08NlyeY6wxq2A==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@math.gl/types': 3.6.3
+      gl-matrix: 3.4.3
+    dev: false
+
+  /@math.gl/polygon@3.6.3:
+    resolution: {integrity: sha512-FivQ1ZnYcAss1wVifOkHP/ZnlfQy1IL/769uzNtiHxwUbW0kZG3yyOZ9I7fwyzR5Hvqt3ErJKHjSYZr0uVlz5g==}
+    dependencies:
+      '@math.gl/core': 3.6.3
+    dev: false
+
+  /@math.gl/sun@3.6.3:
+    resolution: {integrity: sha512-mrx6CGYYeTNSQttvcw0KVUy+35YDmnjMqpO/o0t06Vcghrt0HNruB/ScRgUSbJrgkbOg1Vcqm23HBd++clzQzw==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: false
+
+  /@math.gl/types@3.6.3:
+    resolution: {integrity: sha512-3uWLVXHY3jQxsXCr/UCNPSc2BG0hNUljhmOBt9l+lNFDp7zHgm0cK2Tw4kj2XfkJy4TgwZTBGwRDQgWEbLbdTA==}
+    dev: false
+
+  /@math.gl/web-mercator@3.6.3:
+    resolution: {integrity: sha512-UVrkSOs02YLehKaehrxhAejYMurehIHPfFQvPFZmdJHglHOU4V2cCUApTVEwOksvCp161ypEqVp+9H6mGhTTcw==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      gl-matrix: 3.4.3
+    dev: false
+
   /@nodelib/fs.scandir@2.1.5:
     resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==}
     engines: {node: '>= 8'}
@@ -1443,6 +1610,25 @@ packages:
   /@polka/url@1.0.0-next.21:
     resolution: {integrity: sha512-a5Sab1C4/icpTZVzZc5Ghpz88yQtGOyNqYXcZgOssB2uuAr+wF/MvN6bgtW32q7HHrvBki+BsZ0OuNv6EV3K9g==}
 
+  /@probe.gl/env@3.6.0:
+    resolution: {integrity: sha512-4tTZYUg/8BICC3Yyb9rOeoKeijKbZHRXBEKObrfPmX4sQmYB15ZOUpoVBhAyJkOYVAM8EkPci6Uw5dLCwx2BEQ==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: false
+
+  /@probe.gl/log@3.6.0:
+    resolution: {integrity: sha512-hjpyenpEvOdowgZ1qMeCJxfRD4JkKdlXz0RC14m42Un62NtOT+GpWyKA4LssT0+xyLULCByRAtG2fzZorpIAcA==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+      '@probe.gl/env': 3.6.0
+    dev: false
+
+  /@probe.gl/stats@3.6.0:
+    resolution: {integrity: sha512-JdALQXB44OP4kUBN/UrQgzbJe4qokbVF4Y8lkIA8iVCFnjVowWIgkD/z/0QO65yELT54tTrtepw1jScjKB+rhQ==}
+    dependencies:
+      '@babel/runtime': 7.21.0
+    dev: false
+
   /@rollup/plugin-commonjs@24.1.0(rollup@3.20.2):
     resolution: {integrity: sha512-eSL45hjhCWI0jCCXcNtLVqM5N1JlBGvlFfY0m6oOYnLCJ6N0qEXoZql4sY2MOUArzhH4SA/qBpTxvvZp2Sc+DQ==}
     engines: {node: '>=14.0.0'}
@@ -1563,6 +1749,10 @@ packages:
     resolution: {integrity: sha512-Nmh0K3iWQJzniTuPRcJn5hxXkfB1T1pgB89SBig5PlJQU5yocazeu4jATJlaA0GYFKWMqDdvYemoSnF2pXgLVA==}
     dev: false
 
+  /@types/hammerjs@2.0.41:
+    resolution: {integrity: sha512-ewXv/ceBaJprikMcxCmWU1FKyMAQ2X7a9Gtmzw8fcg2kIePI1crERDM818W+XYrxqdBBOdlf2rm137bU+BltCA==}
+    dev: false
+
   /@types/mapbox__point-geometry@0.1.2:
     resolution: {integrity: sha512-D0lgCq+3VWV85ey1MZVkE8ZveyuvW5VAfuahVTQRpXFQTxw03SuIf1/K4UQ87MMIXVKzpFjXFiFMZzLj2kU+iA==}
     dev: false
@@ -1578,6 +1768,10 @@ packages:
   /@types/node@18.15.11:
     resolution: {integrity: sha512-E5Kwq2n4SbMzQOn6wnmBjuK9ouqlURrcZDVfbo9ftDDTFt3nk7ZKK4GMOzoYgnpQJKcxwQw+lGaBvvlMo0qN/Q==}
 
+  /@types/offscreencanvas@2019.7.0:
+    resolution: {integrity: sha512-PGcyveRIpL1XIqK8eBsmRBt76eFgtzuPiSTyKHZxnGemp2yzGzWpjYKAfK3wIMiU7eH+851yEpiuP8JZerTmWg==}
+    dev: false
+
   /@types/pbf@3.0.2:
     resolution: {integrity: sha512-EDrLIPaPXOZqDjrkzxxbX7UlJSeQVgah3i0aA4pOSzmK9zq3BIh7/MZIQxED7slJByvKM4Gc6Hypyu2lJzh3SQ==}
     dev: false
@@ -1706,7 +1900,7 @@ packages:
       caniuse-lite: 1.0.30001478
       electron-to-chromium: 1.4.365
       node-releases: 2.0.10
-      update-browserslist-db: 1.0.10(browserslist@4.21.5)
+      update-browserslist-db: 1.0.11(browserslist@4.21.5)
 
   /buffer-from@1.1.2:
     resolution: {integrity: sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==}
@@ -2282,6 +2476,11 @@ packages:
   /graceful-fs@4.2.11:
     resolution: {integrity: sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==}
 
+  /hammerjs@2.0.8:
+    resolution: {integrity: sha512-tSQXBXS/MWQOn/RKckawJ61vvsDpCom87JgxiYdGwHdOa0ht0vzUWDlfioofFCRU0L+6NGDt6XzbgoJvZkMeRQ==}
+    engines: {node: '>=0.8.0'}
+    dev: false
+
   /has-flag@3.0.0:
     resolution: {integrity: sha512-sKJf1+ceQBr4SMkvQnBDNDtf4TXpVhVGateu0t918bl30FnbE2m4vNLX+VWe/dpjlb+HugGYzW7uQXH98HPEYw==}
     engines: {node: '>=4'}
@@ -2463,6 +2662,12 @@ packages:
       vt-pbf: 3.1.3
     dev: false
 
+  /math.gl@3.6.3:
+    resolution: {integrity: sha512-Yq9CyECvSDox9+5ETi2+x1bGTY5WvGUGL3rJfC4KPoCZAM51MGfrCm6rIn4yOJUVfMPs2a5RwMD+yGS/n1g3gg==}
+    dependencies:
+      '@math.gl/core': 3.6.3
+    dev: false
+
   /merge-anything@5.1.4:
     resolution: {integrity: sha512-7PWKwGOs5WWcpw+/OvbiFiAvEP6bv/QHiicigpqMGKIqPPAtGhBLR8LFJW+Zu6m9TXiR/a8+AiPlGG0ko1ruoQ==}
     engines: {node: '>=12.13'}
@@ -2499,6 +2704,14 @@ packages:
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
 
+  /mjolnir.js@2.7.1:
+    resolution: {integrity: sha512-72BeUWgTv2cj5aZQKpwL8caNUFhXZ9bDm1hxpNj70XJQ62IBnTZmtv/WPxJvtaVNhzNo+D2U8O6ryNI0zImYcw==}
+    engines: {node: '>= 4', npm: '>= 3'}
+    dependencies:
+      '@types/hammerjs': 2.0.41
+      hammerjs: 2.0.8
+    dev: false
+
   /mri@1.2.0:
     resolution: {integrity: sha512-tzzskb3bG8LvYGFF/mDTpq3jpI6Q9wc3LEmBaghu+DdCssd1FakN7Bc0hVNmEyGq1bq3RgfkCb3cmQLpNPOroA==}
     engines: {node: '>=4'}
@@ -2863,7 +3076,7 @@ packages:
       terser: 5.16.9
       undici: 5.21.2
       vite: 4.2.1(@types/node@18.15.11)
-      vite-plugin-inspect: 0.7.21(rollup@3.20.2)(vite@4.2.1)
+      vite-plugin-inspect: 0.7.22(rollup@3.20.2)(vite@4.2.1)
       vite-plugin-solid: 2.7.0(solid-js@1.7.3)(vite@4.2.1)
       wait-on: 6.0.1(debug@4.3.4)
     transitivePeerDependencies:
@@ -3001,8 +3214,8 @@ packages:
     resolution: {integrity: sha512-pjy2bYhSsufwWlKwPc+l3cN7+wuJlK6uz0YdJEOlQDbl6jo/YlPi4mb8agUkVC8BF7V8NuzeyPNqRksA3hztKQ==}
     engines: {node: '>= 0.8'}
 
-  /update-browserslist-db@1.0.10(browserslist@4.21.5):
+  /update-browserslist-db@1.0.11(browserslist@4.21.5):
-    resolution: {integrity: sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==}
+    resolution: {integrity: sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==}
     hasBin: true
     peerDependencies:
       browserslist: '>= 4.21.0'
@@ -3022,8 +3235,8 @@ packages:
     resolution: {integrity: sha512-BNGbWLfd0eUPabhkXUVm0j8uuvREyTh5ovRa/dyow/BqAbZJyC+5fU+IzQOzmAKzYqYRAISoRhdQr3eIZ/PXqg==}
     engines: {node: '>= 0.8'}
 
-  /vite-plugin-inspect@0.7.21(rollup@3.20.2)(vite@4.2.1):
+  /vite-plugin-inspect@0.7.22(rollup@3.20.2)(vite@4.2.1):
-    resolution: {integrity: sha512-zIyTGkoj76EnDV/Hj20cYjRCtOvzab6EX2tcKy4QWe/qrW/Apxuqc2nZgv4BkTg/bXyL1/1cozlxzx7GfAh9yw==}
+    resolution: {integrity: sha512-Z4y3MPuvn//0/XcpNLwTBqjfSt+c2utIFZu8Dw+nbR2HrPoIrKHedvSuqC8mLzxOpRKRoW60HWvZUDz8J2zRIA==}
     engines: {node: '>=14'}
     peerDependencies:
       vite: ^3.1.0 || ^4.0.0

lightning/src/components/BadassMap.tsx

@@ -1,5 +1,5 @@
 import { createSignal, Show } from 'solid-js';
-import MapGL, { Viewport, Light, Camera } from 'solid-map-gl';
+import MapGL, { Viewport, Light, Camera, Source, Layer } from 'solid-map-gl';
 import * as maplibre from 'maplibre-gl';
 
 import type { JSX } from 'solid-js';
@@ -10,27 +10,45 @@ import 'maplibre-gl/dist/maplibre-gl.css';
 
 
 function BadassMap(): JSX.Element {
-    const TILES_URL: string = 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM'
+    // data stuff
+    const FANEUIL_HALL: number[] = [-71.05625, 42.36]
+    const GD_TAVERN: number[] = [-71.056922, 42.360919]
+    const FAKE_GJSON = {
+        type: 'geojson',
+        data: { "type": "FeatureCollection", "features": [
+                { "type": "Feature", "geometry": { "type": "Point", "coordinates": FANEUIL_HALL } },
+                { "type": "Feature", "geometry": { "type": "Point", "coordinates": GD_TAVERN } },
+            ],
+        }
+    };
 
+    // markers
+    const RED_DOT = {
+        type: 'circle',
+        paint: {
+            'circle-radius': 4,
+            'circle-color': 'red',
+        }
+    };
+
+    // map stuff
+    const TILES_URL: string = 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM'
     const options: MapOptions = {
         container: 'solid-map-gl will override me',
         style: TILES_URL,
         maxPitch: 85,
         antialias: true,
-    }
+    };
-
     const INITIAL_VIEW_STATE: Viewport = {
-        center: [-71.05625, 42.36],
+        center: FANEUIL_HALL,
         zoom: 15.5,
         bearing: 160,
         pitch: 60,
-
+    };
-    }
-
     const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEW_STATE);
+    const [rotate, setRotate] = createSignal<boolean>(true);
+    const toggleRotate = () => setRotate<boolean>(!rotate());
 
-    const [rotate, setRotate] = createSignal<boolean>(true)
-    const toggleRotate = () => setRotate<boolean>(!rotate())
 
     return (
         <MapGL
@@ -39,28 +57,26 @@ function BadassMap(): JSX.Element {
             viewport={viewport()}
             onViewportChange={(evt: Viewport) => setViewport(evt)}
         >
-
+            <Source source={FAKE_GJSON} >
+                <Layer style={RED_DOT} />
+            </Source>
+            <MapControls />
+            <Camera
+                rotateViewport={rotate()}
+                reverse={true}
+            />
+            <Light style={{
+                anchor: 'viewport',
+                color: 'white',
+                intensity: 0.9,
+            }} />
             <Show
                 when={rotate()}
                 fallback={<button onClick={toggleRotate}> Rotation On </button>}
             >
                 <button onClick={toggleRotate}> Rotation Off </button>
             </Show>
-
+        </MapGL >
-            <MapControls />
-
-            <Light style={{
-                anchor: 'viewport',
-                color: 'white',
-                intensity: 0.9,
-            }} />
-
-            <Camera
-                rotateViewport={rotate()}
-                reverse={true}
-            />
-
-        </MapGL>
     );
 };
 

lightning/src/root.tsx

@@ -11,9 +11,10 @@ import {
     Routes,
     Scripts,
     Title,
+    unstable_clientOnly,
 } from "solid-start";
-import BadassMap from './components/BadassMap.tsx'
 import "./root.css";
+const BadassMap = unstable_clientOnly(() => import('~/components/BadassMap'));
 
 export default function Root() {
     return (
@@ -28,7 +29,7 @@ export default function Root() {
                     <ErrorBoundary>
                         <A href="/">Map</A>
                         <A href="/about">About</A>
-                        <BadassMap />
+                        <BadassMap fallback={<div>hi</div>} />
                         <Routes>
                             <FileRoutes />
                         </Routes>