diff --git a/packages/client/src/components/landing-component/MapNext.tsx b/packages/client/src/components/landing-component/MapNext.tsx index 52509fb..1ef037d 100644 --- a/packages/client/src/components/landing-component/MapNext.tsx +++ b/packages/client/src/components/landing-component/MapNext.tsx @@ -8,6 +8,7 @@ import Map, { NavigationControl, Popup, ScaleControl, + Source, } from 'react-map-gl/mapbox'; import clientChatStore from '../../stores/ClientChatStore'; @@ -122,6 +123,8 @@ Type '{ city: string; population: string; image: string; state: string; latitude pitch: clientChatStore.mapState.pitch, }} onMove={handleMapViewChange} + terrain={{ source: 'mapbox-dem', exaggeration: 1.5 }} + maxPitch={85} mapStyle="mapbox://styles/geoffsee/cmd1qz39x01ga01qv5acea02y" attributionControl={false} mapboxAccessToken={props.mapboxPublicKey} @@ -135,6 +138,13 @@ Type '{ city: string; population: string; image: string; state: string; latitude right: 0, }} > + diff --git a/packages/client/src/stores/MapStore.ts b/packages/client/src/stores/MapStore.ts index 78d9f5d..e346f03 100644 --- a/packages/client/src/stores/MapStore.ts +++ b/packages/client/src/stores/MapStore.ts @@ -9,26 +9,31 @@ export interface MapControlCommand { export const MapStore = types .model('MapStore', { // Current map view state - longitude: types.optional(types.number, -122.4), - latitude: types.optional(types.number, 37.8), - zoom: types.optional(types.number, 14), + // 37°47'21"N 122°23'52"W + longitude: types.optional(types.number, -87.6319), + latitude: types.optional(types.number, 41.883415), + zoom: types.optional(types.number, 14.5), + bearing: types.optional(types.number, 15.165878375019094), + pitch: types.optional(types.number, 45), // Map control state isControlActive: types.optional(types.boolean, false), }) .volatile(self => ({ // Store pending map commands from AI pendingCommands: [] as MapControlCommand[], + // 41.88341413374059-87.630091075785714.57273962016686450 mapState: { latitude: self.latitude, longitude: self.longitude, zoom: self.zoom, - bearing: 0, - pitch: 0, + bearing: self.bearing, + pitch: self.pitch, } as any, })) .actions(self => ({ // Update map view state setMapView(longitude: number, latitude: number, zoom: number) { + console.log(latitude, longitude, zoom, self.mapState.pitch, self.mapState.bearing); self.longitude = longitude; self.latitude = latitude; self.zoom = zoom;