praca z mapą

Chciałbym uzyskać taki efekt:
https://naforum.zapodaj.net/025ccc6b72e7.png.html
Jedyne co zrobiłem
https://naforum.zapodaj.net/4758f6fc3cf7.png.html
Prosiłym o pomoc jak cos takiego uzyskac. Mój kod:

import React, { Component } from 'react';
import ReactMapGL, { Marker, Popup } from "react-map-gl";

class App extends Component {
  state = {
    viewport: {
      latitude: 53.0331258,
      longitude: 18.6155611,
      width: '100vw',
      height: "60vh",
      zoom: 11,
    },
    selectedPark: null,
    Name: '',
    Description: '',
    X: '',
    Y: '',
    Image: '',
    items: [],
 }
  
  addItem = (e) => {
    e.preventDefault();
    const newItem = {
      Name: this.state.Name,
      Description: this.state.Description,
      X: parseFloat(this.state.X),
      Y: parseFloat(this.state.Y),
      Image: this.state.Image
    };
    this.setState(prevState => ({
      items: [...prevState.items, newItem]
    }));
  }
 
  render() {
    return (
      <div>
        <ReactMapGL {...this.state.viewport} mapboxApiAccessToken={process.env.REACT_APP_MAPBOX_TOKEN}
          mapStyle="mapbox://styles/robert1995/ck8jf1dl90awl1imhfexrgpe8"
          onViewportChange={(viewport) => this.setState({ viewport: viewport })}
        >
          {this.state.items.map((park) => (
            <Marker
              key={park.Id}
              latitude={park.X}
              longitude={park.Y}

            >
              <button className="marker-btn" onClick={(e) => {
                e.preventDefault();
                this.setState({ selectedPark: park })


              }}>
                <img src="mark.svg" alt="Icon" />
              </button>
            </Marker>
          ))}
          {this.state.selectedPark ? (
            <Popup
              latitude={this.state.selectedPark.X}
              longitude={this.state.selectedPark.Y}
              onClose={() => {
                this.setState({ selectedPark: null })
              }}
            >
              <div className="images">
                <h2 className="h2">{this.state.selectedPark.Name}</h2>
                <div className="divek">
                  <div className="div">
                    <img src={this.state.selectedPark.Image} alt="" />
                    <p className="p">{this.state.selectedPark.Description}</p>
                  </div>
                </div>
              </div>
            </Popup>
          ) : null}


        </ReactMapGL>
        <div className="wrapper">
          <form onSubmit={this.addItem} className="form">
            <input
              // required
              className="lefcik"
              type="text"
              placeholder="Podaj nazwe punktu.."
              value={this.state.Name}
              onChange={e => this.setState({
                Name: e.target.value
              })}
            />
            <textarea
              // required
              className="lefcik"
              type="text"
              rows="5"
              cols="33"
              placeholder="Opis.."
              value={this.state.Description}
              onChange={e => this.setState({
                Description: e.target.value
              })}
            />
            <input
              // required
              className="lefcik"
              type="number"
              placeholder="Długość"
              value={this.state.X}
              onChange={e => this.setState({
                X: e.target.value
              })}
            />
            <input
              // required
              className="lefcik "
              type="number"
              placeholder="Szerokosc"
              value={this.state.Y}
              onChange={e => this.setState({
                Y: e.target.value
              })}
            />
            <input
              // required
              className="lefcik"
              type="text"
              placeholder="Dodaj zdjęcie.."
              value={this.state.Image}
              onChange={e => this.setState({
                Image: e.target.value
              })}
            />
            <button className="lefcik btn"> Dodaj punkt</button>
          </form>
        </div>
      </div >
    );
  }
}

export default App;

import React, { PureComponent } from 'react'
import { CanvasOverlay } from 'react-map-gl'

export default class PolylineOverlay extends PureComponent {
  _redraw ({ width, height, ctx, isDragging, project, unproject }) {
    const { points, color = 'red', lineWidth = 2, renderWhileDragging = true } = this.props
    ctx.clearRect(0, 0, width, height)
    ctx.globalCompositeOperation = 'lighter'

    if ((renderWhileDragging || !isDragging) && points) {
      ctx.lineWidth = lineWidth
      ctx.strokeStyle = color
      ctx.beginPath()
      points.forEach(point => {
        const pixel = project([point[0], point[1]])
        ctx.lineTo(pixel[0], pixel[1])
      })
      ctx.stroke()
    }
  }

  render () {
    return <CanvasOverlay redraw={this._redraw.bind(this)} />
  }
}

i używasz tego:

// points is an array of [[lat, lon], [lat, lon], ...]
<ReactMapGL ...>
  <PolylineOverlay points={points} />
</ReactMapGL>