mapbox_framer_draw_route.coffee

drive_step = 0.0004
# Styling for the line on the map
drive_line_paint = {
	'line-width': 2,
	"line-gradient" : [
		'interpolate',
		['linear'],
		['line-progress'],
		0, "#D9497D",
		0.5, "#EA6053",
		1, "#F97C24"
	]
}

drawRoute = ( data ) ->
	path = data.routes[0].geometry.coordinates
	path = turf.linestring(path)
	temp_coordinates = []
	i=1
	pathLength = turf.lineDistance(path, 'miles')
	steps=Math.floor(pathLength/drive_step)
	
	geojson = {
		type: 'Feature',
		geometry: {
			type: "LineString",
			coordinates: [ turf.along(path, drive_step , 'miles') ]
		}
	}
	
	if mapInstance.getSource( 'expected-route' )
		mapInstance.removeLayer( 'expected-route' )
		mapInstance.removeSource( 'expected-route')
	
	mapInstance.addLayer({
		id: 'expected-route'
		type: 'line',
		source: {
			type: 'geojson',
			data: geojson,
			lineMetrics: true
		},
		paint: drive_line_paint,
		layout : {
			'line-cap' : "round",
		}
	})
	
	interval = 0.000001
	
	Utils.interval interval, ->
		if i!=steps
			nextPoint= turf.along(path, drive_step*(i), 'miles')
			temp_coordinates.push( nextPoint.geometry.coordinates )
			geojson.geometry.coordinates = temp_coordinates
			if mapInstance.getSource( 'expected-route' )
				mapInstance.getSource( 'expected-route' ).setData( geojson )
			else
				clearInterval interval
		else
			clearInterval interval
		i = i*1.01