add cluster visualization

Gulpfile.js

@@ -5,7 +5,7 @@ var reload      = browserSync.reload;
 var paths = {
     css: 'assets/css',
     scss: 'assets/scss/*.scss',
-    js: 'assets/js/*.js'
+    js: 'assets/**/*.js'
 };
 gulp.task('sass-min', function () {
     return gulp.src(paths.scss,

assets/js/model/app.js

@@ -60,6 +60,13 @@ App.prototype.addFilter = function(name, attribute, condition, value){
 		}
 	}
 
+	//find cluster visualization and update data based on filters
+	for(var index = 0; index < this.visualizations.length; index++){
+		if(this.visualizations[index].type === "cluster"){
+			this.visualizations[index].visualization.updateClusterData(this.data.features);
+		}
+	}
+
 	//find euclidian visualization and update data based on filters
 	for(var index = 0; index < this.visualizations.length; index++){
 		if(this.visualizations[index].type === "euclidian"){
@@ -171,6 +178,13 @@ App.prototype.removeFilter = function(filter){
 		}
 	}
 
+	//find cluster visualization and update data based on filters
+	for(var index = 0; index < this.visualizations.length; index++){
+		if(this.visualizations[index].type === "cluster"){
+			this.visualizations[index].visualization.updateClusterData(this.data.features);
+		}
+	}
+
 	//find euclidian visualization and update data based on filters
 	for(var index = 0; index < this.visualizations.length; index++){
 		if(this.visualizations[index].type === "euclidian"){
@@ -211,6 +225,14 @@ App.prototype.toggleHeatmap = function(){
 	}
 }
 
+App.prototype.toggleCluster = function(){
+	for(var index = 0; index < this.visualizations.length; index++){
+		if(this.visualizations[index].type === "cluster"){
+			this.visualizations[index].visualization.toggleCluster(this.map);
+		}
+	}
+}
+
 App.prototype.toggleMarkers = function(){
 	this.map.toggleMarkers();
 	//reaply filters when visible
@@ -332,6 +354,8 @@ App.prototype.saveApplication = function(){
 			json_application += '{"name": "'+this.visualizations[index].name+'", "type": "'+this.visualizations[index].type+'", "euclidian_number": "'+this.visualizations[index].visualization.euclidian_number+'"}'
 		}else if(this.visualizations[index].type == "chart"){
 			json_application += '{"name": "'+this.visualizations[index].name+'", "type": "'+this.visualizations[index].type+'", "attribute": "'+this.visualizations[index].visualization.attributes+'", "chart_type": "'+this.visualizations[index].visualization.type+'"}'
+		}else if(this.visualizations[index].type == "heatmap" || this.visualizations[index].type == "cluster"){
+			json_application += '{"name": "'+this.visualizations[index].name+'", "type": "'+this.visualizations[index].type+'"}'
 		}else{
 			json_application += '{"name": "'+this.visualizations[index].name+'", "type": "'+this.visualizations[index].type+'", "attribute": "'+this.visualizations[index].attribute+'"}'
 		}

assets/js/model/cluster.js

@@ -0,0 +1,25 @@
+var ClusterVis = function(map) {
+    this.markerCluster = null;
+
+    this.initCluster(map);
+};
+
+ClusterVis.prototype.initCluster = function(map){
+    this.markerCluster = new MarkerClusterer(
+        map.gmap, 
+        map.getMarkers(),
+        {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
+    );
+}
+
+ClusterVis.prototype.destroy = function(){
+    this.markerCluster.setMap(null);
+}
+
+ClusterVis.prototype.updateClusterData = function(map){
+    this.initCluster(map);
+}
+
+ClusterVis.prototype.toggleCluster = function(map){
+    this.markerCluster.setMap(this.markerCluster.getMap() ? null : map.gmap);
+}

assets/js/model/lineChart.js

@@ -32,6 +32,7 @@ LineChart.prototype.cleanChartDataNullIndex = function(){
   this.processed_data.clean(undefined);
   console.log(this.processed_data);
 }
+
 LineChart.prototype.initChart = function(div){
     var data = new google.visualization.DataTable();
     data.addColumn('string', 'Id');

assets/js/model/map.js

@@ -109,6 +109,15 @@ Map.prototype.addMarkers = function (features){
 
 		var image = {
 			url: 'assets/img/marker.gif',
+			// url: 'https://chart.googleapis.com/chart?chs=500x200&chd=t:120,80&cht=p3&chl=aaa|World&chf=bg,s,FFFFFF00',
+			//https://chart.googleapis.com/chart?chs=500x200&chd=t:120,80&cht=p3&chl=aaa|World&chf=bg,s,FFFFFF00
+			//https://chart.googleapis.com/chart?chs=500x200&chd=t:120,80&cht=p&chl=aaaaaaa|bbbbb&chf=bg,s,FFFFFF00
+			//https://developers.google.com/chart/image/docs/chart_params#gcharts_rgb
+			//https://developers.google.com/chart/image/docs/chart_params#gcharts_solid_fills
+			//https://developers.google.com/chart/image/docs/data_formats#encoding_data
+			//https://developers.google.com/chart/image/docs/data_formats
+			//https://developers.google.com/chart/image/docs/gallery/dynamic_icons
+			//https://stackoverflow.com/questions/12698003/save-a-google-chart-as-svg
 			size: new google.maps.Size(65, 35),
 			origin: new google.maps.Point(0, 0),
 			anchor: new google.maps.Point(33, 33),
@@ -149,6 +158,14 @@ Map.prototype.addMarkers = function (features){
 
 	//this.gmap.fitBounds(bounds);
 
+	// var markerCluster = new MarkerClusterer(
+		// this.gmap, 
+		// this.markers,
+        // {imagePath: 'https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/m'}
+    // );
+    //https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
+    //https://github.com/googlemaps/v3-utility-library
+
 }
 
 //click event window

assets/js/model/visualization.js

@@ -37,6 +37,8 @@ var Visualization = function(name, type, map, data, attribute, chart_type, eucli
 		this.visualization = new Euclidian(map, data, euclidian_number);
 	}else if(this.type === "chart"){
 		this.visualization = new Chart(name, data, attribute, chart_type);
+	}else if(this.type === "cluster"){
+		this.visualization = new ClusterVis(map);
 	}
 
 };

assets/js/script.js

@@ -155,6 +155,10 @@ $(document).ready(function(){
 					app1.addMapVisualization(name, type, null);
 					console.log("add heatmap");
 					$("#modalClose").trigger("click");	//close modal
+				}else if(type == "cluster"){
+					app1.addMapVisualization(name, type, null);
+					console.log("add cluster");
+					$("#modalClose").trigger("click");	//close modal
 				}else if(type == "convexhull"){
 					app1.addMapVisualization(name, type, null);
 					console.log("add convex hull");
@@ -294,6 +298,7 @@ $(document).ready(function(){
 
 		content += '<label for="inputVisAddType">Tipo da visualização</label><select id="inputVisAddType">'+
 						'<option value="heatmap">Mapa de calor</option>'+
+						'<option value="cluster">Cluster</option>'+
 						'<option value="chart">Gráfico</option>'+
 						'<option value="line">Linha</option>'+
 						'<option value="euclidian">Distância Euclidiana</option>'+
@@ -544,6 +549,8 @@ $(document).ready(function(){
 			app1.toggleMarkers();
 		} else if(target === "heatmap"){
 			app1.toggleHeatmap();
+		} else if(target === "cluster"){
+			app1.toggleCluster();
 		} else if(target === "chart"){
 			app1.toggleCharts();
 		} else if(target === "line"){

index.html

@@ -36,10 +36,11 @@
                 <h3>Camadas</h3>
                 <p class="layerItem"><input id="layer_1" value="markers" type="checkbox" class="toggleLayers" checked/> Marcadores</p>
                 <p class="layerItem"><input id="layer_2" value="heatmap" type="checkbox" class="toggleLayers" checked/> Mapa de Calor</p>
-                <p class="layerItem"><input id="layer_3" value="chart" type="checkbox" class="toggleLayers" checked/> Gráficos</p>
-                <p class="layerItem"><input id="layer_4" value="line" type="checkbox" class="toggleLayers" checked/> Linhas</p>
-                <p class="layerItem"><input id="layer_5" value="convexhull" type="checkbox" class="toggleLayers" checked/> Fecho Convexo</p>
-                <p class="layerItem"><input id="layer_6" value="euclidian" type="checkbox" class="toggleLayers" checked/> Distância Euclidiana</p>
+                <p class="layerItem"><input id="layer_3" value="cluster" type="checkbox" class="toggleLayers" checked/> Cluster</p>
+                <p class="layerItem"><input id="layer_4" value="chart" type="checkbox" class="toggleLayers" checked/> Gráficos</p>
+                <p class="layerItem"><input id="layer_5" value="line" type="checkbox" class="toggleLayers" checked/> Linhas</p>
+                <p class="layerItem"><input id="layer_6" value="convexhull" type="checkbox" class="toggleLayers" checked/> Fecho Convexo</p>
+                <p class="layerItem"><input id="layer_7" value="euclidian" type="checkbox" class="toggleLayers" checked/> Distância Euclidiana</p>
             </span>
             <span class="filters tabs">
                 <h3>Filtros</h3>
@@ -192,7 +193,9 @@ <h4 class="modal-title" id=""></h4>
 
         <!-- SCRIPTS -->
         <script type="text/javascript" src="https://www.google.com/jsapi"></script><!--Load the AJAX API-->
-        <script src="http://maps.googleapis.com/maps/api/js?sensor=false&libraries=visualization"></script><!-- Load MAPS 
+        <!-- <script src="https://developers.google.com/maps/documentation/javascript/examples/markerclusterer/markerclusterer.js"></script> -->
+        <script src="https://cdn.rawgit.com/googlemaps/v3-utility-library/master/markerclustererplus/src/markerclusterer.js"></script>
+        <script src="http://maps.googleapis.com/maps/api/js?key=AIzaSyB3B202UDbbPzCUO9UGp9-rlBQ8glIQ0uQ&libraries=visualization"></script><!-- Load MAPS 
         API -->
         <script src="assets/js/FileSaver.min.js"></script>
 
@@ -206,6 +209,7 @@ <h4 class="modal-title" id=""></h4>
         <script src="assets/js/model/feature.js"></script>
         <script src="assets/js/model/data.js"></script>
         <script src="assets/js/model/heatmap.js"></script>
+        <script src="assets/js/model/cluster.js"></script>
         <script src="assets/js/model/convex_hull.js"></script>
         <script src="assets/js/model/euclidian.js"></script>
         <script src="assets/js/model/line.js"></script>

package.json

@@ -0,0 +1,13 @@
+{
+  "name": "geovis",
+  "version": "1.0.0",
+  "private": false,
+  "scripts": {
+    "start": "gulp watch"
+  },
+  "devDependencies": {
+    "browser-sync": "^2.26.3",
+    "gulp": "^3.9.1",
+    "gulp-sass": "^4.0.2"
+  }
+}