upgrade eslint and fix indenting rules

.eslintrc

@@ -25,7 +25,9 @@
     "prefer-template": "error",
     "quotes": "off",
     "space-before-function-paren": "off",
-    "template-curly-spacing": "error"
+    "template-curly-spacing": "error",
+    "no-useless-escape": "off",
+    "indent": ["error", 4, {"flatTernaryExpressions": true}]
   },
   "env": {
     "es6": true,

bench/benchmarks_view.js

@@ -28,10 +28,10 @@ const BenchmarksView = React.createClass({
             </h1>
             <table>
                 <thead>
-                <tr>
-                    <th>Benchmark</th>
-                    {this.versions().map((v) => <th key={v}>{v}</th>)}
-                </tr>
+                    <tr>
+                        <th>Benchmark</th>
+                        {this.versions().map((v) => <th key={v}>{v}</th>)}
+                    </tr>
                 </thead>
                 <tbody>
                     {Object.keys(this.state.results).map(this.renderBenchmark)}

bench/unit/bench_transform.js

@@ -12,16 +12,15 @@ t.resize(512, 512);
 t.zoom = 12;
 t.center = new LngLat(30.5, 50.5);
 
-suite
-.add('locationPoint', () => {
+suite.add('locationPoint', () => {
     const lnglat = new LngLat(30 + Math.random(), 50 + Math.random());
     t.locationPoint(lnglat);
-})
-.add('pointLocation', () => {
+
+}).add('pointLocation', () => {
     const point = new Point(1000 * Math.random(), 1000 * Math.random());
     t.pointLocation(point);
-})
-.on('cycle', (event) => {
+
+}).on('cycle', (event) => {
     console.log(String(event.target));
-})
-.run();
+
+}).run();

bench/unit/function/profile.js

@@ -3,7 +3,7 @@
 const createFunction = require('../../../src/style-spec').function.interpolated;
 
 function buildExponentialFunction(stopsCount) {
-  // Build an exponential function with a long list of stops
+    // Build an exponential function with a long list of stops
     const stops = [];
     for (let i = 0; i < stopsCount; i++) {
         stops.push([i, i * 2]);
@@ -16,7 +16,7 @@ function buildExponentialFunction(stopsCount) {
 }
 
 function buildCategoricalFunction(stopsCount, useStrings) {
-  // Build a categorical function with a long list of stops
+    // Build a categorical function with a long list of stops
     const stops = [];
     for (let i = 0; i < stopsCount; i++) {
         stops.push([useStrings ? String(i) : i, i * 2]);

debug/canvas.html

@@ -17,8 +17,10 @@
 Canvas not supported
 </canvas>
 <div id='map'></div>
+<script src='/dist/mapbox-gl-dev.js'></script>
+<script src='/debug/access_token_generated.js'></script>
+<script>
 
-<script type="application/javascript">
 function drawToCanvas() {
     var canvas = document.getElementById('testCanvasID');
     if (canvas.getContext) {
@@ -31,10 +33,6 @@
         ctx.fillRect(30, 30, 50, 50);
     }
 }
-</script>
-<script src='/dist/mapbox-gl-dev.js'></script>
-<script src='/debug/access_token_generated.js'></script>
-<script>
 
 var canvasStyle = {
     "version": 8,

docs/_posts/examples/3400-01-04-multiple-geometries.html

@@ -26,24 +26,24 @@
                     "type": "Polygon",
                     "coordinates": [
                         [
-                          [-121.353637, 40.584978],
-                          [-121.284551, 40.584758],
-                          [-121.275349, 40.541646],
-                          [-121.246768, 40.541017],
-                          [-121.251343, 40.423383],
-                          [-121.326870, 40.423768],
-                          [-121.360619, 40.434790],
-                          [-121.363694, 40.409124],
-                          [-121.439713, 40.409197],
-                          [-121.439711, 40.423791],
-                          [-121.572133, 40.423548],
-                          [-121.577415, 40.550766],
-                          [-121.539486, 40.558107],
-                          [-121.520284, 40.572459],
-                          [-121.487219, 40.550822],
-                          [-121.446951, 40.563190],
-                          [-121.370644, 40.563267],
-                          [-121.353637, 40.584978]
+                            [-121.353637, 40.584978],
+                            [-121.284551, 40.584758],
+                            [-121.275349, 40.541646],
+                            [-121.246768, 40.541017],
+                            [-121.251343, 40.423383],
+                            [-121.326870, 40.423768],
+                            [-121.360619, 40.434790],
+                            [-121.363694, 40.409124],
+                            [-121.439713, 40.409197],
+                            [-121.439711, 40.423791],
+                            [-121.572133, 40.423548],
+                            [-121.577415, 40.550766],
+                            [-121.539486, 40.558107],
+                            [-121.520284, 40.572459],
+                            [-121.487219, 40.550822],
+                            [-121.446951, 40.563190],
+                            [-121.370644, 40.563267],
+                            [-121.353637, 40.584978]
                         ]
                     ]
                 }

docs/_posts/examples/3400-01-05-mouse-position.html

@@ -36,7 +36,7 @@
         // e.point is the x, y coordinates of the mousemove event relative
         // to the top-left corner of the map
         JSON.stringify(e.point) + '<br />' +
-            // e.lngLat is the longitude, latitude geographical position of the event
+        // e.lngLat is the longitude, latitude geographical position of the event
         JSON.stringify(e.lngLat);
 });
 </script>

package.json

@@ -50,10 +50,10 @@
     "derequire": "^2.0.6",
     "documentation": "4.0.0-beta12",
     "envify": "^4.0.0",
-    "eslint": "3.12.1",
+    "eslint": "4.1.1",
     "eslint-config-mourner": "^2.0.0",
     "eslint-plugin-flowtype": "^2.34.0",
-    "eslint-plugin-html": "^2.0.0",
+    "eslint-plugin-html": "^3.0.0",
     "flow-bin": "^0.48.0",
     "flow-remove-types": "^1.0.4",
     "github-slugger": "^1.1.1",

src/data/bucket/symbol_bucket.js

@@ -124,8 +124,8 @@ function addVertex(array, anchorX, anchorY, ox, oy, tx, ty, sizeVertex) {
 function addDynamicAttributes(dynamicLayoutVertexArray, p, angle, placementZoom) {
     const twoPi = Math.PI * 2;
     const angleAndZoom = packUint8ToFloat(
-            ((angle + twoPi) % twoPi) / twoPi * 255,
-            placementZoom * 10);
+        ((angle + twoPi) % twoPi) / twoPi * 255,
+        placementZoom * 10);
     dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angleAndZoom);
     dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angleAndZoom);
     dynamicLayoutVertexArray.emplaceBack(p.x, p.y, angleAndZoom);
@@ -375,9 +375,9 @@ class SymbolBucket {
             break;
         }
 
-        const justify = layout['text-justify'] === 'right' ? 1 :
-            layout['text-justify'] === 'left' ? 0 :
-            0.5;
+        const justify =
+            layout['text-justify'] === 'right' ? 1 :
+            layout['text-justify'] === 'left' ? 0 : 0.5;
 
         const oneEm = 24;
         const lineHeight = layout['text-line-height'] * oneEm;
@@ -613,12 +613,12 @@ class SymbolBucket {
 
             let glyphScale = hasText ?
                 collisionTile.placeCollisionFeature(textCollisionFeature,
-                        layout['text-allow-overlap'], layout['symbol-avoid-edges']) :
+                    layout['text-allow-overlap'], layout['symbol-avoid-edges']) :
                 collisionTile.minScale;
 
             let iconScale = hasIcon ?
                 collisionTile.placeCollisionFeature(iconCollisionFeature,
-                        layout['icon-allow-overlap'], layout['symbol-avoid-edges']) :
+                    layout['icon-allow-overlap'], layout['symbol-avoid-edges']) :
                 collisionTile.minScale;
 
 
@@ -714,8 +714,8 @@ class SymbolBucket {
 
         const labelAngle = ((labelAnchor.angle + placementAngle) + 2 * Math.PI) % (2 * Math.PI);
         const inVerticalRange = (
-                (labelAngle > Math.PI * 1 / 4 && labelAngle <= Math.PI * 3 / 4) ||
-                (labelAngle > Math.PI * 5 / 4 && labelAngle <= Math.PI * 7 / 4));
+            (labelAngle > Math.PI * 1 / 4 && labelAngle <= Math.PI * 3 / 4) ||
+            (labelAngle > Math.PI * 5 / 4 && labelAngle <= Math.PI * 7 / 4));
         const useVerticalMode = Boolean(writingModes & WritingMode.vertical) && inVerticalRange;
 
         for (const symbol of quads) {
@@ -752,11 +752,11 @@ class SymbolBucket {
         }
 
         placedSymbolArray.emplaceBack(labelAnchor.x, labelAnchor.y,
-                glyphOffsetArrayStart, this.glyphOffsetArray.length - glyphOffsetArrayStart,
-                lineStartIndex, lineLength, labelAnchor.segment,
-                sizeVertex ? sizeVertex[0] : 0, sizeVertex ? sizeVertex[1] : 0,
-                lineOffset[0], lineOffset[1],
-                placementZoom, useVerticalMode);
+            glyphOffsetArrayStart, this.glyphOffsetArray.length - glyphOffsetArrayStart,
+            lineStartIndex, lineLength, labelAnchor.segment,
+            sizeVertex ? sizeVertex[0] : 0, sizeVertex ? sizeVertex[1] : 0,
+            lineOffset[0], lineOffset[1],
+            placementZoom, useVerticalMode);
 
         arrays.populatePaintArrays(featureProperties);
     }
@@ -842,8 +842,7 @@ class SymbolBucket {
             if (!shapedTextOrientations[writingMode]) continue;
             glyphQuads = glyphQuads.concat(addToBuffers ?
                 getGlyphQuads(anchor, shapedTextOrientations[writingMode],
-                              layer, textAlongLine,
-                              globalProperties, featureProperties) :
+                    layer, textAlongLine, globalProperties, featureProperties) :
                 []);
             textCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedTextOrientations[writingMode], textBoxScale, textPadding, textAlongLine, false);
         }
