Merge pull request mapbox#393 from mapbox/offline-github

Configurable MapboxAPITile + Github endpoint

API.md

@@ -1,28 +1,35 @@
-# URL API
+## Geojson.io API
+You can interact with geojson.io programmatically in two ways:
 
+* [URL parameters](#url-api)
+* [Browser console](#console-api)
+
+## URL API
 You can do a few interesting things with just URLs and geojson.io. Here are the
 current URL formats.
 
-## `map`
+### `map`
 
 Open the map at a specific location. The argument is numbers separated by `/`
 in the form `zoom/latitude/longitude`.
 
-#### Example
+#### Example:
 
 http://geojson.io/#map=2/20.0/0.0
 
-## `data=data:application/json,`
+
+### `data=data:application/json,`
 
 Open the map and load a chunk of [GeoJSON](http://geojson.org/) data from a
 URL segment directly onto the map. The GeoJSON data should be encoded
 as per `encodeURIComponent(JSON.stringify(geojson_data))`.
 
-#### Example
+#### Example:
 
 http://geojson.io/#data=data:application/json,%7B%22type%22%3A%22LineString%22%2C%22coordinates%22%3A%5B%5B0%2C0%5D%2C%5B10%2C10%5D%5D%7D
 
-## `data=data:text/x-url,`
+
+### `data=data:text/x-url,`
 
 Load GeoJSON data from a URL on the internet onto the map. The URL must
 refer directly to a resource that is:
@@ -33,21 +40,23 @@ refer directly to a resource that is:
 
 The URL should be encoded as per `encodeURIComponent(url)`.
 
-#### Example
+#### Example:
 
 http://geojson.io/#data=data:text/x-url,http%3A%2F%2Fapi.tiles.mapbox.com%2Fv3%2Ftmcw.map-gdv4cswo%2Fmarkers.geojson
 
-## `id=gist:`
+
+### `id=gist:`
 
 Load GeoJSON data from a [GitHub Gist](https://gist.github.com/), given an argument
 in the form of `login/gistid`. The Gist can be public or private, and must
 contain a file with a `.geojson` extension that is valid GeoJSON.
 
-#### Example
+#### Example:
 
 http://geojson.io/#id=gist:tmcw/e9a29ad54dbaa83dee08&map=8/39.198/-76.981
 
-## `id=github:`
+
+### `id=github:`
 
 Load a file from a GitHub repository. You must have access to the file, and
 it must be valid GeoJSON. 
@@ -56,17 +65,18 @@ The url is in the form:
 
     login/repository/blob/branch/filepath
 
-#### Example
+#### Example:
 
 http://geojson.io/#id=github:tmcw/dc-wifi-social/blob/master/bars.geojson&map=14/38.9140/-77.0302
 
-# Console API
+## Console API
 
 [Pop open your browser console](http://debugbrowser.com/) and see the beautiful
 examples: geojson.io has started to expose a subset of its inner workings for
 you to mess around with:
 
-## `window.api.map`
+
+### `window.api.map`
 
 The [Leaflet](http://leafletjs.com/) map that you see and use on the site. See
 the [Leaflet API](http://leafletjs.com/reference.html) for all the things you
@@ -78,7 +88,7 @@ For instance, you could add another map layer:
 window.api.map.addLayer(L.tileLayer('http://tile.stamen.com/watercolor/{z}/{x}/{y}.jpg'))
 ```
 
-## `window.api.data`
+### `window.api.data`
 
 The data model. See the [code to get an idea of how it works](https://github.com/mapbox/geojson.io/blob/gh-pages/src/core/data.js#L48-L90) -
 you'll want to use stuff like `data.set({ map: { .. your geojson map information .. })`

Makefile

@@ -1,9 +1,10 @@
 BROWSERIFY = node_modules/.bin/browserify
 SMASH = node_modules/.bin/smash
+CLEANCSS = node_modules/.bin/cleancss
 UGLIFY = node_modules/.bin/uglifyjs
 LIBS = $(shell find lib -type f -name '*.js')
 
-all: dist/site.js dist/site.mobile.js dist/delegate.js
+all: dist/site.js dist/site.mobile.js dist/delegate.js lib/mapbox.js/latest lib/mapbox.js/latest/mapbox.js
 
 node_modules: package.json
 	npm install
@@ -54,6 +55,14 @@ dist/lib.js: dist dist/d3.js $(LIBS)
 dist/delegate.js: src/delegate.js
 	$(BROWSERIFY)  src/delegate.js > dist/delegate.js
 
+lib/mapbox.js/latest:
+	mkdir -p lib/mapbox.js/latest
+
+lib/mapbox.js/latest/mapbox.js: node_modules/mapbox.js/*
+	$(BROWSERIFY) node_modules/mapbox.js > lib/mapbox.js/latest/mapbox.js
+	$(UGLIFY) -o lib/mapbox.js/latest/mapbox.js lib/mapbox.js/latest/mapbox.js
+	$(CLEANCSS) node_modules/mapbox.js/theme/style.css -o lib/mapbox.js/latest/mapbox.css
+
 dist/site.js: dist/lib.js src/index.js $(shell $(BROWSERIFY) --list src/index.js)
 	$(BROWSERIFY) --noparse=src/source/local.js -t brfs -r topojson  src/index.js > dist/site.js
 

css/site.css

@@ -394,6 +394,10 @@ div.children a {
     font-size:18px;
 }
 .prose h3 {
+    font-weight:bold;
+    margin-top:14px;
+}
+.prose h4 {
     font-weight:bold;
     margin-top:10px;
 }
@@ -412,6 +416,18 @@ div.children a {
 .prose strong {
     font-weight:bold;
 }
+.prose code {
+    font-family:Menlo, Bitstream Vera Sans Mono, Monaco, Consolas, monospace;
+    white-space: pre-wrap;
+    background:rgba(0,0,0,0.025);
+    font-size:14px;
+    line-height:20px;
+    padding:3px;
+    border-radius: 3px;
+}
+.prose h3 code {
+    font-size:16px;
+}
 
 /* Modals
 ------------------------------------------------------- */

data/help.html

@@ -34,7 +34,7 @@ <h3>I want to use my map everywhere</h3>
 
 <h3>I'm a coder</h3>
 
-<p><a href='https://github.com/mapbox/geojson.io#goes-great-with' target='_blank'>geojson.io has an array of cli tools</a>
+<p><a href='#geojson-io-api'>geojson.io has an array of cli tools</a>
 that make it easy to go from a GeoJSON file on your computer to geojson.io.
 
 <h3>Protips?</h3>

data/share.html

@@ -29,9 +29,9 @@
     background-color:#f7f7f7;
 }
   </style>
-  <script src='//api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.js'></script>
-  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
-  <link href='//api.tiles.mapbox.com/mapbox.js/v1.6.2/mapbox.css' rel='stylesheet' />
+  <script src='../lib/mapbox.js/latest/mapbox.js'></script>
+  <script src='../lib/jquery-1.10.2.min.js' ></script>
+  <link href='../lib/mapbox.js/latest/mapbox.css' rel='stylesheet' />
 </head>
 <body>
 <div id='map'></div>