You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
39 lines
1.4 KiB
39 lines
1.4 KiB
import React, { useState } from 'react'
|
|
import { createRoot } from 'react-dom/client';
|
|
|
|
|
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
|
import Points from './Points';
|
|
import Regions from './Regions';
|
|
import Countries from './Countries';
|
|
|
|
const initialMapOptions = [
|
|
{ name: "Объекты ВИЭ", current: true },
|
|
{ name: "Регионы РФ", current: false },
|
|
{ name: "Страны мира", current: false },
|
|
];
|
|
|
|
|
|
|
|
function Maps() {
|
|
const [mapOptions, setMapOptions] = useState(initialMapOptions);
|
|
const onMapOptionClick = (e) => {
|
|
const clickedName = e.target.innerText
|
|
const newMapOptions = mapOptions.map(option => option.name == clickedName ? {...option, current: true} : {...option, current: false})
|
|
setMapOptions(newMapOptions)
|
|
}
|
|
return (
|
|
<React.StrictMode>
|
|
{mapOptions.find(option => option.current).name == "Объекты ВИЭ" && <Points mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
|
|
{mapOptions.find(option => option.current).name == "Регионы РФ" && <Regions mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
|
|
{mapOptions.find(option => option.current).name == "Страны мира" && <Countries mapOptions={mapOptions} onMapOptionClick={onMapOptionClick} />}
|
|
</React.StrictMode>
|
|
)
|
|
}
|
|
|
|
const domNode = document.getElementById('root')
|
|
const root = createRoot(domNode)
|
|
root.render(
|
|
<Maps />
|
|
)
|