accept URL in GeoJSONSource data option

closes #669, closes #671

API.md

@@ -19,7 +19,7 @@ Option | Value | Description
 `container` | string | HTML element to initialize the map in (or element id as string)
 `minZoom` | number | Minimum zoom of the map, 0 by default
 `maxZoom` | number | Maximum zoom of the map, 20 by default
-`style` | object | Map style and data source definition, described in the [style reference](https://mapbox.com/mapbox-gl-style-spec)
+`style` | object | Map style and data source definition (either a JSON object or a JSON URL), described in the [style reference](https://mapbox.com/mapbox-gl-style-spec)
 `hash` | boolean | If `true`, the map will track and update the page URL according to map position (default: `false`)
 `interactive` | boolean | If `false`, no mouse, touch, or keyboard listeners are attached to the map, so it will not respond to input (default: `true`)
 
@@ -183,7 +183,7 @@ Create a GeoJSON data source instance given an options object with the following
 
 Option | Description
 ------ | ------
-`data` | A GeoJSON data object
+`data` | A GeoJSON data object or an URL to it. The latter is preferable in case of large GeoJSON files.
 
 ### Methods
 

debug/index.html

@@ -16,7 +16,6 @@
  <div id='map'></div>
  <!-- <script src='//cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js'></script> -->
  <script src='../dist/mapbox-gl-dev.js'></script>
- <script src='route.js'></script>
  <script src='site.js'></script>
  <!-- <script src='debug.js'></script> -->
 </body>

debug/route.js → debug/route.json

@@ -1,4 +1,4 @@
-var route = {
+{
  "type": "Feature",
  "geometry": {
  "type": "LineString",

debug/site.js

@@ -11,7 +11,7 @@ var map = new mapboxgl.Map({
 
 map.addControl(new mapboxgl.Navigation());
 
-map.addSource('geojson', new mapboxgl.GeoJSONSource({data: route}));
+map.addSource('geojson', new mapboxgl.GeoJSONSource({data: '/debug/route.json'}));
 
 // keyboard shortcut for comparing rendering with Mapbox GL native
 document.onkeypress = function(e) {

js/source/worker.js

@@ -6,7 +6,8 @@ var Actor = require('../util/actor.js'),
  tileGeoJSON = require('./tilegeojson.js'),
  Wrapper = require('./geojsonwrapper.js'),
  util = require('../util/util.js'),
- queue = require('queue-async');
+ queue = require('queue-async'),
+ ajax = require('../util/ajax.js');
 
 module.exports = Worker;
 
@@ -80,15 +81,20 @@ util.extend(Worker.prototype, {
  });
  }
 
- for (var i = 0; i < len; i++) {
- var zoom = zooms[i];
- var tiles = tileGeoJSON(data, zoom);
- for (var id in tiles) {
- q.defer(worker, id, tiles[id], zoom);
+ function tileData(err, data) {
+ if (err) throw err;
+ for (var i = 0; i < len; i++) {
+ var zoom = zooms[i];
+ var tiles = tileGeoJSON(data, zoom);
+ for (var id in tiles) {
+ q.defer(worker, id, tiles[id], zoom);
+ }
  }
+ q.awaitAll(callback);
  }
 
- q.awaitAll(callback);
+ if (typeof data === 'string') ajax.getJSON(data, tileData);
+ else tileData(null, data);
  },
 
  'query features': function(params, callback) {