twelch/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Interpolate points along a line in equal segments in one pass, rather than say using turf-along and calling once to generate each point.  Once generated it is straightforward to animate a point along this path.
Interpolate function borrowed from https://github.com/pelias/line-interpolate-points all rights reserved
Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8' />
  <title></title>
  <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
  <script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
  <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
  <link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
  <style>
    body { margin:0; padding:0; }
    #map { position:absolute; top:0; bottom:0; width:100%; }
  </style>
</head>
<body>

<div id='map'></div>
<script>

/* Interpolate function borrowed from https://github.com/pelias/line-interpolate-points all rights reserved */

/**
 * @param {Point} pt1
 * @param {Point} pt1
 * @return number The Euclidean distance between `pt1` and `pt2`.
 */
function distance( pt1, pt2 ){
  var deltaX = pt1[0] - pt2[0];
  var deltaY = pt1[1] - pt2[1];
  return Math.sqrt( deltaX * deltaX + deltaY * deltaY );
}

/**
 * @param {Point} point The Point object to offset.
 * @param {number} dx The delta-x of the line segment from which `point` will
 *    be offset.
 * @param {number} dy The delta-y of the line segment from which `point` will
 *    be offset.
 * @param {number} distRatio The quotient of the distance to offset `point`
 *    by and the distance of the line segment from which it is being offset.
 */
function offsetPoint( point, dx, dy, distRatio ){
  return [
    point[ 0 ] - dy * distRatio,
    point[ 1 ] + dx * distRatio
  ];
}

/**
 * @param {array of Point} ctrlPoints The vertices of the (multi-segment) line
 *      to be interpolate along.
 * @param {int} number The number of points to interpolate along the line; this
 *      includes the endpoints, and has an effective minimum value of 2 (if a
 *      smaller number is given, then the endpoints will still be returned).
 * @param {number} [offsetDist] An optional perpendicular distance to offset
 *      each point from the line-segment it would otherwise lie on.
 * @param {int} [minGap] An optional minimum gap to maintain between subsequent
 *      interpolated points; if the projected gap between subsequent points for
 *      a set of `number` points is lower than this value, `number` will be
 *      decreased to a suitable value.
 */
function interpolateLineRange( ctrlPoints, number, offsetDist, minGap ){
  minGap = minGap || 0;
  offsetDist = offsetDist || 0;

  // Calculate path distance from each control point (vertex) to the beginning
  // of the line, and also the ratio of `offsetDist` to the length of every
  // line segment, for use in computing offsets.
  var totalDist = 0;
  var ctrlPtDists = [ 0 ];
  var ptOffsetRatios = [];
  for( var pt = 1; pt < ctrlPoints.length; pt++ ){
    var dist = distance( ctrlPoints[ pt ], ctrlPoints[ pt - 1 ] );
    totalDist += dist;
    ptOffsetRatios.push( offsetDist / dist );
    ctrlPtDists.push( totalDist );
  }

  if( totalDist / (number - 1) < minGap ){
    number = totalDist / minGap + 1;
  }

  // Variables used to control interpolation.
  var step = totalDist / (number - 1);
  var interpPoints = [ offsetPoint(
    ctrlPoints[ 0 ],
    ctrlPoints[ 1 ][ 0 ] - ctrlPoints[ 0 ][ 0 ],
    ctrlPoints[ 1 ][ 1 ] - ctrlPoints[ 0 ][ 1 ],
    ptOffsetRatios[ 0 ]
  )];
  var prevCtrlPtInd = 0;
  var currDist = 0;
  var currPoint = ctrlPoints[ 0 ];
  var nextDist = step;

  for( pt = 0; pt < number - 2; pt++ ){
    // Find the segment in which the next interpolated point lies.
    while( nextDist > ctrlPtDists[ prevCtrlPtInd + 1 ] ){
      prevCtrlPtInd++;
      currDist = ctrlPtDists[ prevCtrlPtInd ];
      currPoint = ctrlPoints[ prevCtrlPtInd ];
    }

    // Interpolate the coordinates of the next point along the current segment.
    var remainingDist = nextDist - currDist;
    var ctrlPtsDeltaX = ctrlPoints[ prevCtrlPtInd + 1 ][ 0 ] -
      ctrlPoints[ prevCtrlPtInd ][ 0 ];
    var ctrlPtsDeltaY = ctrlPoints[ prevCtrlPtInd + 1 ][ 1 ] -
      ctrlPoints[ prevCtrlPtInd ][ 1 ];
    var ctrlPtsDist = ctrlPtDists[ prevCtrlPtInd + 1 ] -
      ctrlPtDists[ prevCtrlPtInd ];
    var distRatio = remainingDist / ctrlPtsDist;

    currPoint = [
      currPoint[ 0 ] + ctrlPtsDeltaX * distRatio,
      currPoint[ 1 ] + ctrlPtsDeltaY * distRatio
    ];

    // Offset currPoint according to `offsetDist`.
    var offsetRatio = offsetDist / ctrlPtsDist;
    interpPoints.push( offsetPoint(
      currPoint, ctrlPtsDeltaX, ctrlPtsDeltaY, ptOffsetRatios[ prevCtrlPtInd ])
    );

    currDist = nextDist;
    nextDist += step;
  }

  interpPoints.push( offsetPoint(
    ctrlPoints[ ctrlPoints.length - 1 ],
    ctrlPoints[ ctrlPoints.length - 1 ][ 0 ] -
      ctrlPoints[ ctrlPoints.length - 2 ][ 0 ],
    ctrlPoints[ ctrlPoints.length - 1 ][ 1 ] -
      ctrlPoints[ ctrlPoints.length - 2 ][ 1 ],
    ptOffsetRatios[ ptOffsetRatios.length - 1 ]
  ));
  return interpPoints;
}

