search

e-mission / e-mission-docs

Repository for docs and issues. If you need help, please file an issue here. Public conversations are better for open source projects than private email.
https://e-mission.readthedocs.io/en/latest
BSD 3-Clause "New" or "Revised" License
15 stars 34 forks source link

Maps tiles are sometimes only partially loaded on android #111

Closed shankari closed 2 years ago

shankari commented 8 years ago

Sometimes, the app has this weird behavior on android in which the map tiles are only partially loaded. Reloading the data does not change anything - the issue is only fixed when the app is killed and reloaded.

This issue was recently re-reported by @immesys, so let's track the issue and try to fix it before we get out of beta.

shankari commented 8 years ago

After some poking around on the internet, it looks like the underlying problem is https://github.com/Leaflet/Leaflet/issues/694 in which tiles are only partially loaded if the map is hidden upon load.

Several other projects have included workarounds for the issue, and it basically seems to involve calling map.invalidateSize().

In our case, since we are using ionic/angular, the map is added by a directive and we don't have direct access to it. However, the ui-leaflet directive does listen to 'invalidateSize' events.

https://github.com/angular-ui/ui-leaflet/blob/master/src/directives/leaflet.js#L145

            //Handle request to invalidate the map size
            //Up scope using $scope.$emit('invalidateSize')
            //Down scope using $scope.$broadcast('invalidateSize')
            scope.$on('invalidateSize', function() {
                map.invalidateSize();
            });

So we can use that to trigger the invalidateSize() method.

shankari commented 8 years ago

Here's an example of the problem, generated by @yw374cornell on one of the test phones.

broken_tile_load

shankari commented 8 years ago

@yw374cornell also confirmed that the Reload Tiles button fixed the issue. So now I just need to figure out how to call invalidateSize() on every map load automatically.

wyawen commented 8 years ago

logcat.txt

The 5 steps I followed to generate this log file:

  1. kill the app and restart it
  2. check on common and heatmap —> maps are shown fully
  3. go to metric and load a month of data
  4. go back to common and heatmap —> only partial maps are shown
  5. go to heatmap and rotate the phone --> full map displays
shankari commented 8 years ago

This is what I see from the logs:

Last launch of app

07-19 15:49:13.830 23646 23646 I chromium: [INFO:CONSOLE(2)] "Ionic Core:", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js?ionicCachebuster=68284 (2)
...
07-19 15:49:16.315 23646 23646 I chromium: [INFO:CONSOLE(2)] "Ionic Deploy:", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/lib/ionic-platform-web-client/dist/ionic.io.bundle.min.js?ionicCachebuster=68284 (2)
07-19 15:49:16.318 23646 23646 I chromium: [INFO:CONSOLE(12)] "SplashCtrl invoked", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (12)

Finished loading list view

07-19 15:49:20.925 23646 23646 I chromium: [INFO:CONSOLE(400)] "About to hide 'Reading from server'", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/diary/services.js?ionicCachebuster=68284 (400)
07-19 15:49:20.926 23646 23646 I chromium: [INFO:CONSOLE(461)] "About to show 'Processing trips'", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/diary/services.js?ionicCachebuster=68284 (461)

Loaded common map view

07-19 15:49:22.307 23646 23646 I chromium: [INFO:CONSOLE(18)] "Finished changing state from {"url":"/diary","views":{"main-diary":{"templateUrl":"templates/diary/list.html","controller":"DiaryListCtrl"}},"name":"root.main.diary"} to {"url":"/map","views":{"menuContent":{"templateUrl":"templates/common/map.html","controller":"CommonMapCtrl"}},"name":"root.main.common.map"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (18)
07-19 15:49:22.333 23646 23646 I chromium: [INFO:CONSOLE(66)] "controller CommonCtrl called", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common.js?ionicCachebuster=68284 (66)
07-19 15:49:22.392 23646 23646 I chromium: [INFO:CONSOLE(9)] "controller CommonMapCtrl called", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/map.js?ionicCachebuster=68284 (9)

