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

# 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 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

# 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

# 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;
}

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