Uncaught ReferenceError: mapInitialised is not defined

Question

$(document).ready(function(){

// Initialise global variables
var geoJson = getMarkers();
var homeLatitude = 50.351;
var homeLongitude = -3.576;
var initialZoom = 15;
var mapInitialised = 0;

// Initialise map
var map = mapInit();

function mapInit() {
    // initialise map
    if ( mapInitialised===0 ) {
        var map = L.mapbox.map('map', 'mapIdentifier.234grs')
            .setView([homeLatitude, homeLongitude], initialZoom);
        mapInitialised = 1;
    }
    return map; 
}
});

I get the error Uncaught ReferenceError: mapInitialised is not defined inside the 'mapInit' function.

I'm still learning here and am unsure of what I'm doing wrong.

Edit: here's the whole code that I'm using in this app:

$(document).ready(function(){

    // Initialise global variables
    var geoJson = getMarkers();
    var homeLatitude = 50.351;
    var homeLongitude = -3.576;
    var initialZoom = 15;
    var mapInitialised = 0;

    // Initialise map
    var map = mapInit();

    // Add features to map
    var myLayer;
    addFeaturesToMap(map, myLayer);

    // Define map behaviour
    myLayer.on('click', function(e) {
        e.layer.openPopup();
    });

    // define button behaviour for switching between map and list
    $('#buttonMap').click(function(){
        switchToMap();
    });

    // define button behaviour for switching between map and list
    $('#buttonList').click(function(){
        switchFromMap();
    });

    $('.view-on-map').click(function(e){

        // Scroll to the top of the map
        $(document).scrollTo(0,500);

        // get lat, long, and name for event location
        var latitude = $(this).attr("data-latitude");
        var longitude = $(this).attr("data-longitude");
        var name = $(this).attr("data-name");

        // go to map
        switchToMap();

        // show popup
    var popup = L.popup()
            .setLatLng([latitude, longitude])
            .setContent('<p><strong>' + name + '</strong></p>' )
            .openOn(map);

    }); // end of view-on-map click function

}); // end of document ready function

function getMarkers() {

    // define geoJson object
    var geoJson = {
        type: 'FeatureCollection',
        features: []
    };

    var arrayLength = events.length;

    // loop through events array and push into geoJson object
    for (var i = 0; i < arrayLength; i++) {
        var latitude = events[i].location[0].latitude;
        var longitude = events[i].location[0].longitude;
        var name = events[i].location[0].name;
        var pageId = events[i].location[0].pageId;
        var link = events[i].location[0].link;
        var description = events[i].location[0].description;

        var feature = {
            type: 'Feature',
            properties: {
                title: name,
                other: "text",
                'marker-color': '#54a743',
                'stroke': '#428334',
                url: link
            },
            geometry: {
                type: 'Point',
                coordinates: [longitude, latitude]
            }
        }

        // push to geoJson.features array
        geoJson.features.push(feature); 
    }
    return geoJson;
}

function switchToMap() {
    // show map
    $('#map').fadeIn();
    // change button states
    $('#buttonMap').attr("disabled", "disabled");
    $('#buttonList').removeAttr("disabled");
}

function switchFromMap() {
    // hide map
    $('#map').fadeOut();
    // change button states
    $('#buttonList').attr("disabled", "disabled");
    $('#buttonMap').removeAttr("disabled");
}

function mapInit() {
    // initialise map
    if ( mapInitialised===0 ) {
        var map = L.mapbox.map('map', 'mapIdentifier.234grs')
            .setView([homeLatitude, homeLongitude], initialZoom);
        mapInitialised = 1;
    }
    return map; 
}

function addFeaturesToMap(map, myLayer) {

    // declare feature layer
    myLayer = L.mapbox.featureLayer().addTo(map);

    // Pass features and a custom factory function to the map
    myLayer.setGeoJSON(geoJson);

    // set template for popup
    myLayer.eachLayer(function(layer) {

  var content = 'Location:' + layer.feature.properties.title;
    layer.bindPopup(content);
    });
}

Have you tried to put function mapInit() outside the ready? Or setting mapInitialised with false (Boolean)? — keypaul, May 05 '14 at 16:36
@keypaul - the mapInit() function is already outside the ready function. Setting mapInitialised to `false` still gives the error. — babbaggeii, May 05 '14 at 16:39
mapInitialised is defined in the ready scope and you use it in a function which isn't defined in the same scope. That's why. — Denys Séguret, May 05 '14 at 16:41

score 1 · Accepted Answer · answered May 05 '14 at 16:33

1

Isn't "mapInitialised" only in the scope of the function in which it is declared? I think once you fix the scoping of that variable, you will then run into similar issues with other variables used in "mapInit()", like "homeLatitude".

answered May 05 '14 at 16:33

jordan

959
7
17

That makes sense - so how can I declare it globally? – babbaggeii May 05 '14 at 16:40
1

Just move `var mapInitialised = 0;` before `$(document).ready(function(){`. Or put the whole code into the ready callback. – Denys Séguret May 05 '14 at 16:41
See #1 of http://stackoverflow.com/a/500459/3571100. The "a" variable is defined to be globally accessible. – jordan May 05 '14 at 16:43

Uncaught ReferenceError: mapInitialised is not defined

1 Answers1