More work on draggable markers

diff --git a/app/assets/javascripts/index.js b/app/assets/javascripts/index.js
index f3df5ae676955a1925eeedaeabf4a4c541e47cd5..fc772a1a8692cb93fbed2ce45cd988e98d45db09 100644 (file)
--- a/app/assets/javascripts/index.js
+++ b/app/assets/javascripts/index.js
@@ -352,21 +352,26 @@ $(document).ready(function () {
   OSM.routing.chooseEngine('Car (OSRM)');
 
   $(".get_directions").on("click",function(e) {
   OSM.routing.chooseEngine('Car (OSRM)');
 
   $(".get_directions").on("click",function(e) {

-       e.preventDefault();
-       $(".search").hide();
-       $(".routing").show();
-       $(".query_wrapper.routing [name=route_from]").focus();
-       $("#map").on('dragend dragover',function(e) { e.preventDefault(); });
-       $("#map").on('drop',function(e) { OSM.routing.handleDrop(e); });
+    e.preventDefault();
+    $(".search").hide();
+    $(".routing").show();
+    $(".query_wrapper.routing [name=route_from]").focus();
+    $("#map").on('dragend dragover',function(e) { e.preventDefault(); });
+    $("#map").on('drop',function(e) { OSM.routing.handleDrop(e); });
+    $(".routing_marker").on('dragstart',function(e) {
+    e.originalEvent.dataTransfer.effectAllowed = 'move';
+      e.originalEvent.dataTransfer.setData('id', this.id);
+    });

   });
 
   $(".close_directions").on("click",function(e) {
   });
 
   $(".close_directions").on("click",function(e) {

-       e.preventDefault();
-       $(".search").show();
-       $(".routing").hide();
-       OSM.routing.close();
-       $("#map").off('dragend drop dragover');
-       $(".query_wrapper.search [name=query]").focus();
+    e.preventDefault();
+    $(".search").show();
+    $(".routing").hide();
+    OSM.routing.close();
+    $("#map").off('dragend drop dragover');
+    $(".routing_marker").off('dragstart');
+    $(".query_wrapper.search [name=query]").focus();

   });
 
 });
   });
 
 });

