2

Goal

I want to connect points using a polycurve or curved lines in Leaflet in a scalable way. If possible, without defining control points.

Approach

I'm using the Leaflet.curve plugin which offers quadratic and cubic bezier curves. I took a screenshot and created a jsfiddle (https://jsfiddle.net/p1zx5k73/28/) of only a limited set of connected points. The js code is further below.

Quadratic bezier curves between points using the Leaflet-curve plugin

Problem

My approach is not scalable with the Leaflet-curve plugin since I need to create a control point for all inter-points connections each.

lng = Point_One[0] + 0.5 + ((Point_Two[0] - Point_One[0]) / 2)
lat = Point_One[1] + 0.5 + ((Point_Two[1] - Point_One[1]) / 2)
...

I can automate getting the mid-point between two points and its direction (+/-), but I don't know how to automate offsetting the control point. The length between points varies. In practice, I have hardcoded the size of the offset. If you look closely, you can see that the curves are not equally distributed between points which would also be nice.

Questions

  1. Are there any good frameworks to draw smooth lines between points in Leaflet?

I have read about Raphael, but it no longer seems to be available(?).

  1. Is there a way to optimize the way I use the Leaflet-curve plugin?

I assume I could have bigger/smaller offsets dependent on inter-points distance.

  1. Are there any QGIS plugins to create splines/smooth lines between points (in a dataset) and export these as a geojson layer?

I have no experience with, but read about the Spline and CadTools Plugins.

var Mapnik = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom: 19,
    attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
});

var mymap = L.map('mapid', {
    layers: [Mapnik]
}).setView([49.165804, 39.517246], 4);

var Warsaw = [52.233333, 21.016667];
var Brest = [52.133333, 23.666667];
var Moscow = [55.75, 37.616667];
var Yekaterinburg = [56.833333, 60.583333];

var curved_line = L.curve(['M', Warsaw,
    'Q', [Warsaw[0] + 0.5 + ((Brest[0] - Warsaw[0]) / 2), Warsaw[1] + 0.5 + ((Brest[1] - Warsaw[1]) / 2)],
    Brest,
    [Brest[0] - 3.5 + ((Moscow[0] - Brest[0]) / 2), Brest[1] - 3.5 + ((Moscow[1] - Brest[1]) / 2)],
    Moscow,
    [Moscow[0] + 3.5 + ((Yekaterinburg[0] - Moscow[0]) / 2), Moscow[1] + 3.5 + ((Yekaterinburg[1] - Moscow[1]) / 2)],
    Yekaterinburg,
      ], {
  fillColor: 'green',
  weight: 4,
  opacity: 1,
  color: 'green',
  fillOpacity: 1,
  lineCap: 'round'
});

var straight_line = L.curve(['M', Warsaw,
'L', Brest, Moscow, Yekaterinburg, {
    fillColor: 'blue',
    weight: 2,
    opacity: 0.5,
    color: 'blue',
    fillOpacity: 0.5,
    lineCap: 'round'
}]);

mymap.addLayer(straight_line);
mymap.addLayer(curved_line);

closed as too broad by Midavalo Jul 4 at 17:22

Please edit the question to limit it to a specific problem with enough detail to identify an adequate answer. Avoid asking multiple distinct questions at once. See the How to Ask page for help clarifying this question. If this question can be reworded to fit the rules in the help center, please edit the question.

  • did you find an answer to your question? I would like to do the same thing. – remyremy Aug 11 '17 at 21:02