Got a bunch of resize events

07-19 15:49:22.555 23646 23646 I chromium: [INFO:CONSOLE(64)] "in mapEvents, event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":-86.07947282583079,"lng":-137.8125},"_northEast":{"lat":85.98213689652798,"lng":137.8125}}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/map.js?ionicCachebuster=68284 (64)
07-19 15:49:22.556 23646 23646 I chromium: [INFO:CONSOLE(79)] "$scope.resize event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":-86.07947282583079,"lng":-137.8125},"_northEast":{"lat":85.98213689652798,"lng":137.8125}}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/map.js?ionicCachebuster=68284 (79)

Moved to heatmap

07-19 15:49:23.532 23646 23646 I chromium: [INFO:CONSOLE(18)] "Finished changing state from {"url":"/map","views":{"menuContent":{"templateUrl":"templates/common/map.html","controller":"CommonMapCtrl"}},"name":"root.main.common.map"} to {"url":"/heatmap","views":{"main-heatmap":{"templateUrl":"templates/main-heatmap.html","controller":"HeatmapCtrl"}},"name":"root.main.heatmap"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (18)

Was reading data from nominatim, did not receive resize event. Instead got a message about "long-running timer task".

07-19 15:49:23.532 23646 23646 I chromium: [INFO:CONSOLE(18)] "Finished changing state from {"url":"/map","views":{"menuContent":{"templateUrl":"templates/common/map.html","controller":"CommonMapCtrl"}},"name":"root.main.common.map"} to {"url":"/heatmap","views":{"main-heatmap":{"templateUrl":"templates/main-heatmap.html","controller":"HeatmapCtrl"}},"name":"root.main.heatmap"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (18)
07-19 15:49:26.480 23646 23646 I chromium: [INFO:CONSOLE(0)] "Deferred long-running timer task(s) to improve scrolling smoothness. See crbug.com/574343.", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/index.html#/root/main/heatmap (0)

Switched to metrics view.

07-19 15:49:26.558 23646 23646 I chromium: [INFO:CONSOLE(18)] "Finished changing state from {"url":"/heatmap","views":{"main-heatmap":{"templateUrl":"templates/main-heatmap.html","controller":"HeatmapCtrl"}},"name":"root.main.heatmap"} to {"url":"/metrics","views":{"main-metrics":{"templateUrl":"templates/main-metrics.html","controller":"MetricsCtrl"}},"name":"root.main.metrics"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (18)

Still reading from nominatim.

07-19 15:49:26.839 23646 23646 I chromium: [INFO:CONSOLE(211)] "while reading data from nominatim, status = 200 data = {"place_id":"63901385","licence":"Data © OpenStreetMap contributors, ODbL 1.0. http://www.openstreetmap.org/copyright","osm_type":"way","osm_id":"24025049","lat":"37.87503385","lon":"-122.258834789786","display_name":"Blum Hall, Hearst Avenue, Northside, Berkeley, Alameda County, California, 94709, United States of America","address":{"building":"Blum Hall","road":"Hearst Avenue","neighbourhood":"Northside","city":"Berkeley","county":"Alameda County","state":"California","postcode":"94709","country":"United States of America","country_code":"us"},"boundingbox":["37.874938","37.8751036","-122.2590596","-122.2586046"]}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/services.js?ionicCachebuster=68284 (211)
07-19 15:49:26.839 23646 23646 I chromium: [INFO:CONSOLE(147)] "got response, setting display name to Hearst Avenue, Berkeley", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/services.js?ionicCachebuster=68284 (147)

Finally, received resize events for both common and heatmap (unlike iOS)

