Листовка Кластеризация с несколькими слоями (используйте MarkerCluster.LayerSupport?)

Question

Хорошо, поэтому я пробовал и терпел несколько раз и вырывался через SE, надеясь выяснить мои проблемы.

Я основываю много своих работ на этом посту SE: link.

Я был не в состоянии сделать эту работу, в основном из-за двух ошибок, но первый из которых является очевидным препятствием для преодоления первого:

Ошибка 1:

Uncaught SyntaxError: Unexpected token <

Ошибка 2:

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

Итак, я хотел бы, чтобы кластеризация работала с любым слоем, который включается через функцию L.control.layers().

Вот моя страница, как она сидит в настоящее время: TN Alcohol Map

И код, SANS заголовки/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); 

Answer 1

По словам nathansnider в вопросе комментарий, содержание файла leaflet.markercluster.layersupport-src это не код JavaScript плагина markerCluster.LayerSupport, а HTML-страница GitHub, отображающая код этого файла, то есть окруженный большим количеством HTML-кода.

Вы должны просто заменить содержимое файла содержимым исходного файла здесь: https://raw.githubusercontent.com/ghybs/Leaflet.MarkerCluster.LayerSupport/master/leaflet.markercluster.layersupport-src.js

Демо: http://plnkr.co/edit/Jd8skZ1U0bWxgl2orJV6?p=preview

---

Примечание стороны:

Если вам просто нужно Layers Control для работы с Leaflet.markercluster, есть еще один плагин, который делает именно это и который намного проще: Leaflet.FeatureGroup.SubGroup (230 строк кода против 6 00 строк для Leaflet.MarkerCluster.LayerSupport на сегодняшний день).

В вашем случае вы будете использовать его таким образом:

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

// Create SubGroups. 
var beerMarkerSub = L.featureGroup.subGroup(mcg).addTo(map); 
var wineMarkerSub = L.featureGroup.subGroup(mcg).addTo(map); 

// For Layers Control. 
var overlayMaps = { 
    "Breweries": beerMarkerSub, 
    "Wineries": wineMarkerSub 
}; 

// That is it! No need to check-in. 

Код специфичную для приложения, так как при загрузке данных GeoJSON на AJAX:

var beerMarker = L.geoJson(null, beerOptions); // DO NOT add to map. 
var wineMarker = L.geoJson(null, wineOptions); // Same story. 

$.getJSON("breweries.geojson", function(data) { 
    beerMarker.addData(data); // GeoJSON conversion. 
    // Then transfer all features into the corresponding sub-group. 
    beerMarker.eachLayer(function (layer) { 
    layer.addTo(beerMarkerSub); 
    }); 
}); 

$.getJSON("wine.geojson", function(data) { 
    wineMarker.addData(data); // GeoJSON conversion. 
    // Then transfer all features into the corresponding sub-group. 
    wineMarker.eachLayer(function (layer) { 
    layer.addTo(wineMarkerSub); 
    }); 
}); 

Демо: http://plnkr.co/edit/x8vTLjE53TPiLd52BQ1d?p=preview

Disclosure: I am the author of these plugins.