drecodeam

drive_step = 0.004
drive_interval = 0.0001

# Animate a drive segment
animateDrive = (response) ->
	path = response.routes[0].geometry.coordinates
	path = turf.linestring(path)
	temp_coordinates = []
	pathLength = turf.lineDistance(path, 'miles')
	steps = Math.floor(pathLength/drive_step)

drecodeam

# Get map bounds between 2 points
getMapBounds = ( origin, destination ) ->
	sw = new mapboxgl.LngLat(origin[1], origin[0]);
	ne = new mapboxgl.LngLat(destination[1], destination[0] );
	llb = new mapboxgl.LngLatBounds(sw, ne);
	return llb

getRoute( origin, destination ).then( 
  mapInstance.fitBounds( getMapBounds( origin, destination ), {
    padding: 100

drecodeam

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",

drecodeam

origin =  [37.784872, -122.389752]
destination = [37.817910, -122.279143]
mapbox_drive_route_endpoint = 'https://api.mapbox.com/directions/v5/mapbox/driving/'

# Draw route between 2 places
getRoute = ( source, destination ) ->
	directionRequestUrl = bypass_cors + mapbox_drive_route_endpoint + source[1]+","+source[0]+";"+destination[1]+","+destination[0]+"?geometries=geojson&access_token="+access_token
	fetch( directionRequestUrl ).then( (result) ->
		result.json()
	).then( ( data ) ->

drecodeam

# Add a marker for a place 
addInfobox = ( coordinates, design_component ) ->
	currentPlaceInfobox = design_component.copy()
	currentPlaceInfobox.opacity = 0
	current_place_name = getPlaceName( coordinates ).then( ( place ) ->
		currentPlaceInfobox.subLayersByName('place')[0].text = place.text
	)

	do ->
		infobox = addMarker( coordinates, currentPlaceInfobox )

drecodeam

mapbox_api_endpoint = 'https://api.mapbox.com/geocoding/v5/'

# Using this service to bypass CORS related issue
bypass_cors = 'https://cors-anywhere.herokuapp.com/'

# Update the place name 
getPlaceName = ( coordinates ) ->
	geocodeRequestUrl = bypass_cors + mapbox_api_endpoint +  "mapbox.places/" + coordinates[1] + "," + coordinates[0] + ".json?&access_token=" + access_token
	fetch(geocodeRequestUrl).then( (result) -> 
		result.json()

drecodeam

# Zoom in/ Zoom out with animation
moveMap = ( coordinates ) ->
	mapInstance.flyTo({
		center: [ coordinates[1], coordinates[0]],
		zoom: 16,
		speed: 1,
		curve: 1
	})

moveMap( origin )

drecodeam

# Add pulse
addPulse = ( coordinates, design_component ) ->
	heartbeatMarker = addMarker( coordinates, design_component )
	heartbeatMarker.element.animate
		size: 70
		opacity: 0
		backgroundColor: "#D9497D"
		options:
			time: 2
			curve: Bezier.easeInOut

drecodeam

map_style_dark = '<Add your map style here>'
origin =  [37.784872, -122.389752]

addMap = () ->
	window.mapLayer = new Layer
		width: Screen.width
		height: Screen.height
		name: 'mapbox_layer'
	
	window.mapLayer.ignoreEvents = false

drecodeam

# By default mapbox would show the hand cursor as opposed to default framer cursor. This is a CSS fix for that 	
mapboxCSS_fix = """
.mapboxgl-canvas-container.mapboxgl-interactive,
.mapboxgl-ctrl-nav-compass {
  cursor: inherit;
}
.mapboxgl-canvas-container.mapboxgl-interactive:active,
.mapboxgl-ctrl-nav-compass:active {
  cursor: inherit;
}