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

[Mattias Bengtsson <mattiasb src gnome org>]

commit 12b0bcb1b6a390a1b3b5a05140db337522ae7278
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          |   50 ++++++++++++++++++++++++++++++++++++++++++
 src/mapLocation.js           |   37 +++++++++++++++++++++++++++---
 src/mapView.js               |   16 ++++++++++++-
 5 files changed, 103 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..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 616006a..a3af6b0 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,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 994b887..fd762cf 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) {
+        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);