diff --git a/lightning/pnpm-lock.yaml b/lightning/pnpm-lock.yaml index 31643d3..0cf797d 100644 --- a/lightning/pnpm-lock.yaml +++ b/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==} diff --git a/lightning/src/components/BadassMap.tsx b/lightning/src/components/BadassMap.tsx index e92c414..79d186e 100644 --- a/lightning/src/components/BadassMap.tsx +++ b/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(INITIAL_VIEW_STATE); + const [viewport, setViewport] = createSignal(); const [rotate, setRotate] = createSignal(true); const toggleRotate = () => setRotate(!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)} > @@ -90,6 +85,7 @@ function BadassMap(): JSX.Element { > + ); diff --git a/lightning/src/style.json b/lightning/src/style.json index 642c097..a42f085 100644 --- a/lightning/src/style.json +++ b/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" + ] }