Projekt

Obecné

Profil

« Předchozí | Další » 

Revize 76e15218

Přidáno uživatelem Václav Honzík před asi 2 roky(ů)

dummy path with arrows example

re #9547

Zobrazit rozdíly:

frontend/package.json
18 18 
    "react": "^17.0.2",
19 19 
    "react-dom": "^17.0.2",
20 20 
    "react-leaflet": "3.2.5",
21 
    "react-leaflet-textpath": "^2.1.1",
21 22 
    "react-redux": "^7.2.6",
22 23 
    "react-router-dom": "^6.2.2",
23 24 
    "react-scripts": "5.0.0",
frontend/public/index.html
1 1 
<!DOCTYPE html>
2 2 
<html lang="en">
3 
  <head>
4 
    <meta charset="utf-8" />
5 
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 
    <meta name="viewport" content="width=device-width, initial-scale=1" />
7 
    <meta name="theme-color" content="#000000" />
8 
    <meta
9 
      name="description"
10 
      content="Web site created using create-react-app"
11 
    />
12 
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
13 
    <!--
3 
    <head>
4 
        <meta charset="utf-8" />
5 
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
6 
        <meta name="viewport" content="width=device-width, initial-scale=1" />
7 
        <meta name="theme-color" content="#000000" />
8 
        <meta
9 
            name="description"
10 
            content="Web site created using create-react-app"
11 
        />
12 
        <link
13 
            rel="stylesheet"
14 
            href="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css"
15 
            integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ=="
16 
            crossorigin=""
17 
        />
18 
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
19 
        <!--
14 20 
      manifest.json provides metadata used when your web app is installed on a
15 21 
      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
16 22 
    -->
17 
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
18 
    <!--
23 
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
24 
        <!--
19 25 
      Notice the use of %PUBLIC_URL% in the tags above.
20 26 
      It will be replaced with the URL of the `public` folder during the build.
21 27 
      Only files inside the `public` folder can be referenced from the HTML.
......
24 30 
      work correctly both with client-side routing and a non-root public URL.
25 31 
      Learn how to configure a non-root public URL by running `npm run build`.
26 32 
    -->
27 
    <title>React App</title>
28 
  </head>
29 
  <body>
30 
    <noscript>You need to enable JavaScript to run this app.</noscript>
31 
    <div id="root"></div>
32 
    <!--
33 
        <script
34 
            src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js"
35 
            integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ=="
36 
            crossorigin=""
37 
        ></script>
38 
        <title>React App</title>
39 
    </head>
40 
    <body>
41 
        <noscript>You need to enable JavaScript to run this app.</noscript>
42 
        <div id="root"></div>
43 
        <!--
33 44 
      This HTML file is a template.
34 45 
      If you open it directly in the browser, you will see an empty page.
35 46 

  		




  ......




  38
  49
  
    

  		




  39
  50
  
    
      To begin the development, run `npm start` or `yarn start`.


  		




  40
  51
  
    
      To create a production bundle, use `npm run build` or `yarn build`.


  		




  41
  
  
    
    -->


  		




  42
  
  
    
  </body>


  		




  
  52
  
    
    --></body>


  		




  43
  53
  
    
</html>


  		












  

    
      frontend/src/features/TrackingTool/TrackingTool.tsx
    
  





  1
  1
  
    
import { Button, Grid, Stack, Typography } from '@mui/material'


  		




  2
  2
  
    
import { Fragment } from 'react'


  		




  3
  3
  
    
import AddIcon from '@mui/icons-material/Add'


  		




  4
  
  
    
import { MapContainer, Marker, Popup, TileLayer } from 'react-leaflet'


  		




  
  4
  
    
import { MapContainer, Marker, Polyline, Popup, TileLayer } from 'react-leaflet'


  		




  5
  5
  
    
import mapConfig from '../../config/mapConfig'


  		




  
  6
  
    
import TextPath from 'react-leaflet-textpath'


  		




  6
  7
  
    

  		




  7
  8
  
    
// Page with tracking tool


  		




  8
  9
  
    
