Skip to content

Instantly share code, notes, and snippets.

@rjmackay

rjmackay/main.js

Created June 12, 2013 01:10
Show Gist options
  • Save rjmackay/5762195 to your computer and use it in GitHub Desktop.
Save rjmackay/5762195 to your computer and use it in GitHub Desktop.
Download ZIP
Mapbox + requirejs example
Raw
main.js
requirejs.config({
shim: {
'http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js': {
exports: 'L'
}
}
});
require(["http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js"], function(mapbox) {
var map = L.mapbox.map('map', 'examples.map-4l7djmvo')
.setView([40, -74.50], 9);
});
Raw
map.html
<!DOCTYPE html>
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no' />
<!-- data-main attribute tells require.js to load
scripts/main.js after require.js loads. -->
<script data-main="main" src="http://requirejs.org/docs/release/2.1.6/minified/require.js"></script>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.css' rel='stylesheet' />
<!--[if lte IE 8]>
<link href='http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.ie.css' rel='stylesheet' >
<![endif]-->
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
</body>
</html>
@sobos
Copy link

sobos commented Feb 19, 2014

Thank you very much for this. The following simplified version seems to be working too:

require.config({
paths: {
"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min",
"fitText": "/js/vendor/jquery.fittext",
"fitVids": "/js/vendor/jquery.fitvids",
"mapbox": "https://api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox"
}
});

require(['mapbox'], function() {
var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
.setView([40, -74.50], 9);
});

@denisinla
Copy link

Completely cleaned up:

require.config({
  paths: {
  "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min",
  "fitText": "/js/vendor/jquery.fittext",
  "fitVids": "/js/vendor/jquery.fitvids",
  "mapbox": "//api.tiles.mapbox.com/mapbox.js/v1.6.1/mapbox"
  }
});

require(['mapbox'], function() {
  var map = L.mapbox.map('map', 'examples.map-9ijuk24y')
  .setView([40, -74.50], 9);
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment