fix: Update a style from an array could fail

When updating a style from a buffer taking into account that there are
multiple vertices per pixel, the fallback lookup could be wrong.  The
initial update worked, but subsequent updates could fail.

Author: manthey

src/feature.js

@@ -612,9 +612,11 @@ var feature = function (arg) {
    * @param {boolean} [refresh] `true` to redraw the feature when it has
    *    been updated.  If an object with styles is passed, the redraw is only
    *    done once.
+   * @param {number} [stride] If specified, the array should be sampled at this
+   *    spacing.
    * @returns {this} The feature instance.
    */
-  this.updateStyleFromArray = function (keyOrObject, styleArray, refresh) {
+  this.updateStyleFromArray = function (keyOrObject, styleArray, refresh, stride) {
     if (typeof keyOrObject !== 'string') {
       $.each(keyOrObject, function (key, value) {
         m_this.updateStyleFromArray(key, value);
@@ -632,18 +634,18 @@ var feature = function (arg) {
       if (m_this._subfeatureStyles[keyOrObject]) {
         if (styleArray.length && Array.isArray(styleArray[0])) {
           m_this.style(keyOrObject, function (v, j, d, i) {
-            var val = (styleArray[i] || [])[j];
+            var val = (styleArray[stride ? Math.floor(i / stride) : i] || [])[j];
             return val !== undefined ? val : fallback;
           });
         } else {
           m_this.style(keyOrObject, function (v, j, d, i) {
-            var val = styleArray[i];
+            var val = styleArray[stride ? Math.floor(i / stride) : i];
             return val !== undefined ? val : fallback;
           });
         }
       } else {
         m_this.style(keyOrObject, function (d, i) {
-          var val = styleArray[i];
+          var val = styleArray[stride ? Math.floor(i / stride) : i];
           return val !== undefined ? val : fallback;
         });
       }

src/webgl/markerFeature.js

@@ -299,14 +299,15 @@ var webgl_markerFeature = function (arg) {
     }
     $.each(keyOrObject, function (key, styleArray) {
       if (m_this.visible() && m_actor && bufferedKeys[key] && !needsRefresh && !m_this.clustering()) {
-        var vpf, mapper, buffer, numPts, value, i, j, v, bpv, sbkey;
+        var vpf, mapper, buffer, numPts, value, i, j, v, bpv, sbkey, stride;
         bpv = bufferedKeys[key];
         numPts = m_this.data().length;
         mapper = m_actor.mapper();
         sbkey = key === 'symbolComputed' ? 'symbol' : key === 'symbolValueComputed' ? 'symbolValue' : key;
         buffer = mapper.getSourceBuffer(sbkey);
         vpf = m_this.verticesPerFeature();
         if (!buffer || !numPts || numPts * vpf * bpv !== buffer.length) {
+          stride = (vpf > 1) ? vpf : stride;
           needsRefresh = true;
         } else {
           switch (bufferedKeys[key]) {
@@ -345,7 +346,7 @@ var webgl_markerFeature = function (arg) {
           // don't allow modified to be adjusted if we don't need to refresh
           m_this.modified = () => {};
         }
-        s_updateStyleFromArray(key, styleArray, false);
+        s_updateStyleFromArray(key, styleArray, false, stride);
         m_this.modified = mod;
       }
     });

src/webgl/pointFeature.js

@@ -274,13 +274,14 @@ var webgl_pointFeature = function (arg) {
     }
     $.each(keyOrObject, function (key, styleArray) {
       if (m_this.visible() && m_actor && bufferedKeys[key] && !needsRefresh && !m_this.clustering()) {
-        var vpf, mapper, buffer, numPts, value, i, j, v, bpv;
+        var vpf, mapper, buffer, numPts, value, i, j, v, bpv, stride;
         bpv = bufferedKeys[key] === 'bool' ? 1 : bufferedKeys[key];
         numPts = m_this.data().length;
         mapper = m_actor.mapper();
         buffer = mapper.getSourceBuffer(key);
         vpf = m_this.verticesPerFeature();
         if (!buffer || !numPts || numPts * vpf * bpv !== buffer.length) {
+          stride = (vpf > 1) ? vpf : stride;
           needsRefresh = true;
         } else {
           switch (bufferedKeys[key]) {
@@ -326,7 +327,7 @@ var webgl_pointFeature = function (arg) {
         // don't allow modified to be adjusted if we don't need to refresh
         m_this.modified = () => {};
       }
-      s_updateStyleFromArray(key, styleArray, false);
+      s_updateStyleFromArray(key, styleArray, false, stride);
       m_this.modified = mod;
     });
     if (refresh) {