[gnome-maps/wip/mlundblad/transit-routing: 5/5] mapView: WIP, implement showing transit routes

[Marcus Lundblad <mlundblad src gnome org>]

commit 2dc23e8d21abfdd7c4f4d82cc4fe762295676756
Author: Marcus Lundblad <ml update uu se>
Date:   Tue Mar 29 23:10:22 2016 +0200

    mapView: WIP, implement showing transit routes
    
    Also added functionallity to allow showing dynamically created
    route layer segments, optionally using a dashed style.
    This is used by transit routes to show walking and transit legs
    of journeys.

 src/mapView.js |   85 ++++++++++++++++++++++++++++++++++++++++++++++++-------
 1 files changed, 74 insertions(+), 11 deletions(-)
---
diff --git a/src/mapView.js b/src/mapView.js
index e8db3bb..eed0aa8 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -39,6 +39,7 @@ const Maps = imports.gi.GnomeMaps;
 const MapWalker = imports.mapWalker;
 const Place = imports.place;
 const PlaceMarker = imports.placeMarker;
+const RouteQuery = imports.routeQuery;
 const ShapeLayer = imports.shapeLayer;
 const StoredRoute = imports.storedRoute;
 const TurnPointMarker = imports.turnPointMarker;
@@ -85,15 +86,21 @@ const MapView = new Lang.Class({
     },
 
     get routeVisible() {
-        return this._routeLayer.visible || this._instructionMarkerLayer.visible;
+        return this._routeVisible || this._instructionMarkerLayer.visible;
     },
 
     set routeVisible(value) {
         let isValid = Application.routeQuery.isValid();
 
-        this._routeLayer.visible = value && isValid;
+        this._routeVisible = value && isValid;
+        this._routeLayers.forEach((function(routeLayer) {
+            Utils.debug('setting route layer visible: ' + (value && isValid));
+            routeLayer.visible = value && isValid;
+        }).bind(this));
         this._instructionMarkerLayer.visible = value && isValid;
+        Utils.debug('after instructionMarkerLayer visible');
         this.notify('routeVisible');
+        Utils.debug('after notify routeVisible');
     },
 
     _init: function(params) {
@@ -157,22 +164,45 @@ const MapView = new Lang.Class({
         return view;
     },
 
-    _initLayers: function() {
+    /* create and store a route layer, pass true to get a dashed line */
+    _createRouteLayer: function(dashed) {
         let strokeColor = new Clutter.Color({ red: 0,
                                               blue: 255,
                                               green: 0,
                                               alpha: 100 });
+        let routeLayer = new Champlain.PathLayer({ stroke_width: 5.0,
+                                                   stroke_color: strokeColor });
+
+        Utils.debug('created route layer');
+        if (dashed)
+            routeLayer.set_dash([5, 5]);
+
+        this._routeLayers.push(routeLayer);
+        Utils.debug('pushed layer in array');
+        this.view.add_layer(routeLayer);
+        Utils.debug('added layer');
+        return routeLayer;
+    },
+
+    _clearRouteLayers: function() {
+        Utils.debug('_clearRouteLayers');
+        this._routeLayers.forEach((function(routeLayer) {
+            Utils.debug('remove layer');
+            routeLayer.remove_all();
+            routeLayer.visible = false;
+            this.view.remove_layer(routeLayer);
+        }).bind(this));
+
+        Utils.debug('clear array');
+        this._routeLayers = [];
+    },
 
+    _initLayers: function() {
         let mode = Champlain.SelectionMode.SINGLE;
 
         this._userLocationLayer = new Champlain.MarkerLayer({ selection_mode: mode });
         this.view.add_layer(this._userLocationLayer);
 
-        this._routeLayer = new Champlain.PathLayer({ stroke_width: 5.0,
-                                                     stroke_color: strokeColor });
-        this.view.add_layer(this._routeLayer);
-
-
         this._placeLayer = new Champlain.MarkerLayer({ selection_mode: mode });
         this.view.add_layer(this._placeLayer);
 
@@ -185,10 +215,13 @@ const MapView = new Lang.Class({
         ShapeLayer.SUPPORTED_TYPES.push(GeoJSONShapeLayer.GeoJSONShapeLayer);
         ShapeLayer.SUPPORTED_TYPES.push(KmlShapeLayer.KmlShapeLayer);
         ShapeLayer.SUPPORTED_TYPES.push(GpxShapeLayer.GpxShapeLayer);
+
+        this._routeLayers = [];
     },
 
     _connectRouteSignals: function() {
         let route = Application.routeService.route;
+        let transitPlan = Application.openTripPlanner.plan;
         let query = Application.routeQuery;
 
         route.connect('update', this.showRoute.bind(this, route));
@@ -196,6 +229,11 @@ const MapView = new Lang.Class({
             this._routeLayer.remove_all();
             this._instructionMarkerLayer.remove_all();
         }).bind(this));
+        transitPlan.connect('update', this.showTransitPlan.bind(this, transitPlan));
+        transitPlan.connect('reset', (function() {
+            this._routeLayer.remove_all();
+            this._instructionMarkerLayer.remove_all();
+        }).bind(this));
 
         query.connect('notify', (function() {
                 this.routeVisible = query.isValid();
@@ -365,6 +403,8 @@ const MapView = new Lang.Class({
             return;
         }
 
+        Utils.debug('gotoBBox');
+
         let [lat, lon] = bbox.get_center();
         let place = new Place.Place({
             location: new Location.Location({ latitude  : lat,
@@ -375,6 +415,7 @@ const MapView = new Lang.Class({
                                                     right  : bbox.right })
         });
         new MapWalker.MapWalker(place, this).goTo(true, linear);
+        Utils.debug('end gotoBBox');
     },
 
     showTurnPoint: function(turnPoint) {
@@ -452,13 +493,15 @@ const MapView = new Lang.Class({
     },
 
     showRoute: function(route) {
-        this._routeLayer.remove_all();
+        let routeLayer;
+
+        this._clearRouteLayers();
         this._placeLayer.remove_all();
 
+        routeLayer = this._createRouteLayer(false);
+        route.path.forEach(routeLayer.add_node.bind(routeLayer));
         this.routeVisible = true;
 
-        route.path.forEach(this._routeLayer.add_node.bind(this._routeLayer));
-
         this._showDestinationTurnpoints();
         this.gotoBBox(route.bbox);
     },
@@ -481,6 +524,26 @@ const MapView = new Lang.Class({
         }, this);
     },
 
+    showTransitPlan: function(plan) {
+        this._clearRouteLayers();
+        this._placeLayer.remove_all();
+        this._instructionMarkerLayer.remove_all();
+
+        Utils.debug('showing transit plan…');
+
+        /* TODO: for now always show the first itinerary */
+        let itinerary = plan.itineraries[0];
+        itinerary.legs.forEach((function(leg) {
+            let routeLayer = this._createRouteLayer(!leg.transit);
+
+            leg.polyline.forEach(routeLayer.add_node.bind(routeLayer));
+        }).bind(this));
+        Utils.debug('about to show route');
+        this.routeVisible = true;
+
+        this.gotoBBox(plan.bbox);
+    },
+
     _onViewMoved: function() {
         this.emit('view-moved');
         if (this._storeId !== 0)