@@ -854,8 +853,8 @@ class SymbolBucket {
         if (shapedIcon) {
             iconQuads = addToBuffers ?
                 getIconQuads(anchor, shapedIcon, layer,
-                             iconAlongLine, shapedTextOrientations[WritingMode.horizontal],
-                             globalProperties, featureProperties) :
+                    iconAlongLine, shapedTextOrientations[WritingMode.horizontal],
+                    globalProperties, featureProperties) :
                 [];
             iconCollisionFeature = new CollisionFeature(collisionBoxArray, line, anchor, featureIndex, sourceLayerIndex, bucketIndex, shapedIcon, iconBoxScale, iconPadding, iconAlongLine, true);
         }

src/data/feature_index.js

@@ -205,15 +205,17 @@ class FeatureIndex {
         return result;
     }
 
-    filterMatching(result: {[string]: Array<{ featureIndex: number, feature: GeoJSONFeature }>},
-                   matching: Array<any>,
-                   array: any,
-                   queryGeometry: Array<Array<Point>>,
-                   filter: any,
-                   filterLayerIDs: Array<string>,
-                   styleLayers: {[string]: StyleLayer},
-                   bearing: number,
-                   pixelsToTileUnits: number) {
+    filterMatching(
+        result: {[string]: Array<{ featureIndex: number, feature: GeoJSONFeature }>},
+        matching: Array<any>,
+        array: any,
+        queryGeometry: Array<Array<Point>>,
+        filter: any,
+        filterLayerIDs: Array<string>,
+        styleLayers: {[string]: StyleLayer},
+        bearing: number,
+        pixelsToTileUnits: number
+    ) {
         let previousIndex;
         for (let k = 0; k < matching.length; k++) {
             const index = matching[k];

src/data/program_configuration.js

@@ -329,7 +329,7 @@ function getPaintAttributeValue(attribute: Attribute, layer: StyleLayer, globalP
     }
     // add one multi-component value like color0, or pack multiple single-component values into a four component attribute
     const values = attribute.zoomStops.map((zoom) => layer.getPaintValue(
-            attribute.property, util.extend({}, globalProperties, {zoom}), featureProperties));
+        attribute.property, util.extend({}, globalProperties, {zoom}), featureProperties));
 
     return values.length === 1 ? values[0] : values;
 }