const TrackingTool = () => {


  		




  
  10
  
    
    const generateDummyPath = () => {


  		




  
  11
  
    
        // Sample dummy path to display


  		




  
  12
  
    
        const dummyPath = []


  		




  
  13
  
    
        for (let i = 0; i < 10; i += 1) {


  		




  
  14
  
    
            dummyPath.push({


  		




  
  15
  
    
                latitude:


  		




  
  16
  
    
                    mapConfig.defaultCoordinates[0] +


  		




  
  17
  
    
                    i * 0.1 +


  		




  
  18
  
    
                    Math.random() * 0.1,


  		




  
  19
  
    
                longitude:


  		




  
  20
  
    
                    mapConfig.defaultCoordinates[1] +


  		




  
  21
  
    
                    i * 0.1 +


  		




  
  22
  
    
                    Math.random() * 0.1,


  		




  
  23
  
    
            })


  		




  
  24
  
    
        }


  		




  
  25
  
    
        return dummyPath


  		




  
  26
  
    
    }


  		




  
  27
  
    

  		




  
  28
  
    
    const createDummyPathPolylines = () => {


  		




  
  29
  
    
        const dummyPath = generateDummyPath()


  		




  
  30
  
    
        const polylines: any[] = []


  		




  
  31
  
    

  		




  
  32
  
    
        if (dummyPath.length < 2) {


  		




  
  33
  
    
            return []


  		




  
  34
  
    
        }


  		




  
  35
  
    

  		




  
  36
  
    
        for (let i = 0; i < dummyPath.length - 1; i += 1) {


  		




  
  37
  
    
            polylines.push(


  		




  
  38
  
    
                // <Polyline


  		




  
  39
  
    
                //     key={i}


  		




  
  40
  
    
                //     positions={[


  		




  
  41
  
    
                //         [dummyPath[i].latitude, dummyPath[i].longitude],


  		




  
  42
  
    
                //         [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],


  		




  
  43
  
    
                //     ]}


  		




  
  44
  
    
                //     color="red"


  		




  
  45
  
    
                //     weight={5}


  		




  
  46
  
    
                //     opacity={1}


  		




  
  47
  
    

  		




  
  48
  
    
                //     smoothFactor={1}


  		




  
  49
  
    
                // >


  		




  
  50
  
    
                //     <Popup>Caesar 🥗 War Path (Allegedly)</Popup>


  		




  
  51
  
    
                //     </Polyline>


  		




  
  52
  
    
                <TextPath


  		




  
  53
  
    
                    positions={[


  		




  
  54
  
    
                        [dummyPath[i].latitude, dummyPath[i].longitude],


  		




  
  55
  
    
                        [dummyPath[i + 1].latitude, dummyPath[i + 1].longitude],


  		




  
  56
  
    
                    ]}


  		




  
  57
  
    
                    text="►"


  		




  
  58
  
    
                    attributes={{


  		




  
  59
  
    
                        'font-size': 25,


  		




  
  60
  
    
                        'fill': 'blue'


  		




  
  61
  
    
                    }}


  		




  
  62
  
    
                    repeat


  		




  
  63
  
    
                    center


  		




  
  64
  
    
                    weight={10}


  		




  
  65
  
    
                >


  		




  
  66
  
    
                    <Popup>Caesar 🥗 War Path (Allegedly)</Popup>


  		




  
  67
  
    
                </TextPath>


  		




  
  68
  
    
            )


  		




  
  69
  
    
        }


  		




  
  70
  
    

  		




  
  71
  
    
        return polylines


  		




  
  72
  
    
    }


  		




  
  73
  
    

  		




  
  74
  
    
    const polylines = createDummyPathPolylines()


  		




  9
  75
  
    

  		




  10
  76
  
    
    return (


  		




  11
  77
  
    
        <Fragment>


  		




  ......




  44
  110
  
    
                        </Button>


  		




  45
  111
  
    
                    </Stack>


  		




  46
  112
  
    
                </Grid>


  		




  47
  
  
    
                <Grid item xs={12} md={8} style={{minHeight: '60vh', maxHeight: '100vh', width: '100%'}}>


  		




  
  113
  
    
                <Grid


  		




  
  114
  
    
                    item


  		




  
  115
  
    
                    xs={12}


  		




  
  116
  
    
                    md={8}


  		




  
  117
  
    
                    style={{


  		




  
  118
  
    
                        minHeight: '60vh',


  		




  
  119
  
    
                        maxHeight: '100vh',


  		




  
  120
  
    
                        width: '100%',


  		




  
  121
  
    
                    }}


  		




  
  122
  
    
                >


  		




  48
  123
  
    
                    <MapContainer


  		




  49
  
  
    
                        center={[mapConfig.defaultCoordinates[0], mapConfig.defaultCoordinates[1]]}


  		




  
  124
  
    
                        center={[


  		




  
  125
  
    
                            mapConfig.defaultCoordinates[0],


  		




  
  126
  
    
                            mapConfig.defaultCoordinates[1],


  		




  
  127
  
    
                        ]}


  		




  50
  128
  
    
                        zoom={mapConfig.defaultZoom}


  		




  51
  129
  
    
                        style={{ height: '100%', minHeight: '100%' }}


  		




  52
  130
  
    
                    >


  		




  53
  
  
    
                    <TileLayer attribution={mapConfig.attribution} url={mapConfig.url} />


  		




  54
  
  
    
                        


  		




  
  131
  
    
                        <TileLayer


  		




  
  132
  
    
                            attribution={mapConfig.attribution}


  		




  
  133
  
    
                            url={mapConfig.url}


  		




  
  134
  
    
                        />


  		




  
  135
  
    
                        {polylines}


  		




  55
  136
  
    
                    </MapContainer>


  		




  56
  137
  
    
                </Grid>


  		




  57
  138
  
    
            </Grid>


  		












Také k dispozici:  Unified diff