mapboxgl.accessToken = 'pk.eyJ1IjoidHdlbGNoIiwiYSI6Il9pX3dtb3cifQ.YcYnsO0X2p3x0HpHPFfleg';
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v8',
  center: [-122.580067, 45.548602],
  maxzoom: 20,
  zoom: 20
});

var iPathCoords = [
    [ -122.579915799999981, 45.5485545, 0.0 ], [ -122.57994530000002, 45.5485536, 0.0 ], [ -122.579944, 45.5485996, 0.0 ], [ -122.580011, 45.54860810000001, 0.0 ], [ -122.5799507, 45.5486043, 0.0 ], [ -122.579954700000016, 45.5485489, 0.0 ], [ -122.579903799999983, 45.5485489, 0.0 ]
];
var iPathLine = turf.linestring(iPathCoords);

var iCoords = interpolateLineRange(iPathCoords, 100, .0000000001);
var iPoints = [];
for (var i=0; i<iCoords.length; i++) {
  iPoints.push(turf.point(iCoords[i]));
}
var iPointColl = turf.featurecollection(iPoints);

map.on('style.load', function () {
  map.addSource("path", {
    "type": "geojson",
    "data": iPathLine,
    "maxzoom": 20
  });

  map.addLayer({
    "id": "path",
    "type": "line",
    "source": "path",
    "layout": {
      "line-join": "round",
      "line-cap": "round"
    },
    "paint": {
      "line-color": "#888",
      "line-width": 2
    }
  });

  map.addSource("peep", {
    "type": "geojson",
    "data": iPointColl,
    "maxzoom": 20
  });

  map.addLayer({
    "id": "peep",
    "type": "circle",
    "source": "peep",
    "layout": {},
    "paint": {
      "circle-radius": 3,
      "circle-opacity": 0.2
    }
  });

});
</script>

