Permalink
Browse files

added clusterer customization

  • Loading branch information...
1 parent 11fdf56 commit 4918a0ddfd5b5d8ea9ef143f909af28f8d15d8f4 @apneadiving apneadiving committed May 16, 2011
Showing with 70 additions and 18 deletions.
  1. +20 −11 public/javascripts/gmaps4rails.js
  2. +50 −7 test/dummy/app/views/users/index.html.erb
@@ -12,7 +12,7 @@ var Gmaps4Rails = {
draggable: true,
type: "ROADMAP", // HYBRID, ROADMAP, SATELLITE, TERRAIN
detect_location: false, // should the browser attempt to use geolocation detection features of HTML5?
- center_on_user: false,
+ center_on_user: false, // centers map on the location detected through the browser
center_latitude: 0,
center_longitude: 0,
zoom: 1,
@@ -38,7 +38,8 @@ var Gmaps4Rails = {
clusterer_maxZoom: 5, // removes clusterer at this zoom level
randomize: false, // Google maps can't display two markers which have the same coordinates. This randomizer enables to prevent this situation from happening.
max_random_distance: 100, // in meters. Each marker coordinate could be altered by this distance in a random direction
- list_container: null // id of the ul that will host links to all markers
+ list_container: null, // id of the ul that will host links to all markers
+ custom_cluster_pictures: null
},
//Stored variables
@@ -123,10 +124,10 @@ var Gmaps4Rails = {
}
},
function() {
- if(typeof gmaps4rails_geolocation_failure == 'function') { gmaps4rails_geolocation_failure(true); }
+ if(this.fnSet("gmaps4rails_geolocation_failure")) { gmaps4rails_geolocation_failure(true); }
});
} else {
- if(typeof gmaps4rails_geolocation_failure == 'function') { gmaps4rails_geolocation_failure(false); }
+ if(this.fnSet("gmaps4rails_geolocation_failure")) { gmaps4rails_geolocation_failure(false); }
}
},
@@ -447,7 +448,7 @@ var Gmaps4Rails = {
if (this.markerClusterer !== null){
this.markerClusterer.clearMarkers();
}
- for (var i = 0; i < this.markers.length; ++i) {
+ for (var i = 0; i < this.markers.length; ++i) {
this.clear_marker(this.markers[i]);
}
},
@@ -458,7 +459,7 @@ var Gmaps4Rails = {
// show and hide markers
show_markers: function() {
- for (var i = 0; i < this.markers.length; ++i) {
+ for (var i = 0; i < this.markers.length; ++i) {
this.show_marker(this.markers[i]);
}
},
@@ -468,7 +469,7 @@ var Gmaps4Rails = {
},
hide_markers: function() {
- for (var i = 0; i < this.markers.length; ++i) {
+ for (var i = 0; i < this.markers.length; ++i) {
this.hide_marker(this.markers[i]);
}
},
@@ -508,9 +509,14 @@ var Gmaps4Rails = {
for (var i = 0; i < this.markers.length; ++i) {
gmarkers_array.push(this.markers[i].google_object);
}
-
-
- this.markerClusterer = new MarkerClusterer(this.map, gmarkers_array, { maxZoom: this.markers_conf.clusterer_maxZoom, gridSize: this.markers_conf.clusterer_gridSize });
+ var clustererStyle = null;
+ if(this.fnSet("gmaps_custom_clusterer_pic")) {
+ clustererStyle = gmaps_custom_clusterer_pic();
+ }
+ this.markerClusterer = new MarkerClusterer( this.map,
+ gmarkers_array,
+ { maxZoom: this.markers_conf.clusterer_maxZoom, gridSize: this.markers_conf.clusterer_gridSize, styles: clustererStyle }
+ );
}
},
@@ -524,7 +530,6 @@ var Gmaps4Rails = {
var info_window = new google.maps.InfoWindow({content: marker_container.description });
//add the listener associated
google.maps.event.addListener(marker_container.google_object, 'click', this.openInfoWindow(info_window, marker_container.google_object));
-
},
openInfoWindow: function(infoWindow, marker) {
@@ -634,6 +639,10 @@ var Gmaps4Rails = {
exists: function(var_name) {
return (var_name !== "" && typeof var_name !== "undefined");
},
+ //check existence of function
+ fnSet: function(fn_name){
+ return(typeof fn_name == 'function');
+ },
//randomize
randomize: function(Lat0, Lng0) {
@@ -1,6 +1,47 @@
<% content_for :scripts do -%>
-
+<script src="http://google-maps-utility-library-v3.googlecode.com/svn/trunk/markerclusterer/src/data.json" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
+var url = "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0";
+var styles = [{
+ url: url + '/images/conv30.png',
+ height: 27,
+ width: 30,
+ anchor: [3, 0],
+ textColor: '#FF00FF',
+ opt_textSize: 10
+ }, {
+ url: url + '/images/conv40.png',
+ height: 36,
+ width: 40,
+ opt_anchor: [6, 0],
+ opt_textColor: '#FF0000',
+ opt_textSize: 11
+ }, {
+ url: url + '/images/conv50.png',
+ width: 50,
+ height: 45,
+ opt_anchor: [8, 0],
+ opt_textSize: 12
+ }];
+function gmaps_custom_clusterer_pic() {
+ var url = "http://gmaps-utility-library.googlecode.com/svn/trunk/markerclusterer/1.0";
+ return [
+ {
+ url: url + '/images/heart30.png',
+ height: 26,
+ width: 30,
+ },
+ {
+ url: url + '/images/heart40.png',
+ height: 35,
+ width: 40,
+ },
+ {
+ url: url + '/images/heart50.png',
+ width: 50,
+ height: 44,
+ }];
+ }
var builder2 = [{"description": "",
"title": "",
"longitude": "5.9311119",
@@ -103,8 +144,11 @@ function gmaps4rails_geolocation_failure(browser_support) {
"markers" => {"data" => @json}
}) %>
<%#= gmaps(@options) %>
-<%= gmaps("markers" => {"anchor" => "bottom_right", "data" => @json, "options" => {"list_container" => "markers_list", "do_clustering" => true } },
- "map_options" => { "auto_adjust" => false, "center_on_user" => true, "zoom" => 25 }) %> <%#"bounds" => '[{"lat": 0, "lng": 10 }, {"lat": 20, "lng": 110 } ]'
+<%= gmaps("markers" => {"data" => @json, "options" => {"do_clustering" => true, } },
+ "map_options" => { "auto_adjust" => true, "center_on_user" => false, "zoom" => 5 }) %>
+
+
+<%#"bounds" => '[{"lat": 0, "lng": 10 }, {"lat": 20, "lng": 110 } ]'
%>
<%#= gmaps({"map_options" => { "auto_adjust" => true } }) %> <%#"bounds" => '[{"lat": 0, "lng": 10 }, {"lat": 20, "lng": 110 } ]'
%>
@@ -113,17 +157,16 @@ function gmaps4rails_geolocation_failure(browser_support) {
function gmaps4rails_callback() {
//google.maps.event.addListener(Gmaps4Rails.map, 'click', function(event){ Gmaps4Rails.bounds = event; new google.maps.Marker({position: event.latLng, map: Gmaps4Rails.map});});
- $("#markers_list").children().first().click(function(){alert('clicked');});
+ //$("#markers_list").children().first().click(function(){alert('clicked');});
}
</script>
<% end %>
-<button type="button" onclick="Gmaps4Rails.replace_markers(builder2)">Replace Markers</button>
+<button type="button" onclick="Gmaps4Rails.replace_markers(data.photos)">Replace Markers</button>
<button type="button" onclick="Gmaps4Rails.add_markers(builder2)">Add Markers</button>
<button type="button" onclick="Gmaps4Rails.add_markers(builder3)">Add Markers bis</button>
<button type="button" onclick="add_all()">Add all</button>
<div>
<ul id="markers_list"></ul>
</div>
-<div id="instructions"></div>
-<div id="val">value</div>
+<div id="instructions"></div>

0 comments on commit 4918a0d

Please sign in to comment.