drecodeam

var $win = $(window),
    w = 0,h = 0,
    rgb = [],
    getWidth = function() {
        w = $win.width();
        h = $win.height();
    };

$win.resize(getWidth).mousemove(function(e) {

drecodeam

[{
  "name" : "name of the client",
  "logo" : "image name for the client logo",
  "propertyID" : "Property where the client sits in ( IRIS/NIRVANA/VERITAS )",
  "Quality" : "Numeric ( 1-5 )"
}]

drecodeam

{
  "id" : "sk_54d7d1b",//ID
  "distance" : "27500", //Metres,
  "time" : "1290" //Seconds
}

drecodeam

#Initialize the map 
myMap = new FramerTrack
	accessToken : access_token
	center: [story[0].coordinates[1],story[0].coordinates[0]]
	zoom: 16
	pitch: 80,
	bearing: 100,
	hash: true
	map_style : map_style

drecodeam

access_token = 'pk.eyJ1IjoiZHJlY29kZWFtIiwiYSI6Ikt3bGhpVzgifQ.3Fo6CYjvLz5usD-DOgTz9A'
map_style_dark = 'mapbox://styles/drecodeam/cjcrdrmll61vv2rphjw7evlht'
origin =  [37.784872, -122.389752]
destination = [37.817910, -122.279143]

#Initialize the map 
myMap = new MapboxJS
	accessToken: access_token
	center: [origin[1], origin[0]]
	zoom: 16

drecodeam

# Function to insert a script in our prototype
insertScript = (url) ->
  lib = Utils.domLoadDataSync url
  script = document.createElement "script"
  script.type = "text/javascript"
  script.innerHTML = lib

  head = document.getElementsByTagName("head")[0]
  head.appendChild script
  

drecodeam

# Add a marker for a place 
addMarker = ( coordinates, design_component ) ->
  marker = new mapboxgl.Marker( design_component._element ).setLngLat( [ coordinates[1], coordinates[0] ]).addTo( mapInstance )
  # Save the reference of original framer design component for animations and other interactions	
  marker.element = design_component
  return marker

initialMarker = addMarker( origin, movement_marker )

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

# Add a marker for a place 
addInfobox = ( coordinates, design_component ) ->
	currentPlaceInfobox = design_component.copy()
	currentPlaceInfobox.opacity = 0

	# You can change the text inside the infobox like this	
	currentPlaceInfobox.subLayersByName('place')[0].text = 'Blue bottle coffee'
	currentPlaceInfobox.subLayersByName('duration')[0].text = 'Arrived here at 10:24am'

	do ->

drecodeam

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

moveMap( origin )