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

[Mattias Bengtsson <mattiasb src gnome org>]

commit decfda1658eef0e2f4c04ba6115d4aca57437a72
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.data.gresource.xml |    1 +
 src/map-location.ui               |   50 +++++++++++++++++++++++++++++++++++++
 src/mapLocation.js                |   37 ++++++++++++++++++++++++---
 src/mapView.js                    |   15 ++++++++++-
 5 files changed, 102 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.data.gresource.xml b/src/gnome-maps.data.gresource.xml
index 6250d60..d30b5eb 100644
--- a/src/gnome-maps.data.gresource.xml
+++ b/src/gnome-maps.data.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..5813ab7
--- /dev/null
+++ b/src/map-location.ui
@@ -0,0 +1,50 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<!-- Generated with glade 3.15.2 on Sun Sep 15 18:56:41 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>
+        <property name="valign">end</property>
+        <property name="vexpand">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="GtkLabel" id="name">
+        <property name="visible">True</property>
+        <property name="can_focus">False</property>
+        <property name="justify">center</property>
+        <property name="wrap">True</property>
+        <property name="wrap_mode">word-char</property>
+        <property name="ellipsize">end</property>
+        <property name="max_width_chars">17</property>
+        <property name="lines">2</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 6907fd0..0a1e862 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;
@@ -94,10 +96,37 @@ 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' ]);
+        ui.name.label = this.description;
+        ui.toHereButton.connect("clicked",
+                                this.emit.bind(this,
+                                               'route-request',
+                                               { to: 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 fc8e3b6..6ccd94b 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 = {
@@ -51,6 +52,7 @@ const MapType = {
 };
 
 const MapMinZoom = 2;
+const DefaultTransportation = RouteService.Transportation.CAR;
 
 const MapView = new Lang.Class({
     Name: 'MapView',
@@ -102,6 +104,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) {
@@ -174,7 +178,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;
@@ -185,7 +189,16 @@ const MapView = new Lang.Class({
         mapLocation.goTo(true);
     },
 
+    _onRouteRequest: function(location) {
+        let from = this._userLocation.getCoordinate(),
+            to   = location.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);