Merge remote-tracking branch 'origin/mb-pages'

mapbox · May 2, 2017 · 8601440 · 8601440
2 parents b45a683 + 1c2e065
commit 8601440
Show file tree

Hide file tree

Showing 15 changed files with 133 additions and 98 deletions.
diff --git a/docs/_includes/quickstart-bundler.html b/docs/_includes/quickstart-bundler.html
@@ -20,4 +20,4 @@
     style: 'mapbox://styles/mapbox/streets-v9'
 });
 {% endhighlight %}{% endcopyable %}
-<div>
+</div>
diff --git a/docs/_includes/quickstart-csp.html b/docs/_includes/quickstart-csp.html
@@ -0,0 +1,17 @@
+<h2 class='strong' id='csp-directives'>CSP Directives</h2>
+
+<p>As a mitigation for Cross-Site Scripting and other types of web security vulnerabilities, you may use a
+    <a href='https://developer.mozilla.org/en-US/docs/Web/Security/CSP'>Content Security Policy (CSP)</a>
+    to specify security policies for your website. If you do, Mapbox GL JS requires the following CSP
+    directives:</p>
+<pre>
+<code>child-src blob: ;
+img-src data: blob: ;
+script-src 'unsafe-eval' ;</code>
+</pre>
+
+<p>Requesting styles from Mapbox or other services will require additional
+    directives. For Mapbox, you can use this <code>connect-src</code> directive:</p>
+<pre>
+<code>connect-src https://*.tiles.mapbox.com https://api.mapbox.com</code>
+</pre>
diff --git a/docs/_layouts/default.html b/docs/_layouts/default.html
diff --git a/docs/_posts/examples/3400-01-25-mapbox-gl-draw.html b/docs/_posts/examples/3400-01-25-mapbox-gl-draw.html
@@ -37,8 +37,8 @@
 </style>
 
 <script src='https://api.tiles.mapbox.com/mapbox.js/plugins/turf/v3.0.11/turf.min.js'></script>
-<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.0/mapbox-gl-draw.js'></script>
-<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.0/mapbox-gl-draw.css' type='text/css'/>
+<script src='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.4/mapbox-gl-draw.js'></script>
+<link rel='stylesheet' href='https://api.mapbox.com/mapbox-gl-js/plugins/mapbox-gl-draw/v0.17.4/mapbox-gl-draw.css' type='text/css'/>
 <div id='map'></div>
 <div class='calculation-box'>
     <p>Draw a polygon using the draw tools.</p>

diff --git a/docs/_theme/index.hbs b/docs/_theme/index.hbs
@@ -74,43 +74,57 @@ category: api
   <div class='contain margin3 col9'>
     <div class='round doc clip space-bottom4 fill-white'>
       <section class='pad4 contain'>
-      <h1 class=''>Mapbox GL JS</h1>
-      <div class='pad1y quiet small'>Current version: <span class='round fill-light pad0'><a class='' href='https://github.com/mapbox/mapbox-gl-js/releases'>mapbox-gl.js v{{site.data.package.version}}</a></span></div>
-      <div class='prose space-bottom2'>
-        <p class='space-bottom2 pad1y'>Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps from <a href='{{site.url}}/help/define-vector-tiles'>vector tiles</a> and <a href='{{site.baseurl}}/style-spec'>Mapbox styles</a>.
-        It is part of the <a href='https://github.com/mapbox/mapbox-gl'>Mapbox GL ecosystem</a>, which includes <a href='{{site.url}}/mobile/'>Mapbox Mobile</a>, a compatible renderer written in C++ with bindings for desktop and mobile platforms.</p>
-        <div class='col12 fill-light round pad2 clearfix space-top2'>
-        <div class='space-bottom2 space-left1 space-top1 contain'>
-          <div class='icon inline dark pad0 round fill-green space-bottom1 github space-right1'></div>
-          <div class='pin-left pad0x space-left4'>
-            <a class='block line-height15' href='https://github.com/mapbox/mapbox-gl-js'>Project on Github</a>
-            <span class='quiet small'>View source code and contribute</span>
-          </div>
+        <h1 class=''>Mapbox GL JS</h1>
+        <div class='pad1y quiet small'>Current version:
+          <span class='round fill-light pad0'><a href='https://github.com/mapbox/mapbox-gl-js/releases'>mapbox-gl.js v{{site.data.package.version}}</a></span>
         </div>