diff --git a/app/assets/javascripts/routing.js.erb b/app/assets/javascripts/routing.js.erb
index 45ae08d81cd7dbe8accf86f0d90397ff386252e0..81cd3e7a18f62250ac5abdfd5bf21c1570cccf44 100644 (file)
--- a/app/assets/javascripts/routing.js.erb
+++ b/app/assets/javascripts/routing.js.erb
@@ -57,9 +57,31 @@ OSM.Routing=function(map,name,jqSearch) {
        r.route_to=null;                //  |
        r.awaitingGeocode=false;// true if the user has requested a route, but we're waiting on a geocode result
        r.viaPoints=[];                 // not yet used
        r.route_to=null;                //  |
        r.awaitingGeocode=false;// true if the user has requested a route, but we're waiting on a geocode result
        r.viaPoints=[];                 // not yet used

+

        r.polyline=null;                // Leaflet polyline object
        r.polyline=null;                // Leaflet polyline object

+       r.popup=null;                   // Leaflet popup object
+       r.marker_from=null;             // Leaflet from marker
+       r.marker_to=null;               // Leaflet to marker
+

        r.chosenEngine=null;    // currently selected routing engine
 
        r.chosenEngine=null;    // currently selected routing engine
 

+       var icon_from = L.icon({
+               iconUrl: <%= asset_path('marker-green.png').to_json %>,
+               iconSize: [25, 41],
+               iconAnchor: [12, 41],
+               popupAnchor: [1, -34],
+               shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
+               shadowSize: [41, 41]
+       });
+       var icon_to = L.icon({
+               iconUrl: <%= asset_path('marker-red.png').to_json %>,
+               iconSize: [25, 41],
+               iconAnchor: [12, 41],
+               popupAnchor: [1, -34],
+               shadowUrl: <%= asset_path('images/marker-shadow.png').to_json %>,
+               shadowSize: [41, 41]
+       });
+

        // Geocoding
 
        r.geocode=function(id,event) { var _this=this;
        // Geocoding
 
        r.geocode=function(id,event) { var _this=this;


@@ -82,7 +104,7 @@ OSM.Routing=function(map,name,jqSearch) {
                field.value=json[0].display_name;
                var lat=Number(json[0].lat), lon=Number(json[0].lon);
                r[field.id]=[lat,lon];
                field.value=json[0].display_name;
                var lat=Number(json[0].lat), lon=Number(json[0].lon);
                r[field.id]=[lat,lon];

-               // ** update markers
+               r.updateMarkers(field.id);

                if (r.awaitingGeocode) {
                        r.awaitingGeocode=false;
                        r.requestRoute();
                if (r.awaitingGeocode) {
                        r.awaitingGeocode=false;
                        r.requestRoute();


@@ -92,7 +114,31 @@ OSM.Routing=function(map,name,jqSearch) {
        // Drag and drop markers
        
        r.handleDrop=function(e) {
        // Drag and drop markers
        
        r.handleDrop=function(e) {

-               console.log(r.map.mouseEventToLatLng(e.originalEvent))
+               var id=e.originalEvent.dataTransfer.getData('id');
+               var ll=r.map.mouseEventToLatLng(e.originalEvent);
+               // *** ^^^ this is slightly off - we need to work out the latLng of the tip
+               r.createMarker(ll,id);
+               // update to/from field
+       };
+       r.createMarker=function(latlng,id) {
+               if (r[id]) r.map.removeLayer(r[id]);
+               r[id]=L.marker(latlng, {
+                       icon: id=='marker_from' ? icon_from : icon_to,
+                       draggable: true,
+                       name: id
+               }).addTo(r.map);
+               r[id].on('drag',r.markerDragged);
+               r[id].on('dragend',r.markerDragged);
+       };
+       r.updateMarkers=function(id) {
+       };
+       r.markerDragged=function(e) {
+               // marker has been dragged
+               if (e.type=='drag' && !r.chosenEngine.draggable) return;
+               // *** also return if e.type=='drag' and not long enough since last request returned
+               // *** but always do if e.type=='dragend'
+               console.log(e.target.options.name);
+               console.log(e.target.getLatLng());

        };
        
        // Route-fetching UI
        };
        
        // Route-fetching UI


@@ -149,15 +195,17 @@ OSM.Routing=function(map,name,jqSearch) {
                }
        };
        r.clickTurn=function(num,latlng) {
                }
        };
        r.clickTurn=function(num,latlng) {

-               L.popup().setLatLng(latlng).setContent("<p>"+(num+1)+"</p>").openOn(r.map);
+               r.popup=L.popup().setLatLng(latlng).setContent("<p>"+(num+1)+"</p>").openOn(r.map);

        };
 
        };
 

-

        // Close all routing UI
        
        r.close=function() {
                $("#content").addClass("overlay-sidebar");
        // Close all routing UI
        
        r.close=function() {
                $("#content").addClass("overlay-sidebar");

-               if (r.polyline) map.removeLayer(r.polyline);
+               var remove=[r.polyline,r.popup,r.marker_from,r.marker_to];
+               for (var i=0; i<remove.length; i++) {
+                       if (remove[i]) map.removeLayer(remove[i]);
+               }

        };
 
        // Routing engine handling
        };
 
        // Routing engine handling

diff --git a/app/views/layouts/_search.html.erb b/app/views/layouts/_search.html.erb
index da0d0dcada492fa0e4c1d69ed498cfae7977c25f..e1c85f3b7b1dd3b9a412bd2e56ad36da8d30cec9 100644 (file)
--- a/app/views/layouts/_search.html.erb
+++ b/app/views/layouts/_search.html.erb
@@ -15,9 +15,9 @@
   </div>
 
   <div class='query_wrapper routing'>
   </div>
 
   <div class='query_wrapper routing'>

-    <%= image_tag "marker-green.png", :class => 'routing_marker', :draggable => 'true' %>
+    <%= image_tag "marker-green.png", :class => 'routing_marker', :id => 'marker_from', :draggable => 'true' %>

     <%= text_field_tag "route_from", params[:from], :placeholder => "From", :onchange=>"OSM.routing.geocode('route_from',event)" %>
     <%= text_field_tag "route_from", params[:from], :placeholder => "From", :onchange=>"OSM.routing.geocode('route_from',event)" %>

-    <%= image_tag "marker-red.png"  , :class => 'routing_marker', :draggable => 'true' %>
+    <%= image_tag "marker-red.png"  , :class => 'routing_marker', :id => 'marker_to'  , :draggable => 'true' %>

     <%= text_field_tag "route_to"  , params[:to]  , :placeholder => "To"  , :onchange=>"OSM.routing.geocode('route_to'  ,event)" %>
     <select class='routing_engines' name='routing_engines' onchange="OSM.routing.selectEngine(event)"></select>
   </div>
     <%= text_field_tag "route_to"  , params[:to]  , :placeholder => "To"  , :onchange=>"OSM.routing.geocode('route_to'  ,event)" %>
     <select class='routing_engines' name='routing_engines' onchange="OSM.routing.selectEngine(event)"></select>
   </div>