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>
@sethburtonhall
Copy link

yep, that did it.

I hate the long URL in require though. It would be nice if you could do the same things as paths, then just require "mapbox"

"jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
"fitText": "vendor/fittext/fittext",
"fitVids": "vendor/fitvids/fitvids",
"leaflet": "http://cdn.leafletjs.com/leaflet-0.5.1/leaflet",

@sethburtonhall
Copy link

Here is the final code:

require.config({
  paths: {
    "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
    "fitText": "vendor/fittext/fittext",
    "fitVids": "vendor/fitvids/fitvids",
    "leaflet": "http://cdn.leafletjs.com/leaflet-0.5.1/leaflet",
  },
  shim: {
      'http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js': {
          exports: 'L'
      }
  }
});

// MapBox
require(['leaflet', 'http://api.tiles.mapbox.com/mapbox.js/v1.0.2/mapbox.js'], function(leaflet, mapBox) {
  var map = L.mapbox.map('map', 'examples.map-4l7djmvo')
      .setView([40, -74.50], 9);
});

@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