[gnome-maps/wip/routing: 52/52] Make route searches via location bubbles

[Mattias Bengtsson <mattiasb src gnome org>]

commit c2414efcc684fc9790b33a76db0de08211661113
Author: Mattias Bengtsson <mattias jc bengtsson gmail com>
Date:   Mon Sep 2 18:01:49 2013 +0200

    Make route searches via location bubbles
    
    Make it possible to make simple route searches via location bubbles like
    in the designs. More advanced searches will have to be made via the
    sidebar.

 data/gnome-maps.css          |    4 +++
 src/gnome-maps.gresource.xml |    1 +
 src/map-location.ui          |   57 ++++++++++++++++++++++++++++++++++++++++++
 src/mapLocation.js           |   42 ++++++++++++++++++++++++++++---
 src/mapView.js               |   16 +++++++++++-
 5 files changed, 115 insertions(+), 5 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 9a1745d..87df2ac 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -52,3 +52,7 @@
 #zoom-out-button:insensitive {
     background-image: url('zoom-out-insensitive.png');
 }
+
+.map-location > GtkLabel {
+    color: #D0D0D0;
+}
diff --git a/src/gnome-maps.gresource.xml b/src/gnome-maps.gresource.xml
index 6250d60..d30b5eb 100644
--- a/src/gnome-maps.gresource.xml
+++ b/src/gnome-maps.gresource.xml
@@ -6,6 +6,7 @@
     <file preprocess="xml-stripblanks">zoom-control.ui</file>
     <file preprocess="xml-stripblanks">search-popup.ui</file>
     <file preprocess="xml-stripblanks">context-menu.ui</file>
+    <file preprocess="xml-stripblanks">map-location.ui</file>
     <file alias="application.css">../data/gnome-maps.css</file>
     <file alias="zoom-in.png">../data/media/zoom-in.png</file>
     <file alias="zoom-out.png">../data/media/zoom-out.png</file>
diff --git a/src/map-location.ui b/src/map-location.ui
new file mode 100644
index 0000000..0be874e
--- /dev/null
+++ b/src/map-location.ui
@@ -0,0 +1,57 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.15.2 on Mon Sep  2 18:53:45 2013 -->
+<interface>
+  <!-- interface-requires gtk+ 3.10 -->
+  <object class="GtkGrid" id="map-location">
+    <property name="width_request">151</property>
+    <property name="height_request">90</property>
+    <property name="visible">True</property>
+    <property name="can_focus">False</property>
+    <property name="column_homogeneous">True</property>
+    <style>
+      <class name="map-location"/>
+      <class name="osd"/>
+    </style>
+    <child>
+      <object class="GtkButton" id="to-here-button">
+        <property name="label" translatable="yes">Get to here</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">1</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkButton" id="from-here-button">
+        <property name="label" translatable="yes">Get from here</property>
+        <property name="visible">True</property>
+        <property name="can_focus">True</property>
+        <property name="receives_default">True</property>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">2</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+    <child>
+      <object class="GtkLabel" id="name">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="justify">center</property>
+      </object>
+      <packing>
+        <property name="left_attach">0</property>
+        <property name="top_attach">0</property>
+        <property name="width">1</property>
+        <property name="height">1</property>
+      </packing>
+    </child>
+  </object>
+</interface>
diff --git a/src/mapLocation.js b/src/mapLocation.js
index f4b9eee..5defe1d 100644
--- a/src/mapLocation.js
+++ b/src/mapLocation.js
@@ -23,6 +23,8 @@
 const Clutter = imports.gi.Clutter;
 const Champlain = imports.gi.Champlain;
 const Geocode = imports.gi.GeocodeGlib;
+const GtkClutter = imports.gi.GtkClutter;
+const Gtk = imports.gi.Gtk;
 
 const Lang = imports.lang;
 const Mainloop = imports.mainloop;
