Leaflet Clustering with multiple layers (use MarkerCluster.LayerSupport?)

Viewed 5152

Alright, so I've tried and failed a number of times and dug through SE hoping to figure out my problems.

I've been basing a lot of my work off this SE post: link.

I have been unable to make this work, mainly because of two errors, but the first one being an obvious hurdle to overcome first: enter image description here

Error 1:

Uncaught SyntaxError: Unexpected token <

Error 2:

Uncaught TypeError: L.markerClusterGroup.layerSupport is not a function

So, I would like clustering to work with any layer that is turned on via the L.control.layers() function.

Here is my page, as it sits now: TN Alcohol Map

And the code, sans headers/misc:

// initialize the map
var map = L.map('map').setView([36.17, -86.78], 7);

// load a tile layer/base map
L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png',
{
  attribution: 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
  maxZoom: 18,
  minZoom: 7
}).addTo(map);

//attributes for basemap credit (lower right hand corner annotation)
var streetsAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';
var aerialAttr = 'Tiles &copy; Esri &mdash; Source: Esri, i-cubed, USDA, USGS, AEX, GeoEye, Getmapping, Aerogrid, IGN, IGP, UPR-EGP, and the GIS User Community';
var artsyfartsyAttr = 'Map tiles by <a href="http://stamen.com">Stamen Design</a>, <a href="http://creativecommons.org/licenses/by/3.0">CC BY 3.0</a> &mdash; Map data &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>';

//crete variables for the base map layer switcher
var streets = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/terrain/{z}/{x}/{y}.png', {id: 'MapID', attribution: streetsAttr}),
    aerial   = L.tileLayer('http://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/tile/{z}/{y}/{x}', {id: 'MapID', attribution: aerialAttr}),
    artsyfartsy = L.tileLayer('http://stamen-tiles-{s}.a.ssl.fastly.net/toner/{z}/{x}/{y}.png', {id: 'MapID', attribution: artsyfartsyAttr});

//create baseMaps variable to store basemap layer switcher
var baseMaps = {
    "Streets": streets,
    "Aerial": aerial,
    "ArtsyFartsy": artsyfartsy
};

// BEER icon & load beer geojson
var beerIcon = L.icon({
  iconUrl: 'glass.png',
  iconSize: [24, 48]
});

var beerMarker = L.geoJson(false, {
  pointToLayer: function(feature, latlng) {
    var marker = L.marker(latlng, {
      icon: beerIcon
    });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
      feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
    return marker;
  }
}).addTo(map);

$.getJSON("breweries.geojson", function(data) {
  beerMarker.addData(data);
});

// WINE icon & load wine geojson
var wineIcon = L.icon({
  iconUrl: 'wine.png',
  iconSize: [48, 48]
});

var wineMarker = L.geoJson(false, {
  pointToLayer: function(feature, latlng) {
    var marker = L.marker(latlng, {
      icon: wineIcon
    });
    //popup shows NAME, ADDRESS, URL and opens the URL in a new window/tab
    marker.bindPopup("<strong>" + feature.properties.NAME + "</strong><br/>" + feature.properties.STREETNUM + " " + feature.properties.STREET + ", " + feature.properties.CITY + "<br/>" + "<a target = _blank href=" +
      feature.properties.URL + ">" + feature.properties.URLDISPLAY + "</a>");
    return marker;
  }
}).addTo(map);

$.getJSON("wine.geojson", function(data) {
  wineMarker.addData(data);
});

//Define overlay maps (non-base layer maps)
var overlayMaps = {
    "Breweries": beerMarker,
    "Wineries": wineMarker
}; 

//Creates a Marker Cluster Group
var mcg = L.markerClusterGroup.layerSupport().addTo(map);

//Checking in the 'sub groups'
mcg.checkIn([
    beerMarker,
    wineMarker
]);

//baseMaps layer switcher
L.control.layers(baseMaps, overlayMaps).addTo(map);
1 Answers
Related