ajmalafif · November 21, 2019 17:51 · Apr 25, 2018 · Apr 25, 2018
diff --git a/gistfile1.txt b/gistfile1.txt
@@ -5,10 +5,7 @@
 
 
 
-
-
-#please use your API key here, or u ll blow my quota :)	
-mapboxToken='pk.eyJ1IjoibWFtZXppdG8iLCJhIjoiY2pkb2p6czk1MGpqejJxbnJtZGIwaXpwZSJ9.IE7dh8a6Jvx1Zra419eF5Q'
+mapboxToken='your api key'
 
 
 Canvas.backgroundColor = "#000"

diff --git a/gistfile1.txt b/gistfile1.txt
@@ -0,0 +1,79 @@
+
+#initial setup
+#modules
+{MapboxJS, CustomMarker, Marker, animateOnRoute} = require "mapbox-js/MapboxJS"
+
+
+
+
+
+#please use your API key here, or u ll blow my quota :)	
+mapboxToken='pk.eyJ1IjoibWFtZXppdG8iLCJhIjoiY2pkb2p6czk1MGpqejJxbnJtZGIwaXpwZSJ9.IE7dh8a6Jvx1Zra419eF5Q'
+
+
+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)
+
+
+
+
+
+