@@ -80,10 +82,42 @@ const MapLocation = new Lang.Class({
     },
 
     show: function(layer) {
-        let marker = new Champlain.Label({ text: this.description });
-        marker.set_location(this.latitude, this.longitude);
-        layer.add_marker(marker);
-        Utils.debug("Added marker at " + this.latitude + ", " + this.longitude);
+        let image = Utils.CreateActorFromImageFile(Path.ICONS_DIR + "/bubble.svg");
+        let bubble = new Champlain.CustomMarker();
+        bubble.add_child(image);
+        bubble.set_location(this.latitude, this.longitude);
+        bubble.connect('notify::width',
+                       bubble.set_translation.bind(bubble,
+                                                   -(Math.floor(bubble.get_width() / 2)),
+                                                   -bubble.get_height(),
+                                                   0));
+
+        let ui = Utils.getUIObject('map-location', [ 'map-location',
+                                                     'name',
+                                                     'to-here-button',
+                                                     'from-here-button']);
+        ui.name.label = this.description;
+        ui.toHereButton.connect("clicked",
+                                this.emit.bind(this,
+                                               'route-request',
+                                               { to: this.getCoordinate() }));
+        ui.fromHereButton.connect("clicked",
+                                  this.emit.bind(this,
+                                                 'route-request',
+                                                 { from: this.getCoordinate() }));
+        let gtkActor = new GtkClutter.Actor({ contents: ui.mapLocation,
+                                              margin_top: 5,
+                                              margin_left: 5});
+        Utils.clearGtkClutterActorBg(gtkActor);
+        bubble.add_child (gtkActor);
+
+        layer.add_marker (bubble);
+        Utils.debug("Added marker at " + this.latitude + ", " + this.longitude);   
+    },
+
+    getCoordinate: function() {
+        return new Champlain.Coordinate({ latitude: this.latitude,
+                                          longitude: this.longitude });
     },
 
     showNGoTo: function(animate, layer) {
diff --git a/src/mapView.js b/src/mapView.js
index 994b887..4e915ee 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -41,6 +41,7 @@ const Path = imports.path;
 const MapLocation = imports.mapLocation;
 const UserLocation = imports.userLocation;
 const Geoclue = imports.geoclue;
+const RouteService = imports.routeService;
 const _ = imports.gettext.gettext;
 
 const MapType = {
@@ -50,6 +51,8 @@ const MapType = {
     TRANSIT: Champlain.MAP_SOURCE_OSM_TRANSPORT_MAP
 };
 
+const DefaultTransportation = RouteService.Transportation.CAR;
+
 const MapView = new Lang.Class({
     Name: 'MapView',
     Extends: GtkChamplain.Embed,
@@ -91,6 +94,8 @@ const MapView = new Lang.Class({
         this._updateUserLocation();
         this.geoclue.connect("location-changed",
                              this._updateUserLocation.bind(this));
+
+        this._routeService = new RouteService.GraphHopper();
     },
 
     setMapType: function(mapType) {
@@ -156,7 +161,7 @@ const MapView = new Lang.Class({
     showLocation: function(location) {
         this._markerLayer.remove_all();
         let mapLocation = new MapLocation.MapLocation(location, this);
-
+        mapLocation.connect('route-request', this._onRouteRequest.bind(this));
         mapLocation.show(this._markerLayer);
 
         return mapLocation;
@@ -167,7 +172,16 @@ const MapView = new Lang.Class({
         mapLocation.goTo(true);
     },
 
+    _onRouteRequest: function(location, { from, to }) {
+        from = from || this._userLocation.getCoordinate();
+        to = to || this._userLocation.getCoordinate();
+        this._routeService.getRoute([from, to],
+                                    DefaultTransportation,
+                                    this.showRoute.bind(this));
+    },
+
     showRoute: function(route) {
+        this._routeLayer.remove_all();
         route.coordinates.forEach(function(coordinate) {
             this._routeLayer.add_node(coordinate);
         }, this);