07-19 15:49:27.701 23646 23646 I chromium: [INFO:CONSOLE(64)] "in mapEvents, event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":33.43144133557529,"lng":-109.16015624999999},"_northEast":{"lat":33.43144133557529,"lng":-109.16015624999999}}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/map.js?ionicCachebuster=68284 (64)
07-19 15:49:27.701 23646 23646 I chromium: [INFO:CONSOLE(79)] "$scope.resize event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":33.43144133557529,"lng":-109.16015624999999},"_northEast":{"lat":33.43144133557529,"lng":-109.16015624999999}}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/common/map.js?ionicCachebuster=68284 (79)
07-19 15:49:27.702 23646 23646 I chromium: [INFO:CONSOLE(21)] "heatmap received resize event, invalidating map size", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/heatmap.js?ionicCachebuster=68284 (21)

Start getting metrics data

07-19 15:49:29.774 23646 23646 I chromium: [INFO:CONSOLE(60)] "Sending data {"freq":"DAILY","start_time":{"year":2016,"month":"6","day":12},"end_time":{"year":2016,"month":7,"day":19},"metric":"count"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/metrics.js?ionicCachebuster=68284 (60)

Get back metric data

07-19 15:49:32.308 23646 23646 I chromium: [INFO:CONSOLE(67)] "Got aggregate result 6", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/metrics.js?ionicCachebuster=68284 (67)

Change state back to heatmap

07-19 15:49:33.788 23646 23646 I chromium: [INFO:CONSOLE(18)] "Finished changing state from {"url":"/metrics","views":{"main-metrics":{"templateUrl":"templates/main-metrics.html","controller":"MetricsCtrl"}},"name":"root.main.metrics"} to {"url":"/heatmap","views":{"main-heatmap":{"templateUrl":"templates/main-heatmap.html","controller":"HeatmapCtrl"}},"name":"root.main.heatmap"}", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/controllers.js?ionicCachebuster=68284 (18)

Finally receive resize event for heatmap

07-19 15:49:43.147 23646 23646 I chromium: [INFO:CONSOLE(21)] "heatmap received resize event, invalidating map size", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/heatmap.js?ionicCachebuster=68284 (21)
07-19 15:49:45.241 23646 23646 I chromium: [INFO:CONSOLE(21)] "heatmap received resize event, invalidating map size", source: file:///data/user/0/edu.berkeley.eecs.emission/app_20bb230c-4de7-11e6-854a-d2387836df83/js/heatmap.js?ionicCachebuster=68284 (21)
shankari commented 8 years ago

The real issue seems to be the extreme delay in receiving the resize event for the heatmap.

The first time, we moved to the heatmap at 07-19 15:49:23.532 but received the resize event at 07-19 15:49:27.702 which was AFTER we had already switched to the metrics screen at 07-19 15:49:26.558.

Similarly, we switched from metrics back to heatmap at 07-19 15:49:33.788 but received the resize only at 07-19 15:49:43.147, 10 secs later!

I am not sure why there is such a delay, but I wonder if the nominatim queries may have something to do with it, since that's what I see happening in the logs. We should really pre-populate that on the server side, not just for this, but also to reduce the load on the nominatim server.

I will do that first, and then see if the problem recurs. If it recurs, I will try to condition on state load instead of map resize. https://github.com/angular-ui/ui-router/wiki#onenter-and-onexit-callbacks

shankari commented 8 years ago

Filed https://github.com/e-mission/e-mission-server/issues/323 to track the prepopulation.

shankari commented 8 years ago

This just happened in the iOS emulator (see screenshot).

Before After
simulator screen shot jul 25 2016 2 21 13 am simulator screen shot jul 25 2016 2 23 31 am

