Framer Mapbox

gistfile1.txt

#initial setup
#modules
{MapboxJS, CustomMarker, Marker, animateOnRoute} = require "mapbox-js/MapboxJS"



mapboxToken='your api key'


Canvas.backgroundColor = "#000"

Framer.Defaults.Animation=
	time: 0.5
	curve: Spring(0.6)


originPoint=["-0.118974", "51.531978"]
newPoint=["-0.089039","51.526553"]


myMap = new MapboxJS
	accessToken: mapboxToken	
	zoom: 12
	center: originPoint
	pitch: 45,
	bearing: -17.6
	hash: true
	
	
#creating 3d map
myMap.mapbox.on 'load', ->
	myMap.build3d()
myMap.wrapper.parent=home

#creating custom marker from framer design layer
customMarker=new CustomMarker
	target:currentLocation
	point:newPoint

#creating framer layer as marker
originMarker=new Marker
	size:20
	point:originPoint
	borderRadius:50
	backgroundColor:"#fff"
	shadowColor:"rgba(0,0,0,0.2)"
	shadowBlur:10


#animating marker
scaleUp = new Animation currentLocation,
  size: 30
  options:
    time: 1
    curve: 'ease'
 scaleUp.start()
scaleDown = scaleUp.reverse()

scaleUp.onAnimationEnd -> scaleDown.start()
scaleDown.onAnimationEnd -> scaleUp.start()

#building route between two points
myMap.buildRoute(originPoint, newPoint, 9, "#ffcc00")

Utils.delay 3, ->
	#animating map to location
	myMap.flyTo(newPoint)	
	#animating marker to new point
	animateOnRoute(customMarker, originPoint, 0.01)