Skip to content

Instantly share code, notes, and snippets.

@ryancatalani

ryancatalani/leaflet-bezier-curve.js

Last active January 13, 2025 15:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save ryancatalani/6091e50bf756088bf9bf5de2017b32e6 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save ryancatalani/6091e50bf756088bf9bf5de2017b32e6 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. ryancatalani revised this gist Mar 24, 2017. No changes.
  2. ryancatalani revised this gist Mar 24, 2017. No changes.
  3. ryancatalani revised this gist Mar 24, 2017. 1 changed file with 4 additions and 1 deletion.
    5 changes: 4 additions & 1 deletion leaflet-bezier-curve.js
    View file
    Original file line number Diff line number Diff line change
    @@ -33,9 +33,12 @@ var pathOptions = {
    weight: 2
    }

    if (typeof document.getElementById('projects_map').animate === "function") {
    if (typeof document.getElementById('LEAFLET_MAP').animate === "function") {
    var durationBase = 2000;
    var duration = Math.sqrt(Math.log(r)) * durationBase;
    // Scales the animation duration so that it's related to the line length
    // (but such that the longest and shortest lines' durations are not too different).
    // You may want to use a different scaling factor.
    pathOptions.animate = {
    duration: duration,
    iterations: Infinity,
  4. ryancatalani revised this gist Mar 24, 2017. No changes.
  5. ryancatalani revised this gist Mar 24, 2017. 1 changed file with 7 additions and 0 deletions.
    7 changes: 7 additions & 0 deletions leaflet-bezier-curve.js
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,10 @@
    // Requires:
    // Leaflet: http://leafletjs.com/
    // Leaflet.curve: https://github.com/elfalem/Leaflet.curve
    //
    // Assumes:
    // var map is a Leaflet map and already set up.

    var latlngs = [];

    var latlng1 = [LATITUDE, LONGTITUDE],
  6. ryancatalani created this gist Mar 24, 2017.
    45 changes: 45 additions & 0 deletions leaflet-bezier-curve.js
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    var latlngs = [];

    var latlng1 = [LATITUDE, LONGTITUDE],
    latlng2 = [LATITUDE, LONGTITUDE];

    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: 'rgba(255,255,255,0.5)',
    weight: 2
    }

    if (typeof document.getElementById('projects_map').animate === "function") {
    var durationBase = 2000;
    var duration = Math.sqrt(Math.log(r)) * durationBase;
    pathOptions.animate = {
    duration: duration,
    iterations: Infinity,
    easing: 'ease-in-out',
    direction: 'alternate'
    }
    }

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