Doesn't work on the Web

[ozz-rjq]

When I try to decode encoded polyline using flutter for Web it returns very strange results, for example:

 [40.7402, 21400.99565, 40.7402, 21400.995870000002, 21515.576640000003, 21400.996180000002, 42990.413060000006, 21400.99648, 42990.413080000006, 21400.99648, 42990.41311000001, 21400.9965, 42990.41314000001, 21400.99654, 42990.413150000015, 21400.9966, 42990.413150000015, 21400.996619999998, 42990.41323000001, 21400.996619999998, 42990.41434000001, 21400.997669999997, 42990.41444000001, 21400.99775, 42990.414500000006, 42875.8342, 42990.41459000001, 42875.83421, 42990.41466000001, 42875.83425, 42990.41468000001, 42875.83426, 42990.41468000001, 42875.83449, 42990.41475000001, 42875.834520000004, 42990.414780000014, 42875.834570000006, 42990.41486000001, 42875.83470000001, 42990.415060000014, 42875.83490000001, 42990.41518000001, 42875.83498000001, 42990.41523000001, 42875.83499000001, 42990.41574000001, 42875.83503000001, 42990.41614000001, 42875.83504000001, 42990.416280000005, 64350.671510000015, 42990.416600000004, 85825.50787000002, 42990.416840000005, 107300.34422000001, 42990.41711, 128775.18049000001, 42990.4172, 150250.01686, 42990.41739, 171724.85313, 42990.41751, 171724.85333, 42990.41791, 171724.85411000001, 42990.41817, 171724.85462000003, 42990.41833, 171724.85491000002, 42990.41855, 171724.85513, 42990.41865, 171724.85521, 64465.255090000006, 171724.8553, 85940.09149, 171724.85545, 107414.92781000001, 171724.85575000002, 107414.92789, 171724.85585000002, 107414.92792, 171724.85591, 107414.92798000001, 171724.85608000003, 107414.92801, 171724.8563, 107414.92866, 171724.85666000002, 107414.92916, 171724.85693, 107414.92929, 171724.85701, 128889.76575, 171724.8571, 150364.60220000002, 171724.85723999998, 171839.43861, 171724.85794999998, 193314.27494, 171724.85953999998, 214789.11132, 171724.86060999997, 236263.9473, 171724.86570999998, 236263.94731, 171724.86581, 236263.94733, 193199.70228, 236263.94771, 214674.53869000002, 236263.94786000001, 236149.37515, 257738.78414, 236149.37588, 279213.62045, 236149.37656, 300688.45664, 236149.37774, 322163.2931, 236149.37781, 322163.29318000004, 236149.37781, 322163.29342000006, 236149.37784, 322163.29451000004, 236149.37796, 322163.29451000004, 236149.37812, 322163.29453, 236149.37823, 322163.2946, 236149.37833, 322163.29473, 236149.37837000002, 322163.29476, 236149.37872, 343638.13123, 236149.3789, 365112.96767, 236149.37907000002, 386587.80409, 236149.37926000002, 408062.64037, 236149.37985000003, 429537.47677999997, 236149.38015000004, 451012.31318999996, 236149.38029000003, 472487.14955999993, 236149.38042000003, 493961.98582999996, 236149.38069000002, 515436.82226999995, 236149.38081000003, 536911.65871, 236149.38101000004, 558386.49512, 236149.38115000003, 579861.33143, 236149.38156000004, 601336.16775, 236149.38200000004, 622811.00418, 236149.38234000004, 622811.00419, 236149.38248000003, 622811.00424, 236149.38262000002, 622811.00427, 236149.38278, 622811.0043, 236149.38313, 622811.00437, 236149.38381, 644285.84059, 236149.38506, 665760.67703, 236149.38516, 687235.51332, 236149.38597, 708710.3496000001, 236149.38685, 708710.3496900001, 236149.38689000002, 708710.3498300001, 236149.38696000003, 708710.3499, 236149.38701000003, 708710.3499500001, 236149.38708000004, 730185.1864, 236149.38712000006, 730185.18645, 236149.38719000007, 730185.18649, 236149.38725000006, 751660.02294, 236149.38730000006, 773134.85941, 236149.38738000006, 773134.85944, 236149.38746000006, 794609.6954600001, 236149.38895000005, 816084.5318600001, 236149.38931000006, 837559.3683200001, 236149.38965000006, 859034.2043900001, 257624.22562000004, 880509.0406700001, 279099.06190000003, 901983.8770600001, 300573.89822000003, 923458.7134400001, 322048.73453, 944933.5498900001, 322048.73455, 966408.3862700001, 322048.73465, 987883.2226300001, 322048.73478, 1009358.0588900001, 322048.73504, 1030832.8953200001, 322048.7351]

Any ideas to fix it?

[BoHellgren]

Doesn't work on the Web. On Android it works:

but on the web, using exactly the same Dart code, I get this

The pattern is not dashed on the web. I can live with that. But the fourth polyline point is off the screen on the web.
Using
google_maps_flutter: 1.0.6
google_maps_flutter_web: ^0.1.0+8
flutter_polyline_points: ^0.2.4

[BoHellgren]

If I print the first four points I get this on Android:

[LatLng(59.35312, 18.08528000000001), LatLng(59.35338, 18.086270000000013), 
LatLng(59.35391, 18.086430000000007), LatLng(59.35383, 18.087649999999996),

but this when I run the same code with Flutter run-d chrome:

[LatLng(59.35312, 18.08528000000001), LatLng(59.35338,18.086270000000013), 
LatLng(59.35391, 18.086430000000007), LatLng(90, 18.087649999999996),

[BoHellgren]

I found the bug. If you look at the description of the int class you can read

Note: When compiling to JavaScript, integers are restricted to values that can be represented exactly by double-precision floating point values. The available integer values include all integers between -2^53 and 2^53, and some integers with larger magnitude. That includes some integers larger than 2^63. The behavior of the operators and methods in the int class therefore sometimes differs between the Dart VM and Dart code compiled to JavaScript. For example, the bitwise operators truncate their operands to 32-bit integers when compiled to JavaScript.

The plugin uses the Bitwise Or operator ~ on an int, which can give different results in Android and Web.

I copied the decodeEncodedPolyline function and modified it to use BigInt instead of int. See below. (I also changed the return format). I use the function below instead of the plugin. It works both on Android and Web.

List<LatLng> decodeEncodedPolyline(String encoded) {
    List<LatLng> poly = [];
    int index = 0, len = encoded.length;
    int lat = 0, lng = 0;
    BigInt Big0 = BigInt.from(0);
    BigInt Big0x1f = BigInt.from(0x1f);
    BigInt Big0x20 = BigInt.from(0x20);

    while (index < len) {
      int shift = 0;
      BigInt b, result;
      result = Big0;
      do {
        b = BigInt.from(encoded.codeUnitAt(index++) - 63);
        result |= (b & Big0x1f) << shift;
        shift += 5;
      } while (b >= Big0x20);
      BigInt rshifted = result >> 1;
      int dlat;
      if (result.isOdd)
        dlat = (~rshifted).toInt();
      else
        dlat = rshifted.toInt();
      lat += dlat;

      shift = 0;
      result = Big0;
      do {
        b = BigInt.from(encoded.codeUnitAt(index++) - 63);
        result |= (b & Big0x1f) << shift;
        shift += 5;
      } while (b >= Big0x20);
      rshifted = result >> 1;
      int dlng;
      if (result.isOdd)
        dlng = (~rshifted).toInt();
      else
        dlng = rshifted.toInt();
      lng += dlng;

      poly.add(LatLng((lat / 1E5).toDouble(), (lng / 1E5).toDouble()));
    }
    return poly;
  }

[ditman]

Thanks for the debug @BoHellgren, this was reported in flutter/plugins as well.

[Spearfisher64]

Thanks to @BoHellgren for fixing the issue. Now with new update you need to change LatLng part to PointLatLng.

List<PointLatLng> decodeEncodedPolyline(String encoded) {
    List<PointLatLng> poly = [];
    int index = 0, len = encoded.length;
    int lat = 0, lng = 0;
    BigInt Big0 = BigInt.from(0);
    BigInt Big0x1f = BigInt.from(0x1f);
    BigInt Big0x20 = BigInt.from(0x20);

    while (index < len) {
      int shift = 0;
      BigInt b, result;
      result = Big0;
      do {
        b = BigInt.from(encoded.codeUnitAt(index++) - 63);
        result |= (b & Big0x1f) << shift;
        shift += 5;
      } while (b >= Big0x20);
      BigInt rshifted = result >> 1;
      int dlat;
      if (result.isOdd)
        dlat = (~rshifted).toInt();
      else
        dlat = rshifted.toInt();
      lat += dlat;

      shift = 0;
      result = Big0;
      do {
        b = BigInt.from(encoded.codeUnitAt(index++) - 63);
        result |= (b & Big0x1f) << shift;
        shift += 5;
      } while (b >= Big0x20);
      rshifted = result >> 1;
      int dlng;
      if (result.isOdd)
        dlng = (~rshifted).toInt();
      else
        dlng = rshifted.toInt();
      lng += dlng;

      poly.add(PointLatLng((lat / 1E5).toDouble(), (lng / 1E5).toDouble()));
    }
    return poly;
  }

I didn't test it on Android or iOs only tested on Web.
Edit: I tested on Android it works. When I test on iOS I will edit again.

[ditman]

🎉 Thanks!