Building Multiple Tooltips From Db

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:&nbsp;" + mkrLat + "&nbsp;&nbsp;Lon:&nbsp;" + 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 &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
                 '<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' + 'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
        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:&nbsp;" + mkrLat + "&nbsp;&nbsp;Lon:&nbsp;" + 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