3

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);
  • did you find an answer to your question? I would like to do the same thing. – remyremy Aug 11 '17 at 21:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.