cst1/openstreetmap-website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

More work on draggable markers

Browse source
This commit is contained in:
Richard Fairhurst 2014-01-23 10:26:04 +00:00
parent 08837b2f8b
commit edd6235b45
3 changed files with 72 additions and 19 deletions
Download patch file Download diff file Expand all files Collapse all files

5
app/assets/javascripts/index.js
View file

@ -358,6 +358,10 @@ $(document).ready(function () {
$(".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) {
@ -366,6 +370,7 @@ $(document).ready(function () {
$(".routing").hide();
OSM.routing.close();
$("#map").off('dragend drop dragover');
$(".routing_marker").off('dragstart');
$(".query_wrapper.search [name=query]").focus();
});

58
app/assets/javascripts/routing.js.erb
View file

@ -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.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
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;
@ -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];
// ** update markers
r.updateMarkers(field.id);
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) {
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
@ -149,15 +195,17 @@ OSM.Routing=function(map,name,jqSearch) {
}
};
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");
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

4
app/views/layouts/_search.html.erb
View file

@ -15,9 +15,9 @@
</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)" %>
<%= 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>