v8 Omnibus

API.md

@@ -1,4 +1,48 @@
 
+### `createSprite(src, [pixelRatio=1], callback)`
+
+Generate a sprite from an array of named images
+
+### Parameters
+
+| parameter        | type              | description                           |
+| ---------------- | ----------------- | ------------------------------------- |
+| `src`            | Array\.\<String\> | an array of file paths                |
+| `[pixelRatio=1]` | Number            | _optional:_ whether the sprite is 2x. |
+| `callback`       | Function          | called with (err, metadata, image)    |
+
+
+
+**Returns** ``, nothing
+
+
+### `diffStyles([before], after)`
+
+Diff two stylesheet
+
+Creates semanticly aware diffs that can easily be applied at runtime.
+Operations produced by the diff closely resemble the mapbox-gl-js API. Any
+error creating the diff will fall back to the 'setStyle' operation.
+
+Example diff:
+[
+    { command: 'setConstant', args: ['@water', '#0000FF'] },
+    { command: 'setPaintProperty', args: ['background', 'background-color', 'black'] }
+]
+
+
+### Parameters
+
+| parameter  | type | description                            |
+| ---------- | ---- | -------------------------------------- |
+| `[before]` |      | _optional:_ stylesheet to compare from |
+| `after`    |      | stylesheet to compare to               |
+
+
+
+**Returns** `rra`, list of changes
+
+
 ### `migrate(style)`
 
 Migrate a Mapbox GL Style to the latest version.

CHANGELOG.md

