Presentation work

diff --git a/app/assets/images/routing-sprite.png b/app/assets/images/routing-sprite.png
new file mode 100644 (file)
index 0000000..37d9488
Binary files /dev/null and b/app/assets/images/routing-sprite.png differ

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index 4645a3e2e23a482934c9e19b7a9f03fc6b582748..74ec0582395818762d48a7390854d3ba306297ab 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -351,12 +351,14 @@ $(document).ready(function () {
        e.preventDefault();
        $(".query_wrapper.search").hide();
        $(".query_wrapper.routing").show();
        e.preventDefault();
        $(".query_wrapper.search").hide();
        $(".query_wrapper.routing").show();

+       $(".query_wrapper.routing [name=route_from]").focus();

   });
 
   $(".close_directions").on("click",function(e) {
        e.preventDefault();
        $(".query_wrapper.search").show();
        $(".query_wrapper.routing").hide();
   });
 
   $(".close_directions").on("click",function(e) {
        e.preventDefault();
        $(".query_wrapper.search").show();
        $(".query_wrapper.routing").hide();

+       $(".query_wrapper.search [name=query]").focus();

   });
 
   OSM.routing = OSM.Routing(map,'OSM.routing',$('.query_wrapper.routing'));
   });
 
   OSM.routing = OSM.Routing(map,'OSM.routing',$('.query_wrapper.routing'));

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 30846479d28c0f094cde40785ae01e5df6bdb4c1..1f50fa480f44a193bbf7ad6ce95d2a75f242e338 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -7,7 +7,9 @@
        https://github.com/apmon/openstreetmap-website/blob/9755c3ae0a8d0684d43760f91dc864ff42d8477a/app/views/routing/start.js.erb
 
        *** draggable start/end markers
        https://github.com/apmon/openstreetmap-website/blob/9755c3ae0a8d0684d43760f91dc864ff42d8477a/app/views/routing/start.js.erb
 
        *** draggable start/end markers

-       
+       *** click each part
+       *** translation (including all alerts and presentation)
+       *** export GPX

 */
 
 var TURN_INSTRUCTIONS=["",
 */
 
 var TURN_INSTRUCTIONS=["",


@@ -85,22 +87,31 @@ OSM.Routing=function(map,name,jqSearch) {
        r.setPolyline=function(line) {
                if (r.polyline) map.removeLayer(r.polyline);
                r.polyline=L.polyline(line, ROUTING_POLYLINE).addTo(r.map);
        r.setPolyline=function(line) {
                if (r.polyline) map.removeLayer(r.polyline);
                r.polyline=L.polyline(line, ROUTING_POLYLINE).addTo(r.map);

-               // *** zoom to fit
+               r.map.fitBounds(r.polyline.getBounds());

        };
 
        // Take an array of directions and write it out
        // (we use OSRM's route_instructions format)
        };
 
        // Take an array of directions and write it out
        // (we use OSRM's route_instructions format)

+       // *** translations?

        r.setItinerary=function(steps) {
                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();
        r.setItinerary=function(steps) {
                $("#content").removeClass("overlay-sidebar");
                $('#sidebar_content').empty();

-               var html="";
+               var html='<h2><a class="geolink" href="#"><span class="icon close"></span></a>Directions</h2>';
+               html+="<table>";

                for (var i=0; i<steps.length; i++) {
                for (var i=0; i<steps.length; i++) {

-                       var s=steps[i];
-                       html+="<div class='route_step'>";
-                       html+=TURN_INSTRUCTIONS[s[0]] || s[0];
-                       html+=s[1];
-                       html+="</div>";
+                       var step=steps[i];
+                       var instCodes=step[0].split('-');
+                       // Assemble instruction text
+                       var instText="<b>"+(i+1)+".</b> ";
+                       instText+=TURN_INSTRUCTIONS[instCodes[0]];
+                       if (instCodes[1]) { instText+="exit "+instCodes[1]+" "; }
+                       if (instCodes[0]!=15) { instText+=step[1] ? "<b>"+step[1]+"</b>" : "(unnamed)"; }
+                       // Add to table
+                       html+="<tr>";
+                       html+="<td class='direction i"+instCodes[0]+"'> ";
+                       html+="<td>"+instText;

                }
                }

+               html+="</table>";

         $('#sidebar_content').html(html);
        };
 
         $('#sidebar_content').html(html);
        };
 


@@ -147,7 +158,11 @@ OSM.Routing=function(map,name,jqSearch) {
                        this.requestJSONP(url);
                },
                gotRoute: function(data) {
                        this.requestJSONP(url);
                },
                gotRoute: function(data) {

-                       // *** save hints
+                       if (data.status==207) {
+                               alert("Couldn't find route between those two places");
+                               return false;
+                       }
+                       // *** store hints

                        var line=L.PolylineUtil.decode(data.route_geometry);
                        for (i=0; i<line.length; i++) { line[i].lat/=10; line[i].lng/=10; }
                        r.setPolyline(line);
                        var line=L.PolylineUtil.decode(data.route_geometry);
                        for (i=0; i<line.length; i++) { line[i].lat/=10; line[i].lng/=10; }
                        r.setPolyline(line);

diff --git a/app/assets/stylesheets/common.css.scss b/app/assets/stylesheets/common.css.scss
index a784493d675324b394f1c40f89e756efdae7550d..5166c7a31c5fbf0f74ad29e79222028c931394e4 100644 (file)
--- a/app/assets/stylesheets/common.css.scss
+++ b/app/assets/stylesheets/common.css.scss
@@ -993,6 +993,21 @@ header .search_form {
   color: #f00;
 }
 
   color: #f00;
 }
 

+/* Rules for routing */
+
+#sidebar_content>table {
+    margin: 20px 0px 10px 15px;
+}
+
+td.direction {
+    background-image: image-url('routing-sprite.png'); 
+    width: 20px; height: 20px; 
+    background-repeat: no-repeat;
+}
+@for $i from 1 through 17 {
+td.direction.i#{$i}  { background-position: #{($i)*-20+20}px 0px; }
+}
+

 /* Rules for entity history */
 
 #sidebar_content {
 /* Rules for entity history */
 
 #sidebar_content {

diff --git a/config/locales/en.yml b/config/locales/en.yml
index 9efda4556401dd42d01d94816fa4c29637b59f12..4bc926f2bc994135f4bb0cc7f66bd80d20b4274f 100644 (file)
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -1324,6 +1324,10 @@ en:
       close: Close
     search:
       search: Search
       close: Close
     search:
       search: Search

+      get_directions: "Get directions"
+      get_directions_title: "Find directions between two points"
+      close_directions: "Close directions"
+      close_directions_title: "Close the directions panel"

       where_am_i: "Where am I?"
       where_am_i_title: Describe the current location using the search engine
       submit_text: "Go"
       where_am_i: "Where am I?"
       where_am_i_title: Describe the current location using the search engine
       submit_text: "Go"