Building Multiple Tooltips From Db - binding

Question

I am converting my present map scripts from Google to Leaflet. I have a map with 5 layers, each with multiple locations that are stored in a Db table. I have two routines in the process. The first gathers the data from the Db and builds an XML file that is passed to the second. The second then parses the XML file and build individual L.marker content as follows:
for (var i = 0; i < numMarkers; i++) {
var mkrType = markers[i].getAttribute("type");
var mkrName = markers[i].getAttribute("name");
var mkrLat = markers[i].getAttribute("lat");
var mkrLon = markers[i].getAttribute("lon");
var mkrIcon = "files_images/mis_images/icon_tri_green.png"; break;
var mkrText = "<b>" + mkrName + "</b><br>Lat: " + mkrLat + " Lon: " + mkrLon;
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(cemeteries);
}
The script produces (Uncaught TypeError: t.addLayer is not a function) on the last line of the for loop (L.marker).
I figure the fault is that the loop/L.marker is within a function. If so, what and how do I pass what is need to make the code work.
TIA for any assistance
jdadwilson

Answer 1

My bad... Cemeteries was defined, I did not provide all of the function. Here it is...
function init_all_map(lyrActive) { 'use strict';
var cemeteries = L.layerGroup(),
churches = L.layerGroup(),
markers = L.layerGroup(),
schools = L.layerGroup(),
towns = L.layerGroup();
var overlays = { "Cemeteries": cemeteries, "Churches": churches, "Markers": markers, "Schools": schools, "Towns": towns };
var mbAttr = 'Map data © OpenStreetMap contributors, ' +
'CC-BY-SA, ' + 'Imagery © Mapbox',
mbUrl = 'https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw',
msGeo = window.SERVER_PATH + 'files_geojson/geopoly_holmes.json';
var streets = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png'),
county = new L.GeoJSON.AJAX(window.SERVER_PATH + "files_geojson/geopoly_holmes.json", {style: {color: "DarkGray", weight: 2, fillColor: ""}} );
var baseLayers = {"Streets": streets, "County": county};
var map = L.map('map_canvas_lg', {center: [CO_CENTER_LAT, CO_CENTER_LON], zoomControl: true, zoom: 10, minZoom: 8, maxZoom: 14,
layers: [streets, county, cemeteries, churches, markers, schools, towns]});
var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
var lyrType = ["cem", "chu", "mkr", "sch", "twn"];
var numLays = lyrType.length;
var xmlType,
thisLayer,
newIcon;
for ( i=0; i<numLays; i++ ) {
//console.log("Layer: " + lyrType[i]);
thisLayer = lyrName[i];
console.log("thisLayer: " + thisLayer);
switch(lyrType[i]) {
case "cem":
xmlType = window.SERVER_PATH + "files_xml/xml_cemeteries.php";
newIcon = window.SERVER_PATH + "files_images/mis_images/icon_tri_green.png";
break;
//
// Other cases removed for brevity
//
} // End of switch
var mkrIcon = L.icon({ iconUrl: newIcon,shadowUrl: '',iconSize: [13,13],shadowSize: [0,0],iconAnchor: [7,13],shadowAnchor: [0,0],popupAnchor: [0,0]});
var xmlData = downloadUrl(xmlType, function(data) {
var xml = xmlParse(data);
var markers = xml.getElementsByTagName("marker");
var numMarkers = markers.length;
for (var j = 0; j < numMarkers; j++) {
var mkrType = markers[j].getAttribute("type");
var mkrName = markers[j].getAttribute("name");
var mkrLat = markers[j].getAttribute("lat");
var mkrLon = markers[j].getAttribute("lon");
var mkrText = "<b>" + mkrName + "</b><br>Lat: " + mkrLat + " Lon: " + mkrLon;
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);
} // End of Marker (j) loop
}); // End of downloadUrl
lyrName[i] = L.layerGroup().addTo(map);
} // End of layer (i) loop
L.control.layers(overlays).addTo(map);
window.dispatchEvent(new Event('resize'));
}
This line...
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(**lyrName[i]**);
throws the following error...
TypeError: Cannot read property 'addLayer' of undefined
If I change lyrName[i] to cemeteries the layer fills as desired.
Again TIA for any assistance.
jdadwilson

Answer 2

Your Layer cemeteries is not defined.
You can create a LayerGroup / FeatureGroup (is the same but with more function) with var cemeteries= L.featureGroup().addTo(map). Add this Line before your loop.
And then your code should work and the markers displayed on the map
Update
You are adding the marker to a string and not to the layer object. (I don't know what **lyrName[i]** are make, but it is not working...)
Try:
var lyrName = ["cemeteries", "churches", "markers", "schools", "towns"];
var lyrObjs = [cemeteries, churches, markers, schools, towns];
var lyrType = ["cem", "chu", "mkr", "sch", "twn"];
//...
L.marker([mkrLat, mkrLon], {icon: mkrIcon}).bindPopup(mkrText).addTo(lyrObjs[i]);