fix explosion on interaction

lightning/pnpm-lock.yaml

@@ -1912,7 +1912,7 @@ packages:
     engines: {node: ^6 || ^7 || ^8 || ^9 || ^10 || ^11 || ^12 || >=13.7}
     hasBin: true
     dependencies:
-      caniuse-lite: 1.0.30001479
+      caniuse-lite: 1.0.30001480
       electron-to-chromium: 1.4.365
       node-releases: 2.0.10
       update-browserslist-db: 1.0.11(browserslist@4.21.5)
@@ -1934,8 +1934,8 @@ packages:
     resolution: {integrity: sha512-pMhOfFDPiv9t5jjIXkHosWmkSyQbvsgEVNkz0ERHbuLh2T/7j4Mqqpz523Fe8MVY89KC6Sh/QfS2sM+SjgFDcw==}
     engines: {node: '>= 0.8'}
 
-  /caniuse-lite@1.0.30001479:
-    resolution: {integrity: sha512-6nuRFim5dx8Eu2tO+KJ9PiBdPHs7WB5Hdf+klDcyefyEuOAcfhihIv7pS+JFknJLUiNQbm1AJYKm0c9QOlQS/Q==}
+  /caniuse-lite@1.0.30001480:
+    resolution: {integrity: sha512-q7cpoPPvZYgtyC4VaBSN0Bt+PJ4c4EYRf0DrduInOz2SkFpHD5p3LnvEpqBp7UnJn+8x1Ogl1s38saUxe+ihQQ==}
 
   /chalk@2.4.2:
     resolution: {integrity: sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==}

lightning/src/components/BadassMap.tsx

@@ -13,7 +13,7 @@ import type { MapOptions } from 'maplibre-gl';
 import type { StyleSpecification } from 'maplibre-gl';
 
 import 'maplibre-gl/dist/maplibre-gl.css';
-import * as stylesheet from '~/style.json'
+import * as MAP_STYLE from '~/style.json'
 
 // test data
 const FANEUIL_HALL: number[] = [-71.05625, 42.36]
@@ -39,26 +39,18 @@ const SCAT_DATA = [
 
 const TILES_URL: string = 'https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/style.json?key=Ukl2QNcQUCPAwuelQOvM';
 
-const TILES_STYLE: StyleSpecification = {
-};
-
 
 function BadassMap(): JSX.Element {
     const MY_LOC = FANEUIL_HALL;
     const options: MapOptions = {
         container: 'solid-map-gl will override me',
-        style: stylesheet,
+        style: MAP_STYLE,
         maxPitch: 85,
         antialias: true,
-    };
-    const INITIAL_VIEW_STATE: Viewport = {
-        center: MY_LOC,
-        zoom: 15.5,
-        bearing: 160,
-        pitch: 60,
+        renderWorldCopies: false,
     };
 
-    const [viewport, setViewport] = createSignal<Viewport>(INITIAL_VIEW_STATE);
+    const [viewport, setViewport] = createSignal<Viewport>();
     const [rotate, setRotate] = createSignal<boolean>(true);
     const toggleRotate = () => setRotate<boolean>(!rotate());
 
@@ -68,6 +60,9 @@ function BadassMap(): JSX.Element {
             options={options}
             viewport={viewport()}
             onViewportChange={(evt: Viewport) => setViewport(evt)}
+            onDrag={() => setRotate(false)}
+            onMouseDown={() => setRotate(false)}
+            onTouchStart={() => setRotate(false)}
         >
             <MapScatLayer data={SCAT_DATA} />
             <MapArcLayer data={ARC_DATA} />
@@ -90,6 +85,7 @@ function BadassMap(): JSX.Element {
             >
                 <button onClick={toggleRotate}> Rotation Off </button>
             </Show>
+            <button onClick={setViewport({...viewport, pitch:0})}> Hey </button>
             <MapControls />
         </MapGL >
     );

lightning/src/style.json

@@ -1,18 +1,22 @@
 {
     "version": 8,
+    "id": "klokantech-3d",
     "name": "Klokantech 3D",
-    "metadata": {
-        "mapbox:autocomposite": false,
-        "maputnik:renderer": "mbgljs",
-        "openmaptiles:version": "3.x"
-    },
+    "bearing": 160,
+    "pitch": 60,
+    "center": [
+        -71.05625,
+        42.36
+    ],
+    "zoom": 15.5,
+    "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=Ukl2QNcQUCPAwuelQOvM",
+    "sprite": "https://api.maptiler.com/maps/024da34e-fa66-4cb3-8f5f-0466b51e972e/sprite",
     "sources": {
         "openmaptiles": {
             "type": "vector",
             "url": "https://api.maptiler.com/tiles/v3/tiles.json?key=Ukl2QNcQUCPAwuelQOvM"
         }
     },
-    "glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=Ukl2QNcQUCPAwuelQOvM",
     "layers": [
         {
             "id": "background",
@@ -1435,6 +1439,5 @@
                 "text-halo-width": 2
             }
         }
-    ],
-    "id": "klokantech-3d"
+    ]
 }