@@ -1,15 +1,64 @@
+## 8.1.0
+
+v8.0.0 styles are fully compatible with v8.1.0.
+
+* [BREAKING] Simplified layout/paint layer property types to more closely align
+  with v7 types.
+* Fixed migration script compatibility with newer versions of Node.js and io.js
+* Removed `constants` from schema, they were deprecated in v8
+* Added style diff utility to generate semantic deltas between two stylesheets
+* Added `visibility` property to `circle` layer type
+* Added `pitch` property to stylesheet
+
+## 8.0.0
+
+Introduction of Mapbox GL style specification v8. To migrate a v7 style to v8,
+use the gl-style-migrate script as described in the README.
+
+* [BREAKING] The value of the `text-font` property is now an array of
+  strings, rather than a single comma separated string.
+* [BREAKING] Renamed `symbol-min-distance` to `symbol-spacing`.
+* [BREAKING] Renamed `background-image` to `background-pattern`.
+* [BREAKING] Renamed `line-image` to `line-pattern`.
+* [BREAKING] Renamed `fill-image` to `fill-pattern`.
+* [BREAKING] Renamed the `url` property of the video source type to `urls`.
+* [BREAKING] Coordinates in video sources are now specified in [lon, lat] order.
+* [BREAKING] Removed `text-max-size` and `icon-max-size` properties; these
+  are now calculated automatically.
+* [BREAKING] `text-size` and `icon-size` are now layout properties instead of paint properties.
+* [BREAKING] Constants are no longer supported. If you are editing styles by
+  hand and want to use constants, you can use a preprocessing step with a tool
+  like [ScreeSS](https://github.com/screee/screess).
+* [BREAKING] The format for `mapbox://` glyphs URLs has changed; you should
+  now use `mapbox://fonts/mapbox/{fontstack}/{range}.pbf`.
+* [BREAKING] Reversed the priority of layers for calculating label placement:
+  labels for layers that appear later in the style now have priority over earlier
+  layers.
+* Added a new `image` source type.
+* Added a new `circle` layer type.
+* Default map center location can now be set in the style.
+* Added `mapbox://` sprite URLs `mapbox://sprite/{user | "mapbox"}/{id}`
+
+## 7.5.0
+
+* Added gl-style-composite script, for auto-compositing sources in a style.
+
 ## 7.4.1
 
 * Use JSON.stringify for formatting instead of js-beautify
 
 ## 7.0.0
 
+Introduction of Mapbox GL style specification v7.
+
 * [BREAKING] Improve dashed lines (#234)
 * [BREAKING] Remove prerendered layers (#232)
 * Explicit visibility property (#212)
 * Functions for all properties (#237)
 
-## 6.0.0
+## 6.0.0 (Style spec v6)
+
+Introduction of Mapbox GL style specification v6.
 
 * [BREAKING] New filter syntax (#178)
 * [BREAKING] Line gap property (#131)

README.md

@@ -28,10 +28,10 @@ Will validate the given style JSON and print errors to stdout. Provide a
 ### Migrations
 
 This repo contains scripts for migrating GL styles of any version to the latest version
-(currently v5). Migrate a style like this:
+(currently v8). Migrate a style like this:
 
 ```bash
-$ gl-style-migrate bright-v0.json > bright-v5.json
+$ gl-style-migrate bright-v7.json > bright-v8.json
 ```
 
 To migrate a file in place, you can use the `sponge` utility from the `moreutils` package:

bin/gl-style-composite

@@ -0,0 +1,10 @@
+#!/usr/bin/env node
+
+'use strict';
+
+var fs = require('fs'),
+    argv = require('minimist')(process.argv.slice(2)),
+    format = require('../').format,
+    composite = require('../').composite;
+
+console.log(format(composite(JSON.parse(fs.readFileSync(argv._[0])))));

docs/_generate/index.html

@@ -207,8 +207,8 @@ <h2><a href='#sources' title='link to sources'>Sources</a></h2>
 "mapbox-streets": {
   "type": "vector",
   "tiles": [
-    "http://a.example.com/tiles/{z}/{x}/{y}.png",
-    "http://b.example.com/tiles/{z}/{x}/{y}.png"
+    "http://a.example.com/tiles/{z}/{x}/{y}.pbf",
+    "http://b.example.com/tiles/{z}/{x}/{y}.pbf"
   ],
   "maxzoom": 14
 }

docs/_layouts/default.html

@@ -1,18 +1,20 @@
 ---
 footer:
   mapbox:
-    - title: Design
-      path: /design
+    - title: Maps
+      path: /maps
     - title: Data
       path: /data-platform
     - title: Showcase
       path: /showcase
-    - title: Enterprise
-      path: /enterprise
-    - title: Plans
+    - title: Products
+      path: /products
+    - title: Pricing
       path: /plans
     - title: Blog
-      path: /blog
+      path: /blog  
+    - title: Design
+      path: /design
   aboutus:
     - title: Our story
       path: /about
@@ -83,6 +85,7 @@
   <meta http-equiv='X-UA-Compatible' content='IE=edge' />
   <meta name='robots' content='{% if page.hidden %}noindex{% else %}index{% endif %}'/>
   <meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
+  <meta name="apple-mobile-web-app-capable" content="yes" />
   {% if page.description %}<meta name='description' content='{{page.description | strip_html}}'/>{% endif %}
   <title>{% if page.title == 'Mapbox' %}{{page.title}} | Design and publish beautiful maps{% else %}{{page.title}} | Mapbox{% endif %}</title>
 
@@ -95,7 +98,7 @@
   <meta class='swiftype' name='category' data-type='string' content='{{page.category}}' />{% endif %}{% if page.author %}
   <meta class='swiftype' name='author' data-type='string' content='{{page.author}}' />{% endif %}{% if page.excerpt %}
   <meta class='swiftype' name='excerpt' data-type='string' content='{{ page.excerpt | strip_html | strip_newlines | replace:"'","&lsquo;" | replace:"'","&lsquo;" | truncatewords: 30 }}' />{% endif %}
-  {% if site.baseurl == '/mapbox.js' %}{% if site.mapboxjs != page.version and page.version != 'latest' %}<meta name='robots' content='noindex'>{% endif %}{% endif %}
+  {% if site.baseurl == '/mapbox.js' %}{% assign version = page.version | replace:'.','', | replace:'v','' | plus: 0 %}{% if version < 200 %}<meta http-equiv='refresh' content='0;url={{site.url}}{{site.baseurl}}/api/{{site.mapboxjs}}/' />{% endif %}{% if site.mapboxjs != page.version and page.version != 'latest' %}<meta name='robots' content='noindex'>{% endif %}{% endif %}
 
   {% if page.card %}
   <meta name='twitter:site' content='@Mapbox' />
@@ -129,7 +132,10 @@
   <!--[if IE 9]><link href='{{site.url}}/css/site-ie9.css' rel='stylesheet' /><![endif]-->
   <link rel='shortcut icon' href='{{site.url}}/img/favicon.ico' type='image/x-icon' />
   <link rel='alternate' type='application/rss+xml' title='RSS' href='{{site.url}}/blog/blog.rss' />
+
+  {% unless page.nomapboxjs %}
   <link href='{% if site.mapboxjsbase %}{{site.mapboxjsbase}}{% else %}https://api.tiles.mapbox.com/mapbox.js/{% if site.mapboxjs %}{{site.mapboxjs}}{% else %}v1.6.5{% endif %}{% endif %}/mapbox.css' rel='stylesheet' />
+  {% endunless %}
 
   <!--[if lt IE 9 ]><script src='{{site.url}}/js/redirect-ie.js'></script><![endif]-->
   <script src='https://js.stripe.com/v2/'></script>
@@ -141,13 +147,15 @@
   Stripe.setPublishableKey(window.location.hostname.indexOf('mapbox.com') !== -1 ?
     'pk_live_hI6mmOTIg7KkywK6vo3vJvpk' : 'pk_test_gmIyREg3sKzAiyMkAEeCsxUG');
   </script>
+  {% unless page.nomapboxjs %}
   <script src='{% if site.mapboxjsbase %}{{site.mapboxjsbase}}{% else %}https://api.tiles.mapbox.com/mapbox.js/{% if site.mapboxjs %}{{site.mapboxjs}}{% else %}v1.6.5{% endif %}{% endif %}/mapbox.js'></script>
+  {% endunless %}
 
   <script>
   window.mapbox_api = '{{site.api}}';
   window.mapbox_tileApi = '{{site.tileApi}}';
   window.mapbox_accessToken = '{{site.accessToken}}' || 'pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q'
-  if (L.mapbox.VERSION[0] === '2') {
+  if (typeof L !== 'undefined' && L.mapbox.VERSION[0] === '2') {
       L.mapbox.accessToken = window.mapbox_accessToken;
       L.mapbox.config.FORCE_HTTPS = true;
       L.mapbox.config.HTTPS_URL = window.mapbox_tileApi + '/v4';
@@ -158,11 +166,14 @@
   {% if page.head %}{{page.head}}{% endif %}
 </head>
 <body class='{{page.class}} {{page.options}}{% if page.blog_featured == true %} bleed{% endif %}'>
+<!-- Google Tag Manager -->
+<noscript><iframe src="//www.googletagmanager.com/ns.html?id=GTM-PQR37Z" height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript> <script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start': new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PQR37Z');</script>
+<!-- End Google Tag Manager -->
 <div class='page-content'>
 {% if page.app %}
 {{content}}
 {% else %}
-<div class='masthead show-in-loaded col12 clearfix {% unless page.options contains 'bleed' %}fill-blue{% endunless %} {% unless page.options contains 'light' %}dark{% endunless %}' data-swiftype-index='false'>
+<div class='masthead show-in-loaded col12 clearfix {% unless page.options contains 'bleed' %}fill-blue{% endunless %} {% unless page.options contains 'light' %}dark{% endunless %} {% if page.title == 'Mapbox' %}home-nav{% endif %}' data-swiftype-index='false'>
   <div class='limiter clearfix'>
     <nav class='col12 text-right pad2y contain animate clearfix noprint'>
       <a class='fl mb-logo' href='/'></a>

docs/index.html

@@ -529,8 +529,8 @@ <h2><a href='#sources' title='link to sources'>Sources</a></h2>
 "mapbox-streets": {
   "type": "vector",
   "tiles": [
-    "http://a.example.com/tiles/{z}/{x}/{y}.png",
-    "http://b.example.com/tiles/{z}/{x}/{y}.png"
+    "http://a.example.com/tiles/{z}/{x}/{y}.pbf",
+    "http://b.example.com/tiles/{z}/{x}/{y}.pbf"
   ],
   "maxzoom": 14
 }
@@ -1546,7 +1546,7 @@ <h4 class='pad1y'><a href='#layout_symbol' title='link to layout: symbol' class=
     </span>
   </div>
 
-  <div class='small pad2x'>If true, text can be shown without its corresponding icon.</div>
+  <div class='small pad2x'>If true, the symbol will appear without its icon, in spaces where the icon would make it too large to fit.</div>
 
 </div>
 
@@ -2248,7 +2248,7 @@ <h4 class='pad1y'><a href='#layout_symbol' title='link to layout: symbol' class=
     </span>
   </div>
 
-  <div class='small pad2x'>If true, icons can be shown without their corresponding text.</div>
+  <div class='small pad2x'>If true, the symbol will appear without its text, in spaces where the text would make it too large to fit.</div>
 
 </div>
 

index.js

@@ -1,7 +1,3 @@
-exports.v2 = require('./reference/v2.json');
-exports.v3 = require('./reference/v3.json');
-exports.v4 = require('./reference/v4.json');
-exports.v5 = require('./reference/v5.json');
 exports.v6 = require('./reference/v6.json');
 exports.v7 = require('./reference/v7.json');
 exports.v8 = require('./reference/v8.json');
@@ -10,4 +6,6 @@ exports.latest = require('./reference/latest');
 exports.format = require('./lib/format');
 exports.migrate = require('./lib/migrate');
 exports.validate = require('./lib/validate');
+exports.composite = require('./lib/composite');
 exports.createSprite = require('./lib/create_sprite');
+exports.diff = require('./lib/diff');

lib/composite.js

@@ -0,0 +1,42 @@
+'use strict';
+
+module.exports = function (style) {
+    var styleIDs = [],
+        sourceIDs = [];
+
+    for (var id in style.sources) {
+        var source = style.sources[id];
+
+        if (source.type !== "vector")
+            continue;
+
+        var match = /^mapbox:\/\/(.*)/.exec(source.url);
+        if (!match)
+            continue;
+
+        styleIDs.push(id);
+        sourceIDs.push(match[1]);
+    }
+
+    if (styleIDs.length < 2)
+        return style;
+
+    styleIDs.forEach(function (id) {
+        delete style.sources[id];
+    });
+
+    var compositeID = sourceIDs.join(",");
+
+    style.sources[compositeID] = {
+        "type": "vector",
+        "url": "mapbox://" + compositeID
+    };
+
+    style.layers.forEach(function (layer) {
+        if (styleIDs.indexOf(layer.source) >= 0) {
+            layer.source = compositeID;
+        }
+    });
+
+    return style;
+};