Cluster nearby locations

[fkh]

[BenSturmfels]

In the interim, for anyone looking to do this, download a copy of Leaflet MarkerCluster http://leaflet.github.io/Leaflet.markercluster/ and pop it in your src/sa_web/static/libs directory eg. src/sa_web/static/libs/Leaflet.markercluster-1.1.0/.

In templates/base.html, load the JS and CSS (update the exact paths to match your system):

<script src="{% static 'libs/Leaflet.markercluster-1.1.0/dist/leaflet.markercluster.js' %}"></script>
<link rel="stylesheet" type="text/css" href="{% static 'libs/Leaflet.markercluster-1.1.0/dist/MarkerCluster.css %">
<link rel="stylesheet" type="text/css" href="{% static 'libs/Leaflet.markercluster-1.1.0/dist/MarkerCluster.Default.css %">

In src/sa_web/static/js/views/map-view.js:22 update such as follows:

      // Init the map
      self.map = L.map(self.el, self.options.mapConfig.options);
      self.placeLayers = L.layerGroup();
      self.placeLayers = L.markerClusterGroup({
        showCoverageOnHover: false,
        maxClusterRadius: 100,
        spiderfyOnMaxZoom: true,
        zoomToBoundsOnClick: true,
        disableClusteringAtZoom: 17,
        spiderLegPolylineOptions: {
          weight: 2,
          color: '#a13838',
          opacity: 1
        }
      });

Could also put these into a flavor-specific template/js file.