Qt Location Editing a MapPolyLine

Question

My objective is to allow a user to edit a MapPolyLine using the mouse to drag and drop points on the line. I have implemented this by creating a C++ model that exposes a path() method for dumping all points to draw the line.

I then used this model to display a set of MapCircles for each vertex on the line. These Mapcircles have drag events which update the MapPolyLine model after drag has finished.

This works a treat for lines with < 500 vertices. Then performance suffers really badly. Some of my lines (from GPX files) have 10,000 vertices.

So I tried to only expose MapCircles on the line close to the mouse hover point. But (unless I am mistaken) the MouseArea for a MapPolyLine appears to be the bounding box of the line and hover can be triggered in strange situations.

I found that the onEntered event worked well enough for me to work out the position on the line and then display a set of MapCircles close to that position. It is a sub-optimal solution though as the user has to actively click the line to get these MapCircles to show.

My question is: "am I using the right strategy to allow a MapPolyLine to be edited?". I cannot see any other way of doing it in the current implementation of QtLocation.

The code is now quite complex. It's structure is:-

GPXModel {
    id: gpxModel
}

MapPolyLine {

    path: gpxModel.path
    MouseArea {
      onEntered: {
           var mapCoord = gpxLine.mapToItem(mapView,mouseX,mouseY);
           var coord = mapView.toCoordinate(Qt.point(mapCoord.x,mapCoord.y));
           //tell the model where we are in the array of points so we can display MapCircles around this point
           gpxModel.setEditLocationFromCoordinate(coord);
       }
    }
}

MapItemView {
    model: gpxModel
    MapCircle {
        //this is a custom role I use to return a sub-set of points set by setEditLocationFromCoordinate
        center: positionRole
        MouseArea{
           anchors.fill: parent
           drag.target: parent
           onDragActiveChanged: {

            if(!drag.active){
                gpxModel.updatePositionOfMarker();
            }
        }
        }
    }

}

The project is open sourced at https://github.com/citizenfish/servalan_2020 with the caveat that I am using this as a learning exercise so it's all a bit hacked together.

EDIT: I do not want to use webview based solutions. The point of the project was to do this in native Qt with minimal reliance on third party javascript libraries/browsers.