src/geo/transform.js

@@ -196,14 +196,14 @@ class Transform {
      * @returns {Array<Tile>} tiles
      */
     coveringTiles(
-      options: {
-        tileSize: number,
-        minzoom: number,
-        maxzoom: number,
-        roundZoom: boolean,
-        reparseOverscaled: boolean,
-        renderWorldCopies: boolean
-      }
+        options: {
+            tileSize: number,
+            minzoom: number,
+            maxzoom: number,
+            roundZoom: boolean,
+            reparseOverscaled: boolean,
+            renderWorldCopies: boolean
+        }
     ) {
         let z = this.coveringZoomLevel(options);
         const actualZ = z;

src/render/draw_symbol.js

@@ -55,7 +55,7 @@ function drawSymbols(painter, sourceCache, layer, coords) {
 }
 
 function drawLayerSymbols(painter, sourceCache, layer, coords, isText, translate, translateAnchor,
-        rotationAlignment, pitchAlignment, keepUpright) {
+    rotationAlignment, pitchAlignment, keepUpright) {
 
     if (!isText && painter.style.sprite && !painter.style.sprite.loaded())
         return;

src/render/painter.js

@@ -369,13 +369,9 @@ class Painter {
             ];
         }
 
-        const translation = inViewportPixelUnitsUnits ? [
-            translate[0],
-            translate[1],
-            0
-        ] : [
-            pixelsToTileUnits(tile, translate[0], this.transform.zoom),
-            pixelsToTileUnits(tile, translate[1], this.transform.zoom),
+        const translation = [
+            inViewportPixelUnitsUnits ? translate[0] : pixelsToTileUnits(tile, translate[0], this.transform.zoom),
+            inViewportPixelUnitsUnits ? translate[1] : pixelsToTileUnits(tile, translate[1], this.transform.zoom),
             0
         ];
 

src/source/tile.js

@@ -33,8 +33,8 @@ class Tile {
          | 'reloading' // Tile data has been loaded and is being updated. Tile can be rendered.
          | 'unloaded'  // Tile data has been deleted.
          | 'errored'   // Tile data was not loaded because of an error.
-         | 'expired';  // Tile data was previously loaded, but has expired per its
-                       // HTTP headers and is in the process of refreshing.
+         | 'expired';  /* Tile data was previously loaded, but has expired per its
+                        * HTTP headers and is in the process of refreshing. */
     placementThrottler: any;
     timeAdded: any;
     fadeEndTime: any;

src/source/tile_coord.js

@@ -109,8 +109,8 @@ function scanSpans(e0, e1, ymin, ymax, scanLine) {
 
     // sort edges by x-coordinate
     if ((e0.x0 === e1.x0 && e0.y0 === e1.y0) ?
-            (e0.x0 + e1.dy / e0.dy * e0.dx < e1.x1) :
-            (e0.x1 - e1.dy / e0.dy * e0.dx < e1.x0)) {
+        (e0.x0 + e1.dy / e0.dy * e0.dx < e1.x1) :
+        (e0.x1 - e1.dy / e0.dy * e0.dx < e1.x0)) {
         const t = e0; e0 = e1; e1 = t;
     }
 

src/source/vector_tile_source.js

@@ -41,7 +41,7 @@ class VectorTileSource extends Evented {
             util.extend(this, tileJSON);
             this.setBounds(tileJSON.bounds);
 
-             // `content` is included here to prevent a race condition where `Style#_updateSources` is called
+            // `content` is included here to prevent a race condition where `Style#_updateSources` is called
             // before the TileJSON arrives. this makes sure the tiles needed are loaded once TileJSON arrives
             // ref: https://github.com/mapbox/mapbox-gl-js/pull/4347#discussion_r104418088
             this.fire('data', {dataType: 'source', sourceDataType: 'metadata'});