[GIS] Possible to show aggregate votes in a tooltip on a markercluster

leafletmapbox

I'm building an interface that would take poll data in and show some results over a marker cluster using Mapbox but I don't have any experience with it.

The interface would look much like https://www.mapbox.com/mapbox.js/example/v1.0.0/leaflet-markercluster/

If you click on the cluster instead of zooming in a tooltip would show up with a breakdown of (yes/no) votes in a pie chart like this https://www.dropbox.com/s/hv4c8708wlhe4mt/Screenshot%202014-11-30%2015.27.53.png?dl=0

In the GeoJSON data I was thinking each data point would have a property to state the vote value and somehow I could look at them in aggregate at the cluster level

geoJSON structure

{
  "type": "Feature",
  "geometry": {
    "type": "Point",
    "coordinates": [125.6, 10.1]
  },
  "properties": {
    "vote": "yes" //no
  }
}

Is this possible using these libraries and geoJSON data structure? Am I on the right track?

Best Answer

The Leaflet markers clusterer can be used to show directly pie charts on the map. An example is visible on this map showing the breakdown of accidents in Oslo. The code behind is rather well explained and could be adapted for your case.

Related Solutions

[GIS] Incorporating custom/image markers into Leaflet MarkerCluster

You simply need to define a standard marker with your own icon, e.g. a PNG image, or alternatively with a L.circleMarker if you prefer a circle. You need to collect all markers on creation in an array without adding them to the map yet. You then add all markers to the marker clusterer, which you add in turn to the map.

Here is a simple example that should work, provided you have the MarkerClusterer files and your custom icon (my-icon.png) in the same directory:

<html>
<head>
  <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <link rel="stylesheet" href="MarkerCluster.css" />
  <link rel="stylesheet" href="MarkerCluster.Default.css" />
  <script src="http://cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="leaflet.markercluster.js"></script>
</head>
<body>
  <div id="map" style="width: 800px; height: 600px;">
  <script>
    var map = L.map('map', { maxZoom: 15 }).setView([48.5, 0.5], 10);
    L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
      attribution: '&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
          subdomains: ['otile1','otile2','otile3','otile4']
    }).addTo(map);
    var markers = [];
    var markerClusterer = L.markerClusterGroup({spiderfyDistanceMultiplier: 1.4});
    var myIcon = L.icon({
        iconUrl: 'my-icon.png',
        iconSize: [40, 40], iconAnchor: [20, 20], popupAnchor: [-20, -20]
    });
    var locations = [];
    for (var i=0; i < 1000; i++) { locations.push([Math.random()+48, Math.random()]); }
    for (var i=0; i < locations.length; i++){
      var m = L.marker([locations[i][0], locations[i][1]], { icon: myIcon });
      markers.push(m);
    }
    markerClusterer.addLayers(markers);
    map.addLayer(markerClusterer);
  </script>
</body>
</html>

[GIS] Leaflet markercluster – cluster/uncluster toggle

There is no 'uncluster' function to call per se, but you could keep both a clustered and unclustered version of your data available, and toggle between them when you click a button

var cluster = L.markerClusterGroup();
var marker = L.featureGroup();

for (var i = 0; i < points.length; i++) {
    var point = points[i];
    var marker = L.marker(new L.LatLng(point[0], point[1]));
    cluster.addLayer(marker);
    markers.addLayer(marker);
}

see: https://github.com/Leaflet/Leaflet.markercluster/issues/393

Best Answer

Related Solutions

[GIS] Incorporating custom/image markers into Leaflet MarkerCluster

[GIS] Leaflet markercluster – cluster/uncluster toggle

Related Question