I'm trying to create a leaflet map with a fair amount of markers. The coordinates of these markers can be found in an Excel file. In column A there's the x-coordinate, and in column B there's the y-coordinate. Furthermore, the category of the marker can be found in column C. They're either blue or gold.
What I'd like to do, is to read off the coordinates of the markers by means of JavaScript. Simultaneously, I want to give them a different color based on their respective categories, and put them in their own leaflet layer groups.
Here is a simple JS fiddle I made to illustrate the basic leaflet map with just two markers. In the Excel sheet, there are hundreds of them, so I'd like to automate the process by means of which they're added to the map. The code can be found here:
// center of the map
var center = [51.06, 5];
// Create the map
var map = L.map('map').setView(center);
var goldIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-gold.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
var blueIcon = new L.Icon({
iconUrl: 'https://raw.githubusercontent.com/pointhi/leaflet-color-markers/master/img/marker-icon-2x-blue.png',
shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
iconSize: [25, 41],
iconAnchor: [12, 41],
popupAnchor: [1, -34],
shadowSize: [41, 41]
});
map.setZoom(6.7);
var marker23 = L.marker([51.92344842913043, 4.469005926663859] , {icon: goldIcon}).addTo(map);
marker23.bindPopup("<b>This is a golden marker</b><br><br>" + '');
marker23.on("click",function(ev){
layer.openPopup();
});
var marker31 = L.marker([51.97245534304484, 5.651563926689895], {icon: blueIcon}).addTo(map);
marker31.bindPopup("<b>This is a blue marker</b><br><br>" + '');
marker31.on("click",function(ev){
layer.openPopup();
});
// Set up the OSM layer
L.tileLayer(
'http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 18
}).addTo(map);
// add a marker in the given location
var golden = L.layerGroup([marker23]);
var blue = L.layerGroup([marker31]);
var overlayMaps = {
//<h4>Vormen van steward-ownership</h4>;
"golden": golden.addTo(map),
"blue": blue.addTo(map),
};
L.control.layers(null, overlayMaps, {collapsed:false}).addTo(map);
$(".leaflet-control-layers-overlays").prepend("<label><b>Colors</b></label>");
Question: How can the coordinates and the categories of the marker be automatically read from an Excel file, so as to add them in a leaflet map with filterable categories?