mamezito-zz

{"v":"4.12.0","fr":24,"ip":0,"op":132,"w":740,"h":800,"nm":"iso","ddd":0,"assets":[{"id":"comp_0","layers":[{"ddd":0,"ind":1,"ty":0,"nm":"Precomp. 3","refId":"comp_1","sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":0,"s":[539,635.5,0],"e":[539,563.5,0],"to":[-0.08334591984749,-21.5,0],"ti":[0,0.16666667163372,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":4,"s":[539,563.5,0],"e":[664,563.5,0],"to":[0,-0.16666667163372,0],"ti":[-0.33333334326744,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":8,"s":[664,563.5,0],"e":[664,636.5,0],"to":[0.33333334326744,0,0],"ti":[0,-0.16666667163372,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0.167,"y":0.167},"n":"0p833_0p833_0p167_0p167","t":12,"s":[664,636.5,0],"e":[536,636.5,0],"to":[0,0.16666667163372,0],"ti":[0.33333334326744,0,0]},{"i":{"x":0.833,"y":0.833},"o":{"x":0

mamezito-zz

import * as React from "react";
import { PropertyControls, ControlType } from "framer";
import { Button } from "@bulb/design";

interface Props {
  text: string;
  width: number;
  height: number;
  fullWidth: boolean;
}

mamezito-zz

# use build3D method on mapobject load, mind that  bearing, hash and pitch should be set at mapbox initialization
myMap = new MapboxJS
  accessToken: mapboxToken	
  style: styles.light
  zoom: 12
  center: originPoint
  pitch: 45,
  bearing: -17.6,
  hash: true
myMap.mapbox.on 'load', ->

mamezito-zz

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



mapboxToken='your api key'

mamezito-zz

# use animateOnRoute function, pass marker object there, end point, and distance step - in this case 0.01, tweek this number to make animation smooth depending on size of the route between points
animateOnRoute(customMarker, point1, 0.01)

mamezito-zz

myMap.buildRoute(point1, point2, 9, "#ffcc00")
#where myMap - is your map object name. Point1, Point2 are your start and end points of route, last two attributes are strokeWidth and strokeColor

mamezito-zz

point2=["-0.089039","51.526553"]

startPoint=new Layer
  size:20
  borderRadius:20
  
customMarker=new CustomMarker
  target:startPoint
  point:point2

mamezito-zz

point2=["-0.089039","51.526553"]

simpleMarker=new Marker
  size:20
  point:point2
  borderRadius:50
  backgroundColor:"#ffcc00"

mamezito-zz

{MapboxJS, CustomMarker, Marker, animateOnRoute} = require 'MapboxJS'

myMap = new mapboxJS
  accessToken: 'insertHereYourAccessToken'

mamezito-zz

if pageComponent.x<350
  layerA.x = Utils.modulate(pageComponent.x,[0,350],[0,100],true)
 else if pageComponent.x>350
  layerA.x = Utils.modulate(pageComponent.x,[350,1050],[100,1000],true)