mirror of
https://github.com/task-17-lct/frontend.git
synced 2024-11-28 06:13:44 +03:00
add map and yandex ui kit
This commit is contained in:
=
parent
f63a1104d9
commit
9ffd9fcd30
2375
package-lock.json
generated
2375
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
|
|
@ -3,6 +3,9 @@
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@bem-react/classname": "^1.6.0",
|
||||||
|
"@bem-react/core": "^5.1.0",
|
||||||
|
"@bem-react/di": "^5.0.0",
|
||||||
"@testing-library/jest-dom": "^5.16.5",
|
"@testing-library/jest-dom": "^5.16.5",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
|
@ -10,8 +13,13 @@
|
||||||
"@types/node": "^16.18.31",
|
"@types/node": "^16.18.31",
|
||||||
"@types/react": "^18.2.6",
|
"@types/react": "^18.2.6",
|
||||||
"@types/react-dom": "^18.2.4",
|
"@types/react-dom": "^18.2.4",
|
||||||
|
"@yandex/ui": "^3.33.0",
|
||||||
|
"antd": "^5.5.0",
|
||||||
|
"axios": "^1.4.0",
|
||||||
|
"mapbox-gl": "^2.14.1",
|
||||||
"react": "^18.2.0",
|
"react": "^18.2.0",
|
||||||
"react-dom": "^18.2.0",
|
"react-dom": "^18.2.0",
|
||||||
|
"react-map-gl": "^7.0.23",
|
||||||
"react-router-dom": "^6.11.2",
|
"react-router-dom": "^6.11.2",
|
||||||
"react-scripts": "5.0.1",
|
"react-scripts": "5.0.1",
|
||||||
"typescript": "^4.9.5",
|
"typescript": "^4.9.5",
|
||||||
|
|
|
||||||
|
|
@ -3,6 +3,7 @@
|
||||||
<head>
|
<head>
|
||||||
<meta charset="utf-8" />
|
<meta charset="utf-8" />
|
||||||
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
||||||
|
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||||
<meta name="theme-color" content="#000000" />
|
<meta name="theme-color" content="#000000" />
|
||||||
<meta
|
<meta
|
||||||
|
|
|
||||||
|
|
@ -1,10 +1,12 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { MyMap } from './сomponents/map';
|
||||||
|
import 'mapbox-gl/dist/mapbox-gl.css';
|
||||||
|
|
||||||
|
|
||||||
function App() {
|
function App() {
|
||||||
return (
|
return (
|
||||||
<div className="App">
|
<div className="App">
|
||||||
hello
|
<MyMap></MyMap>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
|
||||||
3
src/theme.ts
Normal file
3
src/theme.ts
Normal file
|
|
@ -0,0 +1,3 @@
|
||||||
|
import { configureRootTheme } from '@yandex/ui/Theme'
|
||||||
|
import { theme } from '@yandex/ui/Theme/presets/default'
|
||||||
|
configureRootTheme({ theme })
|
||||||
119
src/сomponents/map/index.tsx
Normal file
119
src/сomponents/map/index.tsx
Normal file
|
|
@ -0,0 +1,119 @@
|
||||||
|
import React, { useEffect, useState } from "react";
|
||||||
|
import Map, {Source, Layer} from 'react-map-gl';
|
||||||
|
import axios from 'axios'
|
||||||
|
import { Checkbox } from '@yandex/ui/Checkbox/desktop/bundle'
|
||||||
|
import path from "path";
|
||||||
|
import { configureRootTheme } from '@yandex/ui/Theme'
|
||||||
|
import { theme } from '@yandex/ui/Theme/presets/default'
|
||||||
|
configureRootTheme({ theme })
|
||||||
|
|
||||||
|
export const MyMap: React.FC = () =>{
|
||||||
|
|
||||||
|
const [route, setRoute] = useState({})
|
||||||
|
const [points, setPoints] = useState({})
|
||||||
|
const [path, setPath] = useState('30.197141%2C59.997082%3B30.209432%2C60.004412')
|
||||||
|
const [checked, setChecked] = useState(new Array<Boolean>())
|
||||||
|
useEffect(()=>{
|
||||||
|
axios.get('https://api.mapbox.com/directions/v5/mapbox/walking/'+path+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
|
||||||
|
(data:any) => setRoute(data.data.routes[0].geometry)
|
||||||
|
)
|
||||||
|
})
|
||||||
|
const onCheckChange = (e:any, cords:Array<string>, ind:number) => {
|
||||||
|
console.log(e)
|
||||||
|
if (e.target.checked){
|
||||||
|
|
||||||
|
if (path == ''){
|
||||||
|
setPath(cords[0] + '%2C' + cords[1])
|
||||||
|
}else{
|
||||||
|
setPath(path + "%3B" + cords[0]+'%2C' + cords[1])
|
||||||
|
}
|
||||||
|
axios.get('https://api.mapbox.com/directions/v5/mapbox/walking/'+path+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
|
||||||
|
(data:any) => setRoute(data.data.routes[0].geometry)
|
||||||
|
)
|
||||||
|
checked[ind] = true
|
||||||
|
setChecked(checked)
|
||||||
|
}else{
|
||||||
|
setPath(path.replace("%3B" + cords[0]+'%2C' + cords[1], ''))
|
||||||
|
|
||||||
|
axios.get('https://api.mapbox.com/directions/v5/mapbox/walking/'+path+'?alternatives=true&continue_straight=true&geometries=geojson&language=en&overview=simplified&steps=true&access_token=pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q').then(
|
||||||
|
(data:any) => setRoute({
|
||||||
|
type: 'Feature',
|
||||||
|
properties: {},
|
||||||
|
geometry: data.data.routes[0].geometry
|
||||||
|
})
|
||||||
|
)
|
||||||
|
checked[ind] = false
|
||||||
|
setChecked(checked)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const geojson = {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: [
|
||||||
|
{type: 'Feature', geometry: {type: 'Point', coordinates: [-122.4, 37.8]}}
|
||||||
|
]
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
const layerWayStyle ={
|
||||||
|
id: 'route',
|
||||||
|
type: 'line',
|
||||||
|
source: {
|
||||||
|
type: 'geojson',
|
||||||
|
data: route
|
||||||
|
},
|
||||||
|
layout: {
|
||||||
|
'line-join': 'round',
|
||||||
|
'line-cap': 'round'
|
||||||
|
},
|
||||||
|
paint: {
|
||||||
|
'line-color': '#3887be',
|
||||||
|
'line-width': 5,
|
||||||
|
'line-opacity': 0.75
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const layerStyle = {
|
||||||
|
id: 'point',
|
||||||
|
type: 'circle',
|
||||||
|
paint: {
|
||||||
|
'circle-radius': 10,
|
||||||
|
'circle-color': '#007cbf'
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const [viewport, setViewport] = React.useState();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<Checkbox size='m' view='default' checked={true} onChange={(e:any)=>onCheckChange(e, ['30.197141','59.997082'],7)} label='30.197141,59.997082'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={true} onChange={(e:any)=>onCheckChange(e, ['30.209432','60.004412'], 8)} label = '30.209432,60.004412'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[0]} onChange={(e:any)=>onCheckChange(e, ['30.215966','60.004645'], 0)} label='30.215966,60.004645'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[1]} onChange={(e:any)=>onCheckChange(e, ['30.231952','60.005933'], 1)} label='30.231952,60.005933'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[2]} onChange={(e:any)=>onCheckChange(e, ['30.265898','60.012630'], 2)} label='30.265898,60.012630'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[3]} onChange={(e:any)=>onCheckChange(e, ['30.295340','60.018610'], 3)} label='30.295340,60.018610'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[4]} onChange={(e:any)=>onCheckChange(e, ['30.329311','60.033712'], 4)} label='30.329311,60.033712'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[5]} onChange={(e:any)=>onCheckChange(e, ['30.416310','60.042787'], 5)} label='30.416310,60.042787'></Checkbox>
|
||||||
|
<Checkbox size='m' view='default' checked={checked[6]} onChange={(e:any)=>onCheckChange(e, ['30.288291','59.994208'], 6)} label='30.288291,59.994208'></Checkbox>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Map initialViewState={{
|
||||||
|
longitude: 30.197141,
|
||||||
|
latitude: 59.997082,
|
||||||
|
zoom: 14
|
||||||
|
}}
|
||||||
|
style={{width: 600, height: 400}}
|
||||||
|
mapStyle="mapbox://styles/mapbox/streets-v9"
|
||||||
|
mapboxAccessToken='pk.eyJ1IjoiZmlyZXNpZWh0IiwiYSI6ImNrdW9kemYzbTB4ZGkycHAxbXN2YnIzaGMifQ.G0fl-qVbecucfOvn8OtU4Q'
|
||||||
|
>
|
||||||
|
<Source id="my-data" type="geojson" data={geojson as any}>
|
||||||
|
<Layer {...layerStyle as any} />
|
||||||
|
</Source>
|
||||||
|
<Source id="way-data" type="geojson" data={route as any}>
|
||||||
|
<Layer {...layerWayStyle as any} />
|
||||||
|
</Source>
|
||||||
|
</Map>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
);
|
||||||
|
}
|
||||||
0
src/сomponents/map/map.css
Normal file
0
src/сomponents/map/map.css
Normal file
Loading…
Reference in New Issue
Block a user