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

[Mattias Bengtsson <mattiasb src gnome org>]

commit 61be604c167f4390698549e60d04476119b60da6
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                    |   14 ++++++++++
 5 files changed, 102 insertions(+), 4 deletions(-)
---
diff --git a/data/gnome-maps.css b/data/gnome-maps.css
index 22e8739..c093548 100644
--- a/data/gnome-maps.css
+++ b/data/gnome-maps.css
@@ -50,3 +50,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 1be5a5f..0350e75 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;
@@ -106,10 +108,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 fa1bbaa..771d8a1 100644
--- a/src/mapView.js
+++ b/src/mapView.js
@@ -40,6 +40,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,7 @@ const MapType = {
 };
 
 const MapMinZoom = 2;
+const DefaultTransportation = RouteService.Transportation.CAR;
 
 const MapView = new Lang.Class({
     Name: 'MapView',
@@ -99,6 +101,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) {
@@ -175,6 +179,7 @@ const MapView = new Lang.Class({
     showLocation: function(place) {
         this._markerLayer.remove_all();
         let mapLocation = new MapLocation.MapLocation(place, this);
+        mapLocation.connect('route-request', this._onRouteRequest.bind(this));
 
         mapLocation.show(this._markerLayer);
 
@@ -186,7 +191,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);