I have been developing a map that consumes geojson data and places markers on a map and creates popups. I have had this functionality working, but recently it has stopped working - I get the error "TypeError: t is undefined" in my console upon loading the page and the appearance of popups upon clicking no longer works. However the clicking functionality works fine in the production deployment of the app, I only see this issue in development and staging.

Here is my code.

let map = L.map('map').setView([39.728493, -121.837479], 13);

const geojson = $.ajax({
    url:"/geojson",
    dataType: "json",
    success: console.log("Geojson data successfully loaded."),
    error: function (xhr) {
        alert(xhr.statusText)
    }
})

$.when(geojson).done(function(data){
    drawMap(data)
})

function drawMap(data) {
    addMapLayer(map);
    mapGeoJson(data, map);
}

function addMapLayer(map) {
    L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
        attribution: '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>',
        maxZoom: 18,
        id: 'mapbox.streets',
        accessToken: 'XXX'
    }).addTo(map);
}

function mapGeoJson(data, map) {
    L.geoJson(data, {
        onEachFeature: function(feature, featureLayer) {
            addMarker(feature, map)
            addProperties(feature, featureLayer)
        }
    }).addTo(map);
}

function addMarker(feature, map) {
    coordinates = feature.geometry.coordinates
    L.marker([coordinates[1], coordinates[0]]).addTo(map);
}

function addProperties(feature, featureLayer, popupContent) {
popupContent = []

    for (var key in feature.properties) {
        popupContent.push(key + ": " + feature.properties[key]);
    }

    featureLayer.bindPopup(popupContent.join("<br/>"));
}
  • UPDATE: It would seem that this would have something to do with the geoJSON and one of the following: 1) Two Features having the exact same co-ordinates - this was the case 2) I am looping through each feature and creating the popup content when I get the JSON each time the page is loaded. Is this correct or should I only populate the popups when they are clicked on? Once I cleared all 9 records, including the similar ones from the test DB, the error went and things now work again. Next step is working out how I've gone wrong. Again any help would be appreciated. – gnalp Nov 16 at 20:47
  • UPDATE: It now seems unlikely that it is related to features having the same coordinates, as I have tested this hunch and no issues are caused. Would it be a geoJSON object with 9 features could cause this to happen? – gnalp Nov 16 at 20:59
  • It seems whatever your variable t is supposed to hold is undefined but I don't see the declaration or any references to t in the code you have supplied above. – Matt Needle Nov 17 at 5:53
  • It seems that the t is in reference to something in leaflet.js. Which is what is causing me confusion. – gnalp Nov 17 at 10:16

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Browse other questions tagged or ask your own question.