Permalink
Browse files

Points can be deleted from a line by right-clicking on them.

  • Loading branch information...
bamnet committed Jul 20, 2010
1 parent d1808ac commit f2e8e113bcaef2a78573d8f5569e10f18bc8de4a
Showing with 92 additions and 13 deletions.
  1. +91 −13 app/views/paths/_form.html.erb
  2. +1 −0 public/javascripts/application.js
@@ -17,43 +17,121 @@
add_point_to_polyline(coord, polyline);
add_edit_marker_to_map(coord, index);
});
//Click to create a new marker.
google.maps.event.addListener(map, 'click', function(event){
var i = polyline.getPath().getLength();
var next_pos = next_position();
var index = next_index();
var coord = {
latitude: event.latLng.lat(),
longitude: event.latLng.lng(),
position: i+1
position: next_position
};
add_coord_to_form(coord, i, '#coord_data');
add_coord_to_form(coord, index, '#coord_data');
add_point_to_polyline(coord, polyline);
add_edit_marker_to_map(coord, i)
add_edit_marker_to_map(coord, index);
});
<% end %>
<% content_for :js do %>
var map; //The map!
var polyline; //The line
var marker_data = new Array();
// Update the hidden fields with the
// latitude and longitude.
function update_fields(index, latlng){
polyline.getPath().setAt(index, latlng);
$('#path_coords_attributes_' + index + '_latitude').val(latlng.lat());
$('#path_coords_attributes_' + index + '_longitude').val(latlng.lng());
function update_fields(marker, latLng){
var index = marker_data[marker.get('data_id')].html_id;
$('#path_coords_attributes_' + index + '_latitude').val(latLng.lat());
$('#path_coords_attributes_' + index + '_longitude').val(latLng.lng());
return true;
}
// Update the polyline with a new position
// from a marker.
function update_line(marker, latLng){
var index = marker_data[marker.get('data_id')].polyline_id;
polyline.getPath().setAt(index, latLng);
}
// Add a draggable marker to the map
// update a point on a polyline.
function add_edit_marker_to_map(coord, index){
var marker = add_point_to_map(coord, map, {draggable: true});
marker.set('data_id', next_index());
var data = {
html_id: index,
polyline_id: polyline.getPath().length-1,
active: true,
marker: marker
};
marker_data.push(data);
//Drag to move a marker.
google.maps.event.addListener(marker, "drag", function(event){
console.log(index);
update_fields(index, event.latLng);
update_fields(this, event.latLng);
update_line(this, event.latLng);
});
//Right click to delete a marker.
google.maps.event.addListener(marker, "rightclick", function(event){
//Remove it from the line and map.
delete_from_map(this);
//For every active point past the one being deleted
//decrease its polyline data by one.
var i = 0;
var max = marker_data.length;
for(i = this.get('data_id'); i < max; i++){
if(marker_data[i].active){
$('#path_coords_attributes_' + i + '_position').val(i);
marker_data[i].polyline_id--;
}
}
//Remove the position html
//and replace it with destroy code.
remove_position_html(this);
});
return marker;
}
// Figure out the position for a new marker.
function next_position(){
return $('.coord_position_data').length + 1;
}
// Figure out the index for a new marker.
function next_index(){
return marker_data.length;
}
// Remove the position input field
// and replace it with one that will
// trigger a destroy call.
function remove_position_html(marker){
var index = marker_data[marker.get('data_id')].html_id;
var destroy_elem = $('<input>').attr({
id: 'path_coords_attributes_' + index + '__destroy',
name: 'path[coords_attributes][' + index + '][_destroy]',
value: true,
type: 'hidden',
class: 'coord_destroy'
});
$('#path_coords_attributes_' + index + '_position').replaceWith(destroy_elem);
}
// Delete the marker from the map
// and remove the point from the polyline.
function delete_from_map(marker){
var index = marker_data[marker.get('data_id')].polyline_id;
console.log("Deleteing line: " + index);
polyline.getPath().removeAt(index);
marker.setMap(null);
marker_data[marker.get('data_id')].active = false;
}
<% end %>
<%= form_for([@layer, @path]) do |f| %>
@@ -86,7 +164,7 @@
<%= f.fields_for :coords do |coord| %>
<%= coord.hidden_field :latitude %>
<%= coord.hidden_field :longitude %>
<%= coord.hidden_field :position %>
<%= coord.hidden_field :position, :class=>"coord_position_data" %>
<% end %>
</div>
@@ -72,6 +72,7 @@ function add_coord_to_form(coord, i, holder){
$('<input>').attr({
id: 'path_coords_attributes_' + i + '_position',
name: 'path[coords_attributes][' + i + '][position]',
class: 'coord_position_data',
value: coord.position,
type: 'hidden',
}).appendTo(holder);

0 comments on commit f2e8e11

Please sign in to comment.