71 lines
2.2 KiB
React
71 lines
2.2 KiB
React
'use client';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
// Imports
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// --------------------------------------------------- Components ------------------------------------------------------
|
|
import { DeckGL } from 'deck.gl';
|
|
import { Map } from 'react-map-gl';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// -------------------------------------------------- Hooks & Utils ----------------------------------------------------
|
|
import { useData } from './hooks/useData';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
// ------------------------------------------------- Assets & Styles ---------------------------------------------------
|
|
import './styles.scss';
|
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
import HeartIcon from '@/assets/HeartIcon';
|
|
// ---------------------------------------------------------------------------------------------------------------------
|
|
|
|
const Home = () => {
|
|
const { canUseGeolocation, geoError, initialState } = useData();
|
|
|
|
if (!canUseGeolocation && !geoError) {
|
|
return <p className='appMessage'>Chargement...</p>;
|
|
}
|
|
|
|
if (!canUseGeolocation && geoError) {
|
|
return (
|
|
<p className='appMessage'>
|
|
Nous avons besoin d'accéder à votre position pour pouvoir
|
|
utiliser l'application.
|
|
</p>
|
|
);
|
|
}
|
|
|
|
return (
|
|
<div className='mapContainer'>
|
|
<DeckGL
|
|
initialViewState={initialState}
|
|
layers={[]}
|
|
controller
|
|
useDevicePixels={false}
|
|
getCursor={({ isDragging }) =>
|
|
isDragging ? 'grabbing' : 'grab'
|
|
}
|
|
>
|
|
<Map
|
|
logoPosition='bottom-right'
|
|
style={{
|
|
width: '100%',
|
|
height: '100%',
|
|
}}
|
|
mapboxAccessToken={process.env.MAPBOX_TOKEN}
|
|
mapStyle={
|
|
'mapbox://styles/unepicier/cm0l8fydz009v01qkh9bvau16'
|
|
}
|
|
preserveDrawingBuffer
|
|
></Map>
|
|
</DeckGL>
|
|
|
|
<button className='dropLove'>
|
|
<HeartIcon />
|
|
Placer un love
|
|
</button>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default Home;
|