Замените жестко запрограммированные латы и длинные на динамические латы и длинные из файла CSV, используя брошюру «Всеядные»

Question

Я нашел функцию, которую мне нравится использовать, но данные Lats и Long жестко запрограммированы в файле JavaScript.Я бы хотел заменить жестко запрограммированный скрипт динамическим (Lats и Long) из файла CSV, используя Leaflet Omnivore.Это позволит легко обновлять мои данные с помощью CSV.Ниже приведен сценарий, который я имею до сих пор.Я могу построить точку без использования функции, но мне действительно нравится функция spiderfy, которую функция обеспечивает для перекрывающихся маркеров.Функция хорошо работает с кодом, жестко запрограммированным, но не работает, но не будет работать ни с какими методами, которые я пробовал до сих пор.Моя последняя попытка приведена ниже.Будем весьма благодарны за любые предложения / решения.

var cityCluster = omnivore.csv('data/cityName.csv')
.on('ready', function (layer) {
    this.eachLayer(function (marker) {
        //Load Icons from CSV file
        var customIcon = L.icon({
            iconUrl: 'graphic/' + marker.toGeoJSON().properties.graphic2, //add graphic from CSV file
            className: marker.toGeoJSON().properties.cityName,
            //className: 'mapIcons',
            iconSize: [12, 12], //size of the icon in pixels
            iconAnchor: [6, 12], //point of the icon which will correspond to marker's location (the center)
            popupAnchor: [0, -10] //point from which the popup should open relative to the iconAnchor
        });
        //change the icons for each point on the map
        marker.setIcon(customIcon);

        var popupText =
            marker.bindPopup('<strong>' + marker.toGeoJSON().properties.cityName + '</strong>' + ', ' + '</br>' + marker.toGeoJSON().properties.discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + marker.toGeoJSON().properties.popup + "'   title='" + marker.toGeoJSON().properties.discrip + " '  href='graphic/" + marker.toGeoJSON().properties.popup + "' ><img src='graphic/" + marker.toGeoJSON().properties.popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>");

    });
 ///This is my attempt to replace the hard-code Lats and Long (below) from CSV file 
    this.eachLayer(function (marker) {
        const points = [L.latLng(marker.toGeoJSON().properties.Lats, marker.toGeoJSON().properties.Long)];
        console.log(points); //Shows up Null

        /*      
            //Replacing this with Data from CSV file
        const points = [
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693),
          L.latLng(12.184, 18.693)
        ];

        */
        const oms = new OverlappingMarkerSpiderfier(map, {
            keepSpiderfied: true
        });

        points
            .map((p, i) => L.marker(p).bindPopup('<strong>' + marker.toGeoJSON().properties.cityName + '</strong>' + ', ' + '</br>' + marker.toGeoJSON().properties.discrip + "<br /><a class='fancybox-thumb' ' style='width:150px;' rel='fancybox-button'  rel='fancybox-thumb'   data-fancybox-group='" + marker.toGeoJSON().properties.popup + "'   title='" + marker.toGeoJSON().properties.discrip + " '  href='graphic/" + marker.toGeoJSON().properties.popup + "' ><img src='graphic/" + marker.toGeoJSON().properties.popup + "' alt='Image' ' style='width:150px;' ></a>" + "<br/><a href='http://www.google.com'  target='_blank'>Cedellion Report</a>"))
            .forEach(marker => {
                map.addLayer(marker);
                oms.addMarker(marker);
            });

        oms.addListener('spiderfy', (markers) => {
            console.log('spiderfy');
            map.closePopup();

            markers.forEach(marker => marker.setIcon(createIcon()));
        });

        oms.addListener('unspiderfy', (markers) => {
            console.log('unspiderfy');
            // map.closePopup();

            markers.forEach(marker => marker.setIcon(createIcon()));
        });

        // lengthen the spider's leg by 4x
        oms.circleFootSeparation = 100;

        forceUnspiderfy();

        ////////////

        function createIcon(color = 'blue') {
            return new L.Icon({
                iconUrl: `graphic/gTank.png`,
                //iconUrl: `https://cdn.rawgit.com/pointhi/leaflet-color-markers/master/img/marker-icon-${color}.png`,
                // shadowUrl: 'https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.7/images/marker-shadow.png',
                //shadowUrl: 'https://googlemaps.github.io/js-marker-clusterer/images/m5.png',
                //shadowUrl: 'https://image.ibb.co/nQrYGc/overlapping_markers.png',
                //shadowUrlRetina: 'https://image.ibb.co/h8jnbc/overlapping_markers_2x.png',
                //shadowAnchor: [20.5, 41],
                iconSize: [20, 25],
                popupAnchor: [1, -34]
            });
        }

        function forceUnspiderfy() {
            // workaround for https://github.com/jawj/OverlappingMarkerSpiderfier-Leaflet/issues/32
            oms.getMarkers().forEach(marker => oms.spiderListener(marker));

            oms.unspiderfy();
        }

    });
}).addTo(map);