implementd maps with category filteration and custom color markers.

This commit is contained in:
Harry Bomrah 2013-11-12 21:56:36 +08:00 committed by saurabhbhatia
parent 6d5b3a35e9
commit a3d921c47a
5 changed files with 179 additions and 3 deletions

View File

@ -0,0 +1,132 @@
var Locations = function(ls){
l = this;
this.locations = ls;
this.markerCounts = 0;
var map = null,
infowindow = new google.maps.InfoWindow(),
default_location = new google.maps.LatLng( 24.8043107, 121.03042159999995 ),
infowindow_template = "<div class='title'></div><div class='image'><img class='thumbnail' src='' /></div>",
markers = [];
var initialize = function() {
google.maps.visualRefresh = true;
var location = ( l.locations.length ? new google.maps.LatLng( l.locations[0].latitude, l.locations[0].longitude ) : default_location ),
mapOptions = {
zoom: 16,
center: location,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map( document.getElementById('map'), mapOptions );
for( i = 0; i < l.locations.length; i++ ){
markers.push( addMarker( new google.maps.LatLng(l.locations[i].latitude, l.locations[i].longitude), l.locations[i].color, i, function( index ){
}) );
}
}
var addMarker = function( location, pinColor, index, markerCallback ){
var pin = getPin(( pinColor.substr( 0, 1 ) == "#" ? pinColor.replace("#","") : pinColor )),
marker = new google.maps.Marker({
map: map,
icon: pin.image,
shadow: pin.shadow,
position: location,
zIndex: 10
});
google.maps.event.addListener( marker, 'click', function() {
infowindow.setContent( getTemplate( index ) );
infowindow.open( map, marker );
if( typeof markerCallback == "function" )
markerCallback.call( this, index );
});
l.markerCounts++;
return {"marker" : marker, "category_id" : l.locations[index].category_id};
}
var getTemplate = function( obj ){
var object = ( typeof obj == "number" ? l.locations[obj] : ( typeof obj == "object" ? obj : null ) );
if ( object ){
var template = $( "<div></div>" );
template.html( infowindow_template );
template.find( '.title' ).text( object.name );
template.find( "img.thumbnail" ).attr( "src", object.file.thumb.url );
return template.html();
}else{
throw new InvalidObjectError();
}
}
var getPin = function( color ){
var pinImage = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_letter&chld=%E2%80%A2|" + color,
new google.maps.Size(21, 34),
new google.maps.Point(0,0),
new google.maps.Point(10, 34));
var pinShadow = new google.maps.MarkerImage("http://chart.apis.google.com/chart?chst=d_map_pin_shadow",
new google.maps.Size(40, 37),
new google.maps.Point(0, 0),
new google.maps.Point(12, 35));
return {"image":pinImage,"shadow":pinShadow};
}
this.getMarker = function( index ){
return markers[index];
}
this.getAllMarkers = function( ){
return markers;
}
this.clearFilter = function(){
var m = l.getAllMarkers();
for( i = 0; i < m.length; i++ ){
m[i].marker.setVisible(true);
}
}
this.filterMarkers = function( categories ){
var filtered = [],
m = l.getAllMarkers();
for( i = 0; i < m.length; i++ ){
m[i].marker.setVisible(false);
}
for( i = 0; i < categories.length; i++ ){
filtered = filtered.concat(m.filter(function(a){return a.category_id == categories[i]}));
}
for( i = 0; i < filtered.length; i++ ){
filtered[i].marker.setVisible(true);
}
return filtered;
}
google.maps.event.addDomListener(window, 'load', initialize);
}
var InvalidObjectError = function(){
this.name = "InvalidObjectError";
this.message = "Object not valid";
}
InvalidObjectError.prototype = new Error();
InvalidObjectError.prototype.constructor = InvalidObjectError;

View File

@ -1,2 +0,0 @@
// Place all the behaviors and hooks related to the matching controller here.
// All this logic will automatically be available in application.js.

View File

@ -2,8 +2,13 @@ class Panel::Location::BackEnd::LocationsController < OrbitBackendController
include AdminHelper include AdminHelper
def index def index
@location_infos = LocationInfo.all @locations = LocationInfo.all
@categories = get_categories_for_index @categories = get_categories_for_index
@location_infos = [];
@locations.each do |loc|
loc['color'] = Category.find(loc.category_id).custom_value
@location_infos << loc
end
respond_to do |format| respond_to do |format|
format.html # new.html.erb format.html # new.html.erb
format.json { render json: @locations } format.json { render json: @locations }
@ -36,6 +41,7 @@ class Panel::Location::BackEnd::LocationsController < OrbitBackendController
def create def create
@location_info = LocationInfo.new(params[:location_info]) @location_info = LocationInfo.new(params[:location_info])
@categories = get_categories_for_index
if @location_info.save if @location_info.save
flash[:success] = "Success!!" flash[:success] = "Success!!"
redirect_to panel_location_back_end_locations_url redirect_to panel_location_back_end_locations_url

View File

@ -1,3 +1,5 @@
<script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<%= javascript_include_tag "location" %>
<table class="table main-list"> <table class="table main-list">
<thead> <thead>
<tr> <tr>
@ -28,6 +30,44 @@
<% end %> <% end %>
</tbody> </tbody>
</table> </table>
<div>
Categories :
</div>
<div class="btn-group">
<% @categories.each do |category| %>
<button class="btn cat-filter" data-category='<%= category.id %>'><%= category.title %></button>
<% end %>
</div>
<a href="javascript:void(0);" id="clear_filter">Clear Filter</a>
<div id="map" style="width: 100%; height: 500px;"></div>
<%if is_manager? %> <%if is_manager? %>
<td><%= link_to 'Add', new_panel_location_back_end_location_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn", :ref=>"add-btn"%></td> <td><%= link_to 'Add', new_panel_location_back_end_location_path, :class => "btn btn-primary pull-right", :id=>"create_event_btn", :ref=>"add-btn"%></td>
<% end %> <% end %>
<script>
var loc = new Locations(<%= @location_infos.to_json.html_safe %>);
jQuery(document).ready(function($) {
var filterCategories = [];
$("button.cat-filter").bind( clickEvent,function(){
var catid = $( this ).data('category');
if ( $( this ).hasClass('active') ){
$( this ).removeClass('active');
var index = filterCategories.indexOf(filterCategories.filter(function(a,i){ return a == catid })[0]);
filterCategories.splice( index, 1 );
}else{
$( this ).addClass('active');
filterCategories.push( catid );
}
loc.filterMarkers(filterCategories);
})
$("a#clear_filter").bind( clickEvent, function(){
filterCategories = [];
$("button.cat-filter").removeClass('active');
loc.clearFilter();
})
});
</script>