Nuraghi with Google maps

06/01/2010 20:42:15

Nuraghi with Google maps

In the past days I have been working on improving the rendering of the map of nuraghi. I was not completely satisfied with the first version because it took some time to load the large number of entries for the map. The first solution was built using the markerclusterer class and using a treeview of the nuraghi with a full list of the entries ordered by province and by place. Each marker has an infowindow and each entry in the treeview zoomed in to the location of the nuraghe on the map. First of all the loading of 930 nuraghi (and I stopped creating new entries because there should be over 6000) took several seconds, but worse was the time the javascript took to zoom in to the nuraghe when clicking on the entry in the treeview. Probably this was due to the code of the markerclusterer or I may have made some error. Nonetheless I searched for better ways to render the markers. I stumbled upon two articles, one from Google itself and another in a blog where different solutions were discussed. The Google article showed how to render markers using a subset of entries based on a central point and a radius of say 20 miles around, using the Haversine formula. The idea was appealing but was only in part useful for my purpose. The blog article mentioned a solution by a company that created hierarchies (Modified Preorder Trees, a kind of clusters) before rendering the map. However it did not give any code samples. My solution adopted here is to use the hierarchy of the entries already contained in the database, by province and by place, to render clustermarkers at certain zoomlevels, and at higher zoomlevels to use the GLatLngBounds object to get the map area and render all markers within that map area. On moving around the map a new query is launched and the markers are placed again on the map. Some finetuning is still needed ofcourse, because relaunching a query on every move is not sensible and can be rationalized, but the solution fits perfectly with the listing in the treeview and zooming in does not cause the javascript to exceed runtimes.
In short for the lowest zoomlevels (ranging from 1 to 9) the clustermarkers (really div elements) show the data for the provinces and the number of nuraghi, while at the intermediate level (up to 11) the clustermarkers show the data for single places with the number of nuraghi. The div elements have a background image (the icon) while the marker is transparant and contains the call to the infowindow with the data on the number of nuraghi and the province and place names. When zooming in to zoomlevel 12 and higher the markers are rendered individually, each indicating a nuraghe, also with it's own infowindow that shows the information on the nuraghe. In this way adding up to 6000 entries should not slow down the rendering of the page, and additional information to be displayed in the infowindow will not slow down the loading of the data too much. It even becomes quite nice to see the markers rendered at the higher zoomlevels and for the visitor it is even fun playing and clicking around.

Nuraghi with Google maps

©2019 Tharros.info Sitemap Privacy Contact