</body>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset='utf-8' />
	<title></title>
	<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
	<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.js'></script>
	<script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.2/turf.min.js'></script>
	<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.12.0/mapbox-gl.css' rel='stylesheet' />
	<style>
	body { margin:0; padding:0; }
	#map { position:absolute; top:0; bottom:0; width:100%; }
	</style>
	</head>
	<body>

	<div id='map'></div>
	<script>

	/* Interpolate function borrowed from https://github.com/pelias/line-interpolate-points all rights reserved */

	/**
	* @param {Point} pt1
	* @param {Point} pt1
	* @return number The Euclidean distance between `pt1` and `pt2`.
	*/
	function distance( pt1, pt2 ){
	var deltaX = pt1[0] - pt2[0];
	var deltaY = pt1[1] - pt2[1];
	return Math.sqrt( deltaX * deltaX + deltaY * deltaY );
	}

	/**
	* @param {Point} point The Point object to offset.
	* @param {number} dx The delta-x of the line segment from which `point` will
	* be offset.
	* @param {number} dy The delta-y of the line segment from which `point` will
	* be offset.
	* @param {number} distRatio The quotient of the distance to offset `point`
	* by and the distance of the line segment from which it is being offset.
	*/
	function offsetPoint( point, dx, dy, distRatio ){
	return [
	point[ 0 ] - dy * distRatio,
	point[ 1 ] + dx * distRatio
	];
	}

	/**
	* @param {array of Point} ctrlPoints The vertices of the (multi-segment) line
	* to be interpolate along.
	* @param {int} number The number of points to interpolate along the line; this
	* includes the endpoints, and has an effective minimum value of 2 (if a
	* smaller number is given, then the endpoints will still be returned).
	* @param {number} [offsetDist] An optional perpendicular distance to offset
	* each point from the line-segment it would otherwise lie on.
	* @param {int} [minGap] An optional minimum gap to maintain between subsequent
	* interpolated points; if the projected gap between subsequent points for
	* a set of `number` points is lower than this value, `number` will be
	* decreased to a suitable value.
	*/
	function interpolateLineRange( ctrlPoints, number, offsetDist, minGap ){
	minGap = minGap \|\| 0;
	offsetDist = offsetDist \|\| 0;

	// Calculate path distance from each control point (vertex) to the beginning
	// of the line, and also the ratio of `offsetDist` to the length of every
	// line segment, for use in computing offsets.
	var totalDist = 0;
	var ctrlPtDists = [ 0 ];
	var ptOffsetRatios = [];
	for( var pt = 1; pt < ctrlPoints.length; pt++ ){
	var dist = distance( ctrlPoints[ pt ], ctrlPoints[ pt - 1 ] );
	totalDist += dist;
	ptOffsetRatios.push( offsetDist / dist );
	ctrlPtDists.push( totalDist );
	}

	if( totalDist / (number - 1) < minGap ){
	number = totalDist / minGap + 1;
	}

	// Variables used to control interpolation.
	var step = totalDist / (number - 1);
	var interpPoints = [ offsetPoint(
	ctrlPoints[ 0 ],
	ctrlPoints[ 1 ][ 0 ] - ctrlPoints[ 0 ][ 0 ],
	ctrlPoints[ 1 ][ 1 ] - ctrlPoints[ 0 ][ 1 ],
	ptOffsetRatios[ 0 ]
	)];
	var prevCtrlPtInd = 0;
	var currDist = 0;
	var currPoint = ctrlPoints[ 0 ];
	var nextDist = step;

	for( pt = 0; pt < number - 2; pt++ ){
	// Find the segment in which the next interpolated point lies.
	while( nextDist > ctrlPtDists[ prevCtrlPtInd + 1 ] ){
	prevCtrlPtInd++;
	currDist = ctrlPtDists[ prevCtrlPtInd ];
	currPoint = ctrlPoints[ prevCtrlPtInd ];
	}

	// Interpolate the coordinates of the next point along the current segment.
	var remainingDist = nextDist - currDist;
	var ctrlPtsDeltaX = ctrlPoints[ prevCtrlPtInd + 1 ][ 0 ] -
	ctrlPoints[ prevCtrlPtInd ][ 0 ];
	var ctrlPtsDeltaY = ctrlPoints[ prevCtrlPtInd + 1 ][ 1 ] -
	ctrlPoints[ prevCtrlPtInd ][ 1 ];
	var ctrlPtsDist = ctrlPtDists[ prevCtrlPtInd + 1 ] -
	ctrlPtDists[ prevCtrlPtInd ];
	var distRatio = remainingDist / ctrlPtsDist;

	currPoint = [
	currPoint[ 0 ] + ctrlPtsDeltaX * distRatio,
	currPoint[ 1 ] + ctrlPtsDeltaY * distRatio
	];

	// Offset currPoint according to `offsetDist`.
	var offsetRatio = offsetDist / ctrlPtsDist;
	interpPoints.push( offsetPoint(
	currPoint, ctrlPtsDeltaX, ctrlPtsDeltaY, ptOffsetRatios[ prevCtrlPtInd ])
	);

	currDist = nextDist;
	nextDist += step;
	}

	interpPoints.push( offsetPoint(
	ctrlPoints[ ctrlPoints.length - 1 ],
	ctrlPoints[ ctrlPoints.length - 1 ][ 0 ] -
	ctrlPoints[ ctrlPoints.length - 2 ][ 0 ],
	ctrlPoints[ ctrlPoints.length - 1 ][ 1 ] -
	ctrlPoints[ ctrlPoints.length - 2 ][ 1 ],
	ptOffsetRatios[ ptOffsetRatios.length - 1 ]
	));
	return interpPoints;
	}

	mapboxgl.accessToken = 'pk.eyJ1IjoidHdlbGNoIiwiYSI6Il9pX3dtb3cifQ.YcYnsO0X2p3x0HpHPFfleg';
	var map = new mapboxgl.Map({
	container: 'map',
	style: 'mapbox://styles/mapbox/streets-v8',
	center: [-122.580067, 45.548602],
	maxzoom: 20,
	zoom: 20
	});

	var iPathCoords = [
	[ -122.579915799999981, 45.5485545, 0.0 ], [ -122.57994530000002, 45.5485536, 0.0 ], [ -122.579944, 45.5485996, 0.0 ], [ -122.580011, 45.54860810000001, 0.0 ], [ -122.5799507, 45.5486043, 0.0 ], [ -122.579954700000016, 45.5485489, 0.0 ], [ -122.579903799999983, 45.5485489, 0.0 ]
	];
	var iPathLine = turf.linestring(iPathCoords);

	var iCoords = interpolateLineRange(iPathCoords, 100, .0000000001);
	var iPoints = [];
	for (var i=0; i<iCoords.length; i++) {
	iPoints.push(turf.point(iCoords[i]));
	}
	var iPointColl = turf.featurecollection(iPoints);

	map.on('style.load', function () {
	map.addSource("path", {
	"type": "geojson",
	"data": iPathLine,
	"maxzoom": 20
	});

	map.addLayer({
	"id": "path",
	"type": "line",
	"source": "path",
	"layout": {
	"line-join": "round",
	"line-cap": "round"
	},
	"paint": {
	"line-color": "#888",
	"line-width": 2
	}
	});

	map.addSource("peep", {
	"type": "geojson",
	"data": iPointColl,
	"maxzoom": 20
	});

	map.addLayer({
	"id": "peep",
	"type": "circle",
	"source": "peep",
	"layout": {},
	"paint": {
	"circle-radius": 3,
	"circle-opacity": 0.2
	}
	});

	});
	</script>

	</body>
	</html>