WordPress pronamic map plugin : add MarkererCluster function

The Pronamic map plugin is the best free replacement for the mappress plugin, which I buyed and  used for professionnal work. Well Pronamic map plugin comes with mashup functions but has not yet integrated the new google Cluster function, which aggreagtes multiple markes from the same location to a single one . We  publish here an update for the buildMashup function from the site.js file, which incorporates the clustering that you can view live on my brittany photogaphy web site. you will also need to include the markercluster script in your header or javascript enqueue function.

 

		buildMashup: function(s) { 
			var element = $(s);

			var list = element.find("ul");

			var mashupInfo = $.parseJSON(element.find('input[name="pgmm-info"]').val());

			var canvas = element.find(".canvas").get(0);

			if(canvas) {
				if(mashupInfo.hideList) {
					list.hide();
				}
				
				var center = new google.maps.LatLng(mashupInfo.center.latitude, mashupInfo.center.longitude);
				if(google.loader.ClientLocation) {
					center = new google.maps.LatLng(google.loader.ClientLocation.latitude, google.loader.ClientLocation.longitude);
				}

				// Map options
				var mapOptions = $.extend({
						center: center 
					} , 
					mashupInfo.mapOptions
				);

				var map = new google.maps.Map(canvas, mapOptions);

				// Associated the Google Maps with the element so other developers can easily retrieve the Google Maps object
				element.data("google-maps", map);

				// Create one info window where the details from the posts will be displayed in
				var infoWindow = new google.maps.InfoWindow();
				
				// Create an bounds object so we can fit the map to show all posts
				var bounds = new google.maps.LatLngBounds();
                 var markers = [];  
				// Create markers for all the posts
				list.find("li").each(function() {
					var item = $(this);

					// Retrieve location information from an (hidden) input field with JSON data
					var info = $.parseJSON(item.find('input[name="pgm-info"]').val());

					var location =  new google.maps.LatLng(info.latitude, info.longitude);

					var markerOptions = $.extend({
							position: location , 
							map: map 
						} , 
						info.markerOptions
					);

					var marker = new google.maps.Marker(markerOptions);
                     markers.push(marker);
					item.data("google-maps-marker", marker);

					google.maps.event.addListener(marker, "click", function() {
						infoWindow.setContent(item.html());
						infoWindow.open(map, marker);
					});
					
					// Extends the bounds object with this location so we can fit the map to show all posts
					bounds.extend(location);
				});
                    var markerCluster = new MarkerClusterer(map, markers, { gridSize: 60,maxZoom: 8}); //poleouest
				if(mashupInfo.fitBounds) {
					map.fitBounds(bounds);
				}

				// Trigger ready event
				element.trigger("pronamic-google-maps-ready", map);
			}
		}

Ecommerce with wordpress, a gold rush

Our first wordpress ecommerce plugin comparison, a while ago, is getting outdated quickly as new solutions come to the market. It is now obvious that professionnal wordpress ecommerce is possible, with functions that come near to magento or prestashop, first one being costly and sercond one being not so customizable.  Well wordpress solutions are now mature and I would suggest to investigate those who rely on custom post type, as this guarantees long term compatibility with wordpress evolution and plugins.

Enter wp shopified ( http://www.wp-shopified.com/)

wp shopified costs less than 50$ and for that price you get a codebase that is tighlty integrated into core features of wordpress : 

  • products are wordpress custom post types
  • wordpress user base
  • menu is generated with worpdress menu system
  • thumbnails are generated with worpdress core functions 


Jquery image wall

We're working on an innovative  front end for our popular Eyelash image gallery management tool. Here are a few examples of what we are trying to achieve, one objective would be to build a dynamic 3D image wall . first example is the amazing snowstack jquery 3D wall which creates an impressive 3D rendering of the image wall from youtube video screenshots. other nice scripts include

HTML / Jquery based

  • Photomosaic is a wordpress plugin that creates a 2D image wall from image gallery files
  • The wall has three possible iamge layouts, creates a wall of images within a div, or full page

Flash based