Листовой слойГруппа и управление; получение типа ошибки

Question

Я преподаю сам JavaScript, используя Листовку, чтобы создать несколько простых веб-карт. Этот шаг состоит в том, чтобы добавить управление слоем к карте. Я тестирую элемент управления как для базовых слоев, так и для наложения.

Я получаю ошибку типа JS. Я использовал некоторую отладку, но не могу найти, что я делаю неправильно.

Ошибка возникает, когда используется опция «слоев» для API карты. Если я удалю эту опцию, ошибка не произойдет (очевидно, карта не работает, поэтому просто делается для отладки).

Использование отладчика в Firefox, содержание групп слоев наложения выглядит нормально. Я бы оценил еще один взгляд на это.

// Creates a variable to hold the attribution including OSM, Creative Commons license,and Mapbox imagery; this is done via variable because two tileLayers will each need attribution 
    var mbAttr = 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, ' + 
       '<a href="http://creativecommons.org/licenses/by-sa/4.0/">CC-BY-SA</a>, ' + 
       'Imagery © <a href="http://mapbox.com">Mapbox</a>', 
    mbUrl = 'https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png'; 

    var grayscale = L.tileLayer(mbUrl, {id: 'examples.map-20v6611k', attribution: mbAttr}), 
     streets = L.tileLayer(mbUrl, {id: 'examples.map-i875mjb7', attribution: mbAttr}); 

// var myURL = jQuery('script[src$="kcdfp.js"]').attr('src').replace('kcdfp.js', ''); // Gets the URL and removes the file name, which will be replaced in the icon API; can't get it to work 
    var myURL = 'http://www.myspatialhome.org/'; // Sets the url for icon images 

// Criteria for overlay layers 
// In Active -1=YES, 0 = NO 
// Create new layerGroups for overlay 
    var active = new L.layerGroup(); 
    var inactive = new L.layerGroup(); 

// Create Marker icons 
    var myIcon = L.icon({ 
    iconUrl: myURL + 'images/pin24.png', 
    iconRetinaUrl: myURL + 'images/pin48.png', 
    iconSize: [29, 24], 
    iconAnchor: [9, 21], 
    popupAnchor: [0, -14] 
}); 

// Loop through the entire JSON file 
for (var i=0; i < kcdfp.length; ++i) 
    { 
    if (kcdfp[i].In_Active == 0){ // Inactive=no, i.e. Active 
     L.marker([kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon}) 
     .bindPopup('<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>') 
     .addTo(active); // Add to active layer group 
    } 
    else { // Otherwise show a Inactive 
     L.marker([kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon}) 
     .bindPopup('<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>') 
     .addTo(inactive); // Add to inactive layer group 
     } 
} 

// Create the map 
var map = L.map('map', { 
     center: [47.5, -121.95], 
     minZoom: 10, 
     zoom: 10, 
     layers: [streets, active, inactive] // ERROR 
}); 
// Set variables for layer control 
    var baseLayers = { 
     "Grayscale": grayscale, 
     "Streets": streets 
    }; 
    var overlays = { 
     "Active": active, 
     "Inactive": inactive 
    }; // Sets the other variable for layer control 

    L.control.layers(baseLayers, overlays).addTo(map); // Adds a layer control to the map 

---

Edit: Дальнейшее тестирование заставляет меня думать, как я создания layerGroups неправильно. Я изменил карту, чтобы включить только слой tileLayer и добавил layerGroups с предложением .addTo (map).

Произошла ошибка, когда слоигруппы добавляются к карте.

Появляется layerGroups хочет массив. Я изменил маркер с предложением .addLayer. Отражает ли layerGroup это как элемент массива?

// Loop through the entire JSON file 
for (var i=0; i < kcdfp.length; ++i) 
    { 
    if (kcdfp[i].In_Active == 0){ // Inactive=no, i.e. Active 
     L.marker([kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon}) 
     .bindPopup('<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>') 
     .addLayer(active); // Add to active layer group 
    } 
    else { // Otherwise show a Inactive 
     L.marker([kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon}) 
     .bindPopup('<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>') 
     .addLayer(inactive); // Add to inactive layer group 
     } 
} 

Answer 1

Ваш добавочный поток потока немного обратный.

Они должны выглядеть

var newMarker = L.marker([kcdfp[i].Lat, kcdfp[i].Lon], {icon: myIcon}).bindPopup('<a href="ATL_map_service_test_leaflet_url.htm" target="_blank">' + kcdfp[i].Last_Name + '</a>') 
    active.addLayer(newMarker); // Add to active layer group 

Answer 2

Корень проблема оказалась ошибки данных (то есть широта/долгота NULL). Тестирование включало как исходный JS, так и модифицированный на основе предлагаемого ответа, который добавляет «var newMarker» к API-интерфейсам L.marker. Исходный JS был основан на учебнике Leaflet 6.

Мне любопытно, есть ли преимущества в выборе одного подхода над другим.

Спасибо за ответы. Это помогает в обучении JS/Leaflet.