{"id":3073,"date":"2015-01-05T15:51:21","date_gmt":"2015-01-05T14:51:21","guid":{"rendered":"https:\/\/www.devco.net\/?p=3073"},"modified":"2015-01-05T15:54:28","modified_gmt":"2015-01-05T14:54:28","slug":"marker-clustering-using-gmaps-js","status":"publish","type":"post","link":"https:\/\/www.devco.net\/archives\/2015\/01\/05\/marker-clustering-using-gmaps-js.php","title":{"rendered":"Marker clustering using GMaps.js"},"content":{"rendered":"<p>In <a href=\"https:\/\/www.devco.net\/archives\/2014\/12\/26\/ruby-google-maps-and-kml.php\">a previous post<\/a> I showed that I am using a KML file as input into <a href=\"https:\/\/hpneo.github.io\/gmaps\/\">GMaps.js<\/a> to put a bunch of points on a map for my <a href=\"http:\/\/travels.devco.net\/\">travels<\/a> site.  This worked great, but I really want to do some marker clustering since too many points is pretty bad looking as can be seen below.<\/p>\n<p><center><img decoding=\"async\" src=\"\/images\/map_unclustered.png\"><\/center><\/p>\n<p>I&#8217;d much rather do some clustering and expand out to multiple points when you zoom in like here:<\/p>\n<p><center><img decoding=\"async\" src=\"\/images\/map_clustered.png\"><\/center><\/p>\n<p>Turns out there are a few libraries for this already, I started out with one called <a href=\"https:\/\/github.com\/googlemaps\/js-marker-clusterer\">Marker Clusterer<\/a> but ended up with a improved version of this called <a href=\"https:\/\/github.com\/mahnunchik\/markerclustererplus\">Marker Clusterer Plus<\/a>.  And GMaps.js supports cluster libraries natively so should be easy, right?<\/p>\n<p>Turns out the way Google maps loads KML files is done using a layer over the map and the points just are not accessible to any libraries, so the cluster libraries does nothing.  Ok, so back to drawing points using my code.<\/p>\n<p>I added a endpoint to the app that emits my points as JSON:<\/p>\n<pre lang=\"javascript\">\r\n[\r\n  {\"type\":\"visit\",\r\n   \"country\":\"Finland\",\r\n   \"title\":\"Helsinki\",\r\n   \"lat\":60.1333,\r\n   \"popup_html\":\"<p>\\n<font size=\\\"+2\\\">Helsinki<\/font>\\n<hr>\\nBusiness trip in 2005<br \/><br \/>\\n\\n<\/p>\\n\",\r\n   \"comment\":\"Business trip in 2005\",\r\n   \"lon\":25,\r\n   \"icon\":\"\/markers\/marker-RED-REGULAR.png\"}\r\n]\r\n<\/pre>\n<p>Now adding all the points and getting them clustered is pretty easy:<\/p>\n<pre lang=\"javascript\">\r\n<script type=\"text\/javascript\">\r\n    var map;\r\n    function addPoints(data) {\r\n      var markers_data = [];\r\n      if (data.length > 0) {\r\n        for (var i = 0; i < data.length; i++) {\r\n          markers_data.push({\r\n            lat: data[i].lat,\r\n            lng: data[i].lon,\r\n            title: data[i].title,\r\n            icon: data[i].icon,\r\n            infoWindow: {\r\n              content: data[i].popup_html\r\n            },\r\n          });\r\n        }\r\n      }\r\n      map.addMarkers(markers_data);\r\n    }\r\n\r\n    $(document).ready(function(){\r\n      infoWindow = new google.maps.InfoWindow({});\r\n      map = new GMaps({\r\n        div: '#main_map',\r\n        zoom: 15,\r\n        lat: 0,\r\n        lng: 20,\r\n        markerClusterer: function(map) {\r\n          options = {\r\n            gridSize: 40\r\n          }\r\n\r\n          return new MarkerClusterer(map, [], options);\r\n        }\r\n      });\r\n\r\n      points = $.getJSON(\"\/points\/json\");\r\n      points.done(addPoints);\r\n    });\r\n<\/script>\r\n<\/pre>\n<p>This is pretty simple, the GMaps() object takes a <em>markerClusterer<\/em> option that expects an instance of the clusterer. I fetch the JSON data and each row gets added as a point. Then it all just happens automagically.  Marker Clusterer Plus can take <a href=\"http:\/\/google-maps-utility-library-v3.googlecode.com\/svn\/trunk\/markerclustererplus\/docs\/reference.html\">a ton of options<\/a> that lets you specify custom icons, grid sizes, tweak when to kick in clustering etc.  Here I am just setting the gridSize to show how to do that. In this example I have custom icons used for the clustering, might blog about that later when I figured out how to get them to behave perfectly.<\/p>\n<p>You can see this in action on <a href=\"http:\/\/travels.devco.net\/\">my travel site<\/a>.  As an aside I've taken a bit of time to document <a href=\"https:\/\/github.com\/ripienaar\/travlrmap#setup\">how the Sinatra app works<\/a> and put together a <a href=\"https:\/\/github.com\/ripienaar\/travlrmap-demo\">demo deployable to Heroku<\/a> that should give people hints on how to get going if anyone wants to make a map of their own.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In a previous post I showed that I am using a KML file as input into GMaps.js to put a bunch of points on a map for my travels site. This worked great, but I really want to do some marker clustering since too many points is pretty bad looking as can be seen below. [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_et_pb_use_builder":"","_et_pb_old_content":"","footnotes":""},"categories":[7],"tags":[121,114,113,13],"_links":{"self":[{"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/posts\/3073"}],"collection":[{"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/comments?post=3073"}],"version-history":[{"count":9,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/posts\/3073\/revisions"}],"predecessor-version":[{"id":3082,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/posts\/3073\/revisions\/3082"}],"wp:attachment":[{"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/media?parent=3073"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/categories?post=3073"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.devco.net\/wp-json\/wp\/v2\/tags?post=3073"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}