Mapbox Framer Module

Simplest way to integrate Mapbox maps on your prototypes; you can define size, zoom, center point and even it lets you to use the full API. Obviously you need an active internet connection to load the maps.

Installation

Manual

1. Copy the MapboxJS.coffee and HTTPRequest.coffee files to the ‘modules’ folder inside your Framer project
2. Add this line on the top

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

How to use

Init the map with your accessToken, generate it on Mapbox website, it's free. Without this, the map won't work.

myMap = new MapboxJS
  accessToken: 'insertHereYourAccessToken'

Customization

• style String : The map's style url. (default mapbox://styles/mapbox/streets-v9)
• center Array : The inital geographical centerpoint of the map. (default [-3.703, 40.409], is Madrid) *
• zoom Integer : The initial zoom level of the map. (default 13.9)
• size Integer or Object : Size of the map, set width and height using { width:640, height: 480 } or use a single number to create a square. (default Screen.size)
• pitch Integer : The initial pitch (tilt) of the map, measured in degrees away from the plane of the screen (0-60).
• bearing Integer : The initial bearing (rotation) of the map, measured in degrees counter-clockwise from north.
• x : Initial X position (default 0)
• y : Initial Y position (default 0)
• interactive Boolean : If false , no mouse, touch, or keyboard listeners will be attached to the map, so it will not respond to interaction. (default true)

* Mapbox GL uses longitude, latitude coordinate order (as opposed to latitude, longitude) to match GeoJSON.

Methods

• .wrapper : Returns the layer that contains the map
• .mapbox : Returns the Mapbox instance, useful to interact with the API
• .buildRoute: (point1, point2, linewidth, linecolor) : Draws a line route between two points on map, using response from mapbox direction search API
• .flyTo(point) : Animates map to new location

#Markers There are two classes for Markers, one used to create new Framer layer object as marker at certain point, and other one - customMarker is using existing Framer layer to serve as mapbox marker at certain point

#animation Use animateOnRoute(markerObject, newPoint, distanceStep) function to animate markerObject to newPoint with distanceStep for animation

Interact with Mapbox API

Read Mapbox GL JS documentation to learn how to use the API.

Some extra elements require to load other Mapbox JS files, for example if you want to add a search box (geocoder), this example could help you.

Add a marker layer with animation

#some location point
point1=["-0.118974", "51.531978"]
point2=["-0.089039","51.526553"]

# Create the map
myMap = new mapboxJS
  accessToken: 'insertHereYourAccessToken'
  style: 'yourCustomStyleURL'
  center: point1

# Create the maker as a Layer and put it to certain point on map
simpleMarker=new Marker
  size:20
  point:point2
  borderRadius:50
  backgroundColor:"#ffcc00"

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

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

Add a custom marker from framer object

# if u have an object in designtab or in code, pass target name as target attribute to custom marker
customMarker=new CustomMarker
  target:startPoint
  point:point2

Build direction route between two points

#using buildRoute method  pass both points, strokeWidth and strokeColor as attribute
myMap.buildRoute(point1, point2, 9, "#ffcc00")

animate marker to point

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

animate map to certain point

# use flyTo method and pass end point 
myMap.flyTo(point2)

create 3D map

# 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', ->
  myMap.build3d()

Sample project

Framer prototype

Contact & Credits

You can find us on Twitter @NocheVolta, @mamezito

Inspirated on this project made by John Sherwin.

This project is not realted with Mapbox company.