-         <div class='space-bottom2 space-left1 contain'>
-          <div class='icon inline dark pad0 round fill-blue space-bottom1 document space-right1'></div>
-          <div class='pin-left pad0x space-left4'>
-            <a class='block line-height15' href='https://www.mapbox.com/help/mapbox-gl-js-fundamentals/'>GL JS Fundamentals</a>
-            <span class='quiet small'>Essential functions and common patterns</span>
+        <div class='prose space-bottom2'>
+          <p class='space-bottom2 pad1y'>Mapbox GL JS is a JavaScript library that uses WebGL to render interactive maps
+            from <a href='{{site.url}}/help/define-vector-tiles'>vector tiles</a> and <a
+                    href='{{site.baseurl}}/style-spec'>Mapbox styles</a>.
+            It is part of the <a href='https://github.com/mapbox/mapbox-gl'>Mapbox GL ecosystem</a>, which includes <a
+                    href='{{site.url}}/mobile/'>Mapbox Mobile</a>, a compatible renderer written in C++ with bindings
+            for desktop and mobile platforms.</p>
+          <div class='col12 fill-light round pad2 clearfix space-top2'>
+            <div class='space-bottom2 space-left1 space-top1 contain'>
+              <div class='icon inline dark pad0 round fill-green space-bottom1 github space-right1'></div>
+              <div class='pin-left pad0x space-left4'>
+                <a class='block line-height15' href='https://github.com/mapbox/mapbox-gl-js'>Project on Github</a>
+                <span class='quiet small'>View source code and contribute</span>
+              </div>
+            </div>
+            <div class='space-bottom2 space-left1 contain'>
+              <div class='icon inline dark pad0 round fill-blue space-bottom1 document space-right1'></div>
+              <div class='pin-left pad0x space-left4'>
+                <a class='block line-height15' href='https://www.mapbox.com/help/mapbox-gl-js-fundamentals/'>GL JS
+                  Fundamentals</a>
+                <span class='quiet small'>Essential functions and common patterns</span>
+              </div>
+            </div>
+            <div class='contain space-left1'>
+              <div class='icon inline dark pad0 round fill-red space-bottom1 globe space-right1'></div>
+              <div class='pin-left pad0x space-left4'>
+                <a class='block line-height15' href='https://www.mapbox.com/gallery/'>Gallery</a>
+                <span class='quiet small'>Project showcase</span>
+              </div>
+            </div>
+
           </div>
-        </div>
-         <div class='contain space-left1'>
-          <div class='icon inline dark pad0 round fill-red space-bottom1 globe space-right1'></div>
-          <div class='pin-left pad0x space-left4'>
-            <a class='block line-height15' href='https://www.mapbox.com/gallery/'>Gallery</a>
-            <span class='quiet small'>Project showcase</span>
+          <h2 class='strong'>Quickstart</h2>
+          <div class='space-bottom1'>To get started, you need to obtain an <a
+                  href='https://www.mapbox.com/help/create-api-access-token/'>access token</a> and a <a
+                  href='https://www.mapbox.com/help/define-style-url/'>style URL</a>. You can choose from one of our <a
+                  href='https://www.mapbox.com/api-documentation/#styles'>professionally designed styles</a> or create
+            your own using <a href="https://www.mapbox.com/studio">Mapbox Studio</a>.
           </div>
+          <div class='rounded-toggle space-bottom2 inline' id='method-toggle'>
+            <a class='method-toggle active' data-target='quickstart-cdn' href='#'>Mapbox CDN</a>
+            <a class='method-toggle' data-target='quickstart-bundler' href='#'>module bundler</a>
+          </div>
+          <div id='quickstart-cdn'>{% include quickstart-cdn.html %}</div>
+          <div id='quickstart-bundler' class='hidden'>{% include quickstart-bundler.html %}</div>
+          {% include quickstart-csp.html %}
         </div>
-
-        </div>
-           <h2 class='strong'>Quickstart</h2>
-           <div class='space-bottom1'>To get started, you need to obtain an <a href='https://www.mapbox.com/help/create-api-access-token/'>access token</a> and a <a href='https://www.mapbox.com/help/define-style-url/'>style URL</a>. You can choose from one of our <a href='https://www.mapbox.com/api-documentation/#styles'>professionally designed styles</a> or create your own using <a href="https://www.mapbox.com/studio">Mapbox Studio</a>.</div>
-           <div class='rounded-toggle space-bottom2 inline' id='method-toggle'>
-             <a class='method-toggle active' data-target='quickstart-cdn' href='#'>Mapbox CDN</a>
-             <a class='method-toggle' data-target='quickstart-bundler'  href='#'>module bundler</a>
-           </div>
-           <div id='quickstart-cdn'>{% include quickstart-cdn.html %}</div>
-           <div id='quickstart-bundler' class='hidden'>{% include quickstart-bundler.html %}</div>
       </section>
     </div>
 

