add version 2.0

eballo · Mar 2, 2015 · 4b15d82 · 4b15d82
2 parents e024b51 + 609149c
commit 4b15d82
Show file tree

Hide file tree

Showing 8 changed files with 64 additions and 40 deletions.
diff --git a/README.md b/README.md
@@ -1,11 +1,12 @@
 # Interactive Map of Catalunya using GoogleMaps - Demo
 Interactive vectorial map of Catalunya using GoogleMaps library.
 
-<img src="https://github.com/eballo/catalunya-gmap/blob/master/screenshot/screenshot-v1.png" alt="screen-shot" align="center" />
+<img src="https://github.com/eballo/catalunya-gmap/blob/master/screenshot/screenshot-v2.png" alt="screen-shot" align="center" />
 
 ## Demo
 
 - [Demo v1.0](http://demo.catalunyamedieval.es/gmap1)
+- [Demo v2.0](http://demo.catalunyamedieval.es/gmap2)
 
 # Marker cluster Info
 http://code.google.com/p/google-maps-utility-library-v3/wiki/Libraries
@@ -53,4 +54,4 @@ V1.0
 - Create a Map using catmap libs
 
 V2.0
-- Markers clustering ( work in progress )
+- Markers clustering
diff --git a/index.html b/index.html
@@ -1,6 +1,6 @@
 <html>
 <head>
-	<title>Interactive Map of Catalunya using GoogleMaps API - Demo V1.0</title>
+	<title>Interactive Map of Catalunya using GoogleMaps API - Demo V2.0</title>
 	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 	<meta name="description" content="GoogleMaps gMap Catalunya Map">
 	<meta name="author" content="Enric Ballo">
@@ -11,7 +11,7 @@
 </head>
 <body>
 
-	<h1>Interactive Map of Catalunya using GoogleMaps API - Demo V1.0</h1>
+	<h1>Interactive Map of Catalunya using GoogleMaps API - Demo V2.0</h1>
 	<h4> :: Catalunya Medieval Project - <a href="http://www.catalunyamedieval.es/" target="_blank" title="Catalunya Medieval">www.catalunyamedieval.es</a> ::</h4>
 
 	<a href="https://github.com/eballo/catalunya-gmap"><img style="position: absolute; top: 0; right: 0; border: 0;" src="img/forkme_right_darkblue.png" alt="Fork me on GitHub"></a>
@@ -22,14 +22,13 @@ <h4> :: Catalunya Medieval Project - <a href="http://www.catalunyamedieval.es/"
 			<div id="gMap"></div>
 		</div>
 		<script type="text/javascript" src="https://maps.google.com/maps/api/js?sensor=false"></script>
+		<script type="text/javascript" src="js/castells.js" ></script>
+		<script type="text/javascript" src="js/markercluster_min.js" ></script>
 		<script type="text/javascript" src="js/catalunya-list.js" ></script>
 		<script type="text/javascript" src="js/catalunya-catmap.js" ></script>
 		<script type="text/javascript" src="js/catalunya-options-gmap.js" ></script>
 		<script type="text/javascript" src="js/catalunya-gmap.js" ></script>
 
-
-
-
 		<div id="info">
 			<table class="description" cellspacing="10" cellpadding="10">
 			<tbody>

diff --git a/js/castells.js b/js/castells.js
diff --git a/js/catalunya-catmap.js b/js/catalunya-catmap.js
@@ -4,6 +4,7 @@
  	function Catmap(element, opts){
  		this.gMap = new google.maps.Map(element, opts);
  		this.markers = List.create();
+ 		this.markerClusterer = new MarkerClusterer(this.gMap, []);
  	}
  	Catmap.prototype ={
 
@@ -32,6 +33,10 @@
 
  			// create the marker with the given options
  			marker = this._createMarker(opts);
+
+ 			// Add marker to the marker cluster
+ 			this.markerClusterer.addMarker(marker);
+
  			// Add the created marker to the markers array
  			this.markers.add(marker);
 
@@ -69,9 +74,14 @@
 
  		// Public function to removeBy given a callback function
  		removeBy: function(callback){
- 			this.markers.find(callback, function(markers){
+ 			var self = this;
+ 			self.markers.find(callback, function(markers){
  				markers.forEach(function(marker){
- 					marker.setMap(null);
+ 					if(self.markerClusterer){
+ 						self.markerClusterer.removeMarker(marker);
+ 					}else{
+ 						marker.setMap(null);		
+ 					}
  				});
  			});
  		},

diff --git a/js/catalunya-gmap.js b/js/catalunya-gmap.js
@@ -9,36 +9,29 @@
 	//create the map
 	var map = catmap.create(element, options);
 
-	map.addMarker({
-		lat: 42.307682, 
-		lng: 3.011110,
-		drabagle: false,
-		visible: true,
-		id:1,
-		content: 'Castell de la Montanya'
-	});
-
-	map.addMarker({
-		lat: 42.000682, 
-		lng: 3.071110,
-		drabagle: false,
-		visible: true,
-		id:2,
-		content: 'Castell de la Montanya test 2'
-	});
-
-	var found = map.findBy(function(marker){
-		return marker.id === 2;
-	});
-
-	console.log(map.markers);
-
-/*
-	map._on('click', function(e){
-		alert('click');
-		console.log(e);
-		console.log(this);
+	//console.log(aCastells);
+
+	for(var x =0; x < aCastells.length; x ++){
+
+		map.addMarker({
+			id: x,
+			lat: Number(aCastells[x].position.lat), 
+			lng: Number(aCastells[x].position.lng),
+			visible: true,
+			content: aCastells[x].title,
+			icon: 'http://www.catalunyamedieval.es/wp-content/themes/catalunyamedieval/images/gmap/militar/castell/castell7.png'
+		});
+	}
+
+	//console.log(map.markers);
+
+	/*
+	map.removeBy(function(marker){
+		if(marker.id === 0){
+			console.log(marker);
+		}
+		return marker.id ===0;
 	});
-*/
+	*/
 
 }(window, window.Catmap ));
diff --git a/js/catalunya-options-gmap.js b/js/catalunya-options-gmap.js
@@ -13,7 +13,7 @@ var catalunya = new google.maps.LatLng(latitud, longitude);
 catmap.MAP_OPTIONS = {
 	center: catalunya,
 	zoom: 7,
-	maxZoom: 10,
+	maxZoom: 20,
 	minZoom: 4,
 	streetViewControl: false,
 	disableDefaultUI: false,

diff --git a/js/markercluster_min.js b/js/markercluster_min.js
diff --git a/screenshot/screenshot-v2.png b/screenshot/screenshot-v2.png