adam/maps
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

fix explosion on interaction

Browse source
This commit is contained in:
Adam 2023-04-17 06:35:37 -04:00
parent b571c19cc8
commit 74e680aa1e
3 changed files with 22 additions and 23 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
lightning/pnpm-lock.yaml generated
View file

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

20
lightning/src/components/BadassMap.tsx
View file

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

19
lightning/src/style.json
View file

@ -1,18 +1,22 @@
{ {
"version": 8, "version": 8,
"id": "klokantech-3d",
"name": "Klokantech 3D", "name": "Klokantech 3D",
"metadata": { "bearing": 160,
"mapbox:autocomposite": false, "pitch": 60,
"maputnik:renderer": "mbgljs", "center": [
"openmaptiles:version": "3.x" -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": { "sources": {
"openmaptiles": { "openmaptiles": {
"type": "vector", "type": "vector",
"url": "https://api.maptiler.com/tiles/v3/tiles.json?key=Ukl2QNcQUCPAwuelQOvM" "url": "https://api.maptiler.com/tiles/v3/tiles.json?key=Ukl2QNcQUCPAwuelQOvM"
} }
}, },
"glyphs": "https://api.maptiler.com/fonts/{fontstack}/{range}.pbf?key=Ukl2QNcQUCPAwuelQOvM",
"layers": [ "layers": [
{ {
"id": "background", "id": "background",
@ -1435,6 +1439,5 @@
"text-halo-width": 2 "text-halo-width": 2
} }
} }
], ]
"id": "klokantech-3d"
} }