diff --git a/src/geo/lng_lat.js b/src/geo/lng_lat.js
@@ -10,7 +10,7 @@ const wrap = require('../util/util').wrap;
  *
  * Note that any Mapbox GL method that accepts a `LngLat` object as an argument or option
  * can also accept an `Array` of two numbers and will perform an implicit conversion.
- * This flexible type is documented as [`LngLatLike`](#LngLatLike).
+ * This flexible type is documented as {@link LngLatLike}.
  *
  * @param {number} lng Longitude, measured in degrees.
  * @param {number} lat Latitude, measured in degrees.

diff --git a/src/geo/lng_lat_bounds.js b/src/geo/lng_lat_bounds.js
@@ -9,8 +9,8 @@ const LngLat = require('./lng_lat');
  * If no arguments are provided to the constructor, a `null` bounding box is created.
  *
  * Note that any Mapbox GL method that accepts a `LngLatBounds` object as an argument or option
- * can also accept an `Array` of two [`LngLatLike`](#LngLatLike) constructs and will perform an implicit conversion.
- * This flexible type is documented as [`LngLatBoundsLike`](#LngLatBoundsLike).
+ * can also accept an `Array` of two {@link LngLatLike} constructs and will perform an implicit conversion.
+ * This flexible type is documented as {@link LngLatBoundsLike}.
  *
  * @param {LngLatLike} [sw] The southwest corner of the bounding box.
  * @param {LngLatLike} [ne] The northeast corner of the bounding box.

diff --git a/src/ui/camera.js b/src/ui/camera.js
@@ -316,7 +316,7 @@ class Camera extends Evented {
      * @param {boolean} [options.linear=false] If `true`, the map transitions using
      *     {@link Map#easeTo}. If `false`, the map transitions using {@link Map#flyTo}. See
      *     those functions and {@link AnimationOptions} for information about options available.
-     * @param {Function} [options.easing] An easing function for the animated transition. See [AnimationOptions](#AnimationOptions).
+     * @param {Function} [options.easing] An easing function for the animated transition. See {@link AnimationOptions}.
      * @param {PointLike} [options.offset=[0, 0]] The center of the given bounds relative to the map's center, measured in pixels.
      * @param {number} [options.maxZoom] The maximum zoom level to allow when the map view transitions to the specified bounds.
      * @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
@@ -470,7 +470,7 @@ class Camera extends Evented {
      *
      * @memberof Map#
      * @param {Object} options Options describing the destination and animation of the transition.
-    *            Accepts [CameraOptions](#CameraOptions) and [AnimationOptions](#AnimationOptions).
+    *            Accepts {@link CameraOptions} and {@link AnimationOptions}.
      * @param {Object} [eventData] Additional properties to be added to event objects of events triggered by this method.
      * @fires movestart
      * @fires zoomstart
@@ -620,7 +620,7 @@ class Camera extends Evented {
      *
      * @memberof Map#
      * @param {Object} options Options describing the destination and animation of the transition.
-     *     Accepts [CameraOptions](#CameraOptions), [AnimationOptions](#AnimationOptions),
+     *     Accepts {@link CameraOptions}, {@link AnimationOptions},
      *     and the following additional options.
      * @param {number} [options.curve=1.42] The zooming "curve" that will occur along the
      *     flight path. A high value maximizes zooming for an exaggerated animation, while a low
@@ -901,7 +901,7 @@ class Camera extends Evented {
 
 /**
  * Fired whenever the map's pitch (tilt) begins a change as
- * the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * the result of either user interaction or methods such as {@link Map#flyTo} .
  *
  * @event pitchstart
  * @memberof Map
@@ -911,7 +911,7 @@ class Camera extends Evented {
 
 /**
  * Fired whenever the map's pitch (tilt) changes as.
- * the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * the result of either user interaction or methods such as {@link Map#flyTo}.
  *
  * @event pitch
  * @memberof Map
@@ -921,7 +921,7 @@ class Camera extends Evented {
 
 /**
  * Fired immediately after the map's pitch (tilt) finishes changing as
- * the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * the result of either user interaction or methods such as {@link Map#flyTo}.
  *
  * @event pitchend
  * @memberof Map

diff --git a/src/ui/handler/box_zoom.js b/src/ui/handler/box_zoom.js
@@ -167,7 +167,7 @@ module.exports = BoxZoomHandler;
  */
 
 /**
- * Fired when a "box zoom" interaction starts. See [`BoxZoomHandler`](#BoxZoomHandler).
+ * Fired when a "box zoom" interaction starts. See {@link BoxZoomHandler}.
  *
  * @event boxzoomstart
  * @memberof Map
@@ -176,7 +176,7 @@ module.exports = BoxZoomHandler;
  */
 
 /**
- * Fired when a "box zoom" interaction ends.  See [`BoxZoomHandler`](#BoxZoomHandler).
+ * Fired when a "box zoom" interaction ends.  See {@link BoxZoomHandler}.
  *
  * @event boxzoomend
  * @memberof Map
@@ -187,7 +187,7 @@ module.exports = BoxZoomHandler;
 
 /**
  * Fired when the user cancels a "box zoom" interaction, or when the bounding box does not meet the minimum size threshold.
- * See [`BoxZoomHandler`](#BoxZoomHandler).
+ * See {@link BoxZoomHandler}.
  *
  * @event boxzoomcancel
  * @memberof Map

diff --git a/src/ui/handler/drag_pan.js b/src/ui/handler/drag_pan.js
@@ -214,7 +214,7 @@ class DragPanHandler {
 module.exports = DragPanHandler;
 
 /**
- * Fired when a "drag to pan" interaction starts. See [`DragPanHandler`](#DragPanHandler).
+ * Fired when a "drag to pan" interaction starts. See {@link DragPanHandler}.
  *
  * @event dragstart
  * @memberof Map
@@ -223,7 +223,7 @@ module.exports = DragPanHandler;
  */
 
 /**
- * Fired repeatedly during a "drag to pan" interaction. See [`DragPanHandler`](#DragPanHandler).
+ * Fired repeatedly during a "drag to pan" interaction. See {@link DragPanHandler}.
  *
  * @event drag
  * @memberof Map
@@ -232,7 +232,7 @@ module.exports = DragPanHandler;
  */
 
 /**
- * Fired when a "drag to pan" interaction ends. See [`DragPanHandler`](#DragPanHandler).
+ * Fired when a "drag to pan" interaction ends. See {@link DragPanHandler}.
  *
  * @event dragend
  * @memberof Map

diff --git a/src/ui/handler/drag_rotate.js b/src/ui/handler/drag_rotate.js
@@ -237,7 +237,7 @@ class DragRotateHandler {
 module.exports = DragRotateHandler;
 
 /**
- * Fired when a "drag to rotate" interaction starts. See [`DragRotateHandler`](#DragRotateHandler).
+ * Fired when a "drag to rotate" interaction starts. See {@link DragRotateHandler}.
  *
  * @event rotatestart
  * @memberof Map
@@ -246,7 +246,7 @@ module.exports = DragRotateHandler;
  */
 
 /**
- * Fired repeatedly during a "drag to rotate" interaction. See [`DragRotateHandler`](#DragRotateHandler).
+ * Fired repeatedly during a "drag to rotate" interaction. See {@link DragRotateHandler}.
  *
  * @event rotate
  * @memberof Map
@@ -255,7 +255,7 @@ module.exports = DragRotateHandler;
  */
 
 /**
- * Fired when a "drag to rotate" interaction ends. See [`DragRotateHandler`](#DragRotateHandler).
+ * Fired when a "drag to rotate" interaction ends. See {@link DragRotateHandler}.
  *
  * @event rotateend
  * @memberof Map

diff --git a/src/ui/handler/scroll_zoom.js b/src/ui/handler/scroll_zoom.js
@@ -154,7 +154,7 @@ module.exports = ScrollZoomHandler;
 
 /**
  * Fired just before the map begins a transition from one zoom level to another,
- * as the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * as the result of either user interaction or methods such as {@link Map#flyTo}.
  *
  * @event zoomstart
  * @memberof Map
@@ -164,7 +164,7 @@ module.exports = ScrollZoomHandler;
 
 /**
  * Fired repeatedly during an animated transition from one zoom level to another,
- * as the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * as the result of either user interaction or methods such as {@link Map#flyTo}.
  *
  * @event zoom
  * @memberof Map
@@ -175,7 +175,7 @@ module.exports = ScrollZoomHandler;
 
 /**
  * Fired just after the map completes a transition from one zoom level to another,
- * as the result of either user interaction or methods such as [Map#flyTo](#Map#flyTo).
+ * as the result of either user interaction or methods such as {@link Map#flyTo}.
  *
  * @event zoomend
  * @memberof Map