Pressing "Reload Tiles" fixed everything (see screenshot above.

From the javascript logs:

[Log] settings popup = [object Object] (console-via-logger.js, line 173)
[Log] heatmap received resize event, invalidating map size (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.move" leafletEvent = "move" leafletObject = {"_southWest":{"lat":37.59682400108367,"lng":-122.20642089843749},"_northEast":{"lat":37.59682400108367,"lng":-122.20642089843749}} (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":37.59682400108367,"lng":-122.20642089843749},"_northEast":{"lat":37.59682400108367,"lng":-122.20642089843749}} (console-via-logger.js, line 173)
[Log] $scope.resize event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":37.59682400108367,"lng":-122.20642089843749},"_northEast":{"lat":37.59682400108367,"lng":-122.20642089843749}} (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.moveend" leafletEvent = "moveend" leafletObject = {"_southWest":{"lat":37.59682400108367,"lng":-122.20642089843749},"_northEast":{"lat":37.59682400108367,"lng":-122.20642089843749}} (console-via-logger.js, line 173)
[Log] new config = [object Object] (console-via-logger.js, line 173)
[Log] user email = dfdfdf (console-via-logger.js, line 173)
[Log] About to navigate to preferred tab (console-via-logger.js, line 173)
[Log] Consented, no need to show consent (console-via-logger.js, line 173)
[Log] changing state to root.main.diary (console-via-logger.js, line 173)
[Log] loading root.main.diary (console-via-logger.js, line 173)
[Log] Finished changing state from {"url":"/control","views":{"main-control":{"templateUrl":"templates/control/main-control.html","controller":"ControlCtrl"}},"name":"root.main.control"} to {"url":"/diary","views":{"main-diary":{"templateUrl":"templates/diary/list.html","controller":"DiaryListCtrl"}},"name":"root.main.diary"} (console-via-logger.js, line 173)
[Log] Consented, no need to show consent (console-via-logger.js, line 173)
[Log] Finished changing state from {"url":"/diary","views":{"main-diary":{"templateUrl":"templates/diary/list.html","controller":"DiaryListCtrl"}},"name":"root.main.diary"} to {"url":"/map","views":{"menuContent":{"templateUrl":"templates/common/map.html","controller":"CommonMapCtrl"}},"name":"root.main.common.map"} (console-via-logger.js, line 173)
[Log] Consented, no need to show consent (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.move" leafletEvent = "move" leafletObject = {"_southWest":{"lat":37.01351910258053,"lng":-122.6953125},"_northEast":{"lat":38.1777509666256,"lng":-121.72027587890624}} (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.moveend" leafletEvent = "moveend" leafletObject = {"_southWest":{"lat":37.01351910258053,"lng":-122.6953125},"_northEast":{"lat":38.1777509666256,"lng":-121.72027587890624}} (console-via-logger.js, line 173)
[Log] in mapEvents, event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":37.01351910258053,"lng":-122.6953125},"_northEast":{"lat":38.1777509666256,"lng":-121.72027587890624}} (console-via-logger.js, line 173)
[Log] $scope.resize event = "leafletDirectiveMap.common.resize" leafletEvent = "resize" leafletObject = {"_southWest":{"lat":37.01351910258053,"lng":-122.6953125},"_northEast":{"lat":38.1777509666256,"lng":-121.72027587890624}} (console-via-logger.js, line 173)
shankari commented 8 years ago

Pressing "Reload Tiles" fixed everything

shankari commented 8 years ago

@krisma made some changes to the layout and @yw374cornell could not reproduce the issue any more. Unfortunately, I was able to reproduce during some testing today morning. I am not sure that the resize event is the correct fix.

shankari commented 8 years ago

Some more thoughts on this. Fix by listening to page load? https://github.com/Leaflet/Leaflet/issues/941

shankari commented 8 years ago

@immesys reported that this occurred again on the list screen and pull to refresh did not fix it. I suspect this is because pull to refresh also loads all the maps again, so the original bug recurs.

For now, I will add another button to the top with a checkmark that only fixes the tiles, and let's see if that works reliably. If it does, I just need to figure out how/where to launch the code from the button automatically. A $timeout after load might be the ticket.

Zazolo commented 6 years ago

Hi, I found a solution for not use an button to reload the tiles, considering that tha map is an HTML DIV, i've just add an eventListener for the "map" div, and when the user uses the touch, it calls the map.invalidateSize();

I know that it's not the corectly way to fix, but it worked well for me. I hope I helped.

shankari commented 6 years ago

@Zazolo thank you for the fix! The map reload is one of the more annoying things about the UI and I am so glad that you found a fix. Would you be willing to submit a pull request for the change? It is so much faster to work with tested code than a written description.

If you do so for one of the screens (maybe list.js), I'd be happy to port it to the other screens as well. Thanks again!

shankari commented 5 years ago

@Zazolo would you be able to contribute a pull request? Alternatively, if you provide a code snippet, I can generate a pull request. It is just much easier to work with code than a text description. Thanks!

shankari commented 4 years ago

@st-patrick this is the maps bug

shankari commented 2 years ago

Working on this again since the listview maps don't seem to work, and it has been a common complaint from the CanBikeCO admins.

shankari commented 2 years ago

Looking at the network calls, it looks like switching between days in the list view does not actually make calls to the mapping service.

Screen Shot 2022-04-24 at 5 24 21 PM
shankari commented 2 years ago

Moving to the detail screen is the only thing that actually reloads entries from the mapping service.

Screen Shot 2022-04-24 at 5 25 00 PM
shankari commented 2 years ago

The change to ensure that we treat the maps in the list view as static images is

--- dist/leaflet-src.js 2015-10-26 02:55:42.000000000 -0700
+++ /Users/kshankar/e-mission/native_code_upgrade/www/manual_lib/leaflet.old/dist/leaflet-src.js    2021-10-21 23:09:23.000000000 -0700
@@ -7439,7 +7439,22 @@
    _onDown: function (e) {
        if (!e.touches) { return; }

+        /*
+         * If we have turned off dragging and zooming, then this is basically a
+         * set of static images. At that point, we expect to be able to treat it as an
+         * image - i.e. click on it and scroll the underlying window.
+         * So we preventDefault only when dragging and zooming are enabled
+         *
+         * We want to do the checks for dragging, etc only on a map because
+         * they won't be defined on the oher layers. So if this has a _map
+         * defined on it, we want to preventDefault, and otherwise, it is a
+         * map and we want to check for the other configurations.
+         */
+        var mapOptions = this._map.options;
+        if (mapOptions.dragging || mapOptions.doubleClickZoom ||
+                mapOptions.scrollWheelZoom || mapOptions.touchZoom) {
        L.DomEvent.preventDefault(e);
+        }

        this._fireClick = true;

in 

L.Draggable = L.Class.extend({
    includes: L.Mixin.Events,

The related code in leaflet is now https://github.com/Leaflet/Leaflet/blob/v1.8.0/src/dom/Draggable.js

which is completely different

    _onDown: function (e) {
        // Ignore the event if disabled; this happens in IE11
        // under some circumstances, see #3666.
        if (!this._enabled) { return; }

        this._moved = false;

        if (DomUtil.hasClass(this._element, 'leaflet-zoom-anim')) { return; }

        if (e.touches && e.touches.length !== 1) {
            // Finish dragging to avoid conflict with touchZoom
            if (Draggable._dragging === this) {
                this.finishDrag();
            }
            return;
        }

        if (Draggable._dragging || e.shiftKey || ((e.which !== 1) && (e.button !== 1) && !e.touches)) { return; }
        Draggable._dragging = this;  // Prevent dragging multiple objects at once.

        if (this._preventOutline) {
            DomUtil.preventOutline(this._element);
        }

        DomUtil.disableImageDrag();
        DomUtil.disableTextSelection();

        if (this._moving) { return; }

        // @event down: Event
        // Fired when a drag is about to start.
        this.fire('down');

        var first = e.touches ? e.touches[0] : e,
            sizedParent = DomUtil.getSizedParentNode(this._element);

        this._startPoint = new Point(first.clientX, first.clientY);
        this._startPos = DomUtil.getPosition(this._element);

        // Cache the scale, so that we can continuously compensate for it during drag (_onMove).
        this._parentScale = DomUtil.getScale(sizedParent);

        var mouseevent = e.type === 'mousedown';
        DomEvent.on(document, mouseevent ? 'mousemove' : 'touchmove', this._onMove, this);
        DomEvent.on(document, mouseevent ? 'mouseup' : 'touchend touchcancel', this._onUp, this);
    },
shankari commented 2 years ago

Let's try upgrading to the latest version of Leaflet and see if that fixes the issue.

shankari commented 2 years ago

In the latest version of Leaflet, we no longer need the hack above. We also load part of the map, but not completely.

shankari commented 2 years ago

Unlike the detail, I note that all the maps in the list have the same ID.

                <div class="row diary-arrow-container" ng-click="toDetail(tripgj.data.id)">
                    <leaflet class="col-90" geojson="tripgj" id="$index" defaults="defaults"></leaflet>
                    <button class="col-10 ion-ios-arrow-right"></button>
                </div>
<div class="col-90 angular-leaflet-map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" geojson="tripgj"
id="$index" defaults="defaults" tabindex="0" style="position: relative;">
</div>

However, the $index was present since the very first commit https://github.com/e-mission/e-mission-phone/commit/df2c8520140812c51c2178bc56e65a2d0e37cbc8

shankari commented 2 years ago

Fixed the duplicate ID issue by replacing with id="{{tripgj.data.id}}", maps are still not fixed.

shankari commented 2 years ago

Using 

              detectRetina: false,
              reuseTiles: false,

seems to work better, but now the map zoom level seems to be off and we can't see any trajectory in it.

Screen Shot 2022-04-24 at 9 05 59 PM
shankari commented 2 years ago

Went back to old version of leaflet which shows a world map and still no trajectory. The detail map works, so this is really only broken for the list view.

Screen Shot 2022-04-24 at 9 13 08 PM
shankari commented 2 years ago

Switching from ui-leaflet to try and add the geojson directly,

<leaflet class="col-90" id="{{tripgj.data.id}}" defaults="defaults"></leaflet>

and 

            leafletData.getMap(tripgj.data.id).then(function(map) {
                console.log("Found matching map for "+tripgj.data.id+" ", map);
                L.geoJSON(myLines).addTo(map);
            }).catch(function(e) {
                console.log("Found error while catching function");
                console.error(e)
            });

Now the world map is loaded completely, but it doesn't show any geojson and neither the then or the catch print out anything.

shankari commented 2 years ago

This is because getMap doesn't seem to work where the map ID is a trip ID

detailPopoverMap: {…}, "": {…}, 6256dfb0deedb34f1d8c0562: {…}, 62576d50f1f3a234b9ff79d5: {…}}
"": {defer: Deferred, resolvedDefer: true}
6256dfb0deedb34f1d8c0562: {defer: Deferred, resolvedDefer: false}
62576d50f1f3a234b9ff79d5: {defer: Deferred, resolvedDefer: false}
detailPopoverMap: {defer: Deferred, resolvedDefer: true}
[[Prototype]]: Object

We have resolvedDefer = false, and then we don't get any response.

shankari commented 2 years ago

Displaying only one map finds the map, but still doesn't fix the Geojson

          if (currDayTripWrappers.length > 0) {
            currDayTripWrappers = [currDayTripWrappers[0]];
          }
...
            console.log("LEAFLET: About to try and retrieve map with id "+tripgj.data.id);
            leafletData.getMap("list-map").then(function(map) {
                console.log("LEAFLET: Found matching map for "+tripgj.data.id+" ", map);
                L.geoJSON(myLines).addTo(map);
            }).catch(function(e) {
                console.log("LEAFLET: Found error while catching function");
                console.error(e)
            });

generates 

LEAFLET: About to try and retrieve map with id 625832338cf3d7beb99338dc
LEAFLET: Found matching map for 625832338cf3d7beb99338dc

But the value doesn't really show on the map

Screen Shot 2022-04-24 at 11 33 17 PM
shankari commented 2 years ago

Changing the zoom level instead, the zoom level is changed, but the map is unchanged?!

            console.log("LEAFLET: About to try and retrieve map with id "+tripgj.data.id);
            leafletData.getMap("list-map").then(function(map) {
                console.log("LEAFLET: Found matching map for "+tripgj.data.id+" wih zoom "+ map.getZoom());
                map.setView([51.505, -0.09], 13);
                // L.geoJSON(geojsonFeature).addTo(map);
                console.log("LEAFLET: After adding geojson..."+tripgj.data.id+" with zoom "+map.getZoom(), map
);
            }).catch(function(e) {
                console.log("LEAFLET: Found error while catching function");
                console.log(e)
            });
LEAFLET: About to try and retrieve map with id 625832338cf3d7beb99338dc
LEAFLET: Found matching map for 625832338cf3d7beb99338dc wih zoom 1
LEAFLET: After adding geojson...625832338cf3d7beb99338dc with zoom 13
Screen Shot 2022-04-25 at 8 02 21 AM
shankari commented 2 years ago

At some point, we need to give up and move to a static image, but I want to experiment with this for an hour more to understand leaflet better.

shankari commented 2 years ago

removed all the code to disable the controls, but even the controls don't zoom in the map?! Screen Recording 2022-04-25 at 8 45 12 AM mov

shankari commented 2 years ago

manually setting the center and zoom ahead of time gives us a zoomed in value to start with, but the controls still don't work. panning does work but not zooming in or out.

https://user-images.githubusercontent.com/2423263/165128281-2e14db23-20f2-4b88-b343-54c8527539d9.mp4

shankari commented 2 years ago

Restoring the geojson to the leaflet map to see if that works.... It now has a different location as the starting point, but zooming still does not work.

shankari commented 2 years ago

Ma Mobilite does not seem to have the issues with loading tiles

Ma Mobilite works CanBikeCO doesn't work
ma_mobilite_works canbikeco_doesnt_work
shankari commented 2 years ago

@lgharib we have always had issues with the map tile display on e-mission, but it looks like the Ma Mobilite version works well. Do you recall what you did (if anything) to fix it? Also, do you know which branch you are using for development, so I can look at the diffs myself?

Assuming that the changes are in the dev branch, this seems to be related https://github.com/savoirfairelinux/e-mission-phone/commit/c586f0c6c5e1494f1cfa925d31c4ab2bbddc5f31

Aha! That works!

At some point, we should really modularize the components to make it easy to diff between them. Still doesn't solve the issue of not zooming, but let's get what we can and move on...

shankari commented 2 years ago

Next map issue: clicking on the "three dots" does not work. This is because the diary item overlaps with the diary card below it. Removing the margin from the diary card seems to fix it.

ion-item diary card removed margin from diary card
Screen Shot 2022-04-25 at 12 13 48 PM Screen Shot 2022-04-25 at 12 14 54 PM Screen Shot 2022-04-25 at 12 16 27 PM
shankari commented 2 years ago

The margin comes from ionic.css

.list:last-child {
  margin-bottom: 0px; }
  .list:last-child.card {
    margin-bottom: 40px; }

Not sure why this is flagged as a last-child. Is it because we add elements in reverse cron order?

shankari commented 2 years ago

There is a list-card that is defined in style.css but is overridden by this last-child

margin: 16px 0;
    margin-top: 16px;
    margin-right: 0px;
    margin-bottom: 16px;
    margin-left: 0px;
shankari commented 2 years ago

We see the same behavior in the diary view, but there is no button at the top, so we don't notice it

item card inner div 1 inner div 2
Screen Shot 2022-04-25 at 12 51 58 PM Screen Shot 2022-04-25 at 12 50 31 PM Screen Shot 2022-04-25 at 12 55 28 PM Screen Shot 2022-04-25 at 12 55 49 PM
shankari commented 2 years ago

Final issue: the map doesn't show up in the popup for motorola phones. The issue is that the height is zero. Setting the height to 600px makes it work

Screen Shot 2022-04-25 at 2 09 30 PM Screen Shot 2022-04-25 at 2 11 36 PM
shankari commented 2 years ago

Removing the quotes around the height worked

diff --git a/www/templates/diary/trip-detail-popover.html b/www/templates/diary/trip-detail-popover.html
index a9071656..7ed6e018 100644
--- a/www/templates/diary/trip-detail-popover.html
+++ b/www/templates/diary/trip-detail-popover.html
@@ -35,7 +35,7 @@
     </div>
     <div style="height: 20px;"></div>
     <leaflet geojson="currgj" id="detailPopoverMap" defaults="defaults"
-        height="'600px'" width="100%"
+        height="600px" width="100%"
         style="padding-right: 20px !important; padding-left: 20px !important"></leaflet>
    </ion-content>
 </ion-modal-view>

Why did I add the quotes in the first place?

shankari commented 2 years ago

It was because there was an if there originally, since we only used a % value for android and a fixed value only for iOS https://github.com/e-mission/e-mission-phone/commit/a9334105586b1ca03688fd42152659ca6ee1b10c

We actually removed the if to try and fix this map issue. I guess the problem is that motorola doesn't like quotes around the values.

Removing the quotes works with a fixed value.

shankari commented 2 years ago

Removing the quotes works with a percentage as well.

shankari commented 2 years ago

Changing the id for each map to map_{{tripgj.data.id}}

<div class="col-90 angular-leaflet-map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" geojson="tripgj" id="map_6256dfb0deedb34f1d8c0562" defaults="defaults" height="150px" tabindex="0" style="height: 150px; position: relative;">
...
<div class="col-90 angular-leaflet-map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" geojson="tripgj" id="map_62576d50f1f3a234b9ff79d5" defaults="defaults" height="150px" tabindex="0" style="height: 150px; position: relative;">
...

These maps are retrievable using the dom

L.DomUtil.get("map_6256dfb0deedb34f1d8c0562")

<div class=​"col-90 angular-leaflet-map leaflet-container leaflet-touch leaflet-retina leaflet-fade-anim" geojson=​"tripgj" id=​"map_6256dfb0deedb34f1d8c0562" defaults=​"defaults" height=​"150px" tabindex=​"0" style=​"height:​ 150px;​ position:​ relative;​">​…​</div>​

But not using leafletData

            console.log("LEAFLET: About to retrieve map with id "+map_id);
            leafletData.getMap(map_id).then(function(map) {
                console.log("LEAFLET: For "+map_id+" retrieved ", map);
            });

returns 

LEAFLET: About to retrieve map with id map_6256dfb0deedb34f1d8c0562
LEAFLET: About to retrieve map with id map_62576d50f1f3a234b9ff79d5

So no actual lookups in the code yet

shankari commented 2 years ago

Closed (hopefully) in https://github.com/e-mission/e-mission-phone/pull/820

shankari commented 2 years ago

Ran into this again on my personal phone. Couple of observations:

Let's try and reproduce on a test phone so that we can experiment with solutions

Grayed out works after kill and reload partially greyed out
grayed_out kill_and_reload partial_grayed_out
shankari commented 2 years ago

some answers from the internet:

However, all those options require access to the underlying map. Which we have not been able to reliably achieve in the list view.

May need to dig deeper into ui-leaflet which has not been updated since 2018

shankari commented 2 years ago

Tried it tonight - had one grayed out screen, but it resolved on refresh and then it worked consistently. Will try again tomorrow when the load on the network is higher.

shankari commented 2 years ago

For the record, poking through the ui-leaflet code, here's the specification for the geojson directive. https://github.com/angular-ui/ui-leaflet/blob/a35fc81e1f22b11fa8ab3e81661d9973b7a401c5/test/unit/geojsonDirectiveSpec.coffee

So the next potential fix is probably to set the geojson to blank on refresh before repopulating.