Using CoffeeScript to make a map

Mapbox.js is just as easy to use from the CoffeeScript language.

<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Using CoffeeScript to make a map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v3.1.0/mapbox.css' rel='stylesheet' />
<style>
  body { margin:0; padding:0; }
  #map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>

<script src='//cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js'></script>
<script type='text/coffeescript'>
L.mapbox.accessToken = '<your access token here>'
# Mapbox.js can easily be used in CoffeeScript, and use
# all fancy CoffeeScript functionality
map = L.mapbox.map 'map', 'mapbox.streets'
geocoder = L.mapbox.geocoder 'mapbox.places'

# for instance, in CoffeeScript we dont need to use
# parenthesis for functions or semicolons at the end of lines
map.setView [40, -74.50], 3

# defining a function that uses the geocoder to put a marker
# on a place, defined by its name
add = (placename) ->
  geocoder.query placename, (error, result) ->
    L.marker(result.latlng).addTo(map)

add place for place in ['Washington, DC', 'San Francisco', 'Detroit, MI']
</script>
to create your own custom map and use it in this example.
Use this example by copying its source into your own HTML page and replacing the Map ID with one of your own from your projects. Having trouble with JavaScript? Try out Codecademy or contact our support team.
Copy example