Как сделать изогнутую линию для 2 точек в Leaflet?

var map = L.map('mapid').setView([51.505, -10], 1);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; <a href = "https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);

var latlngs = [];

var latlng1 = [23.634501, -102.552783],
  latlng2 = [17.987557, -92.929147];

var offsetX = latlng2[1] - latlng1[1],
  offsetY = latlng2[0] - latlng1[0];

var r = Math.sqrt(Math.pow(offsetX, 2) + Math.pow(offsetY, 2)),
  theta = Math.atan2(offsetY, offsetX);

var thetaOffset = (3.14 / 10);

var r2 = (r / 2) / (Math.cos(thetaOffset)),
  theta2 = theta + thetaOffset;

var midpointX = (r2 * Math.cos(theta2)) + latlng1[1],
  midpointY = (r2 * Math.sin(theta2)) + latlng1[0];

var midpointLatLng = [midpointY, midpointX];

latlngs.push(latlng1, midpointLatLng, latlng2);

var pathOptions = {
  color: 'red',
  weight: 3
}

var curvedPath = L.curve(
  [
    'M', latlng1,
    'Q', midpointLatLng,
    latlng2
  ], pathOptions).addTo(map);

body {
  padding: 0px;
  margin: 0px;
}

#mapid {
  height: 300px;
}

<link rel = "stylesheet" type = "text/css" href = "https://unpkg.com/[email protected]/dist/leaflet.css">

<script src = "https://unpkg.com/[email protected]/dist/leaflet.js"></script>

<script src = "https://elfalem.github.io/Leaflet.curve/src/leaflet.curve.js"></script>

<div id = "mapid"></div>