I'm new to mapbox and leaflet, and I apologize in advance if this a bit basic. I'm trying to load a map with markers. However, I'm getting this error and I'm not sure how to debug it. self.map.addLayer(connector) is throwing the error. Does anyone know what I'm doing wrong? Thanks.

buildMap: function() {
  console.log('buildMap() function...');
  var lat, lng,
  self = this;

  navigator.geolocation.getCurrentPosition(function(data) {
    var lat, lng, latlng;
    lat = data['coords']['latitude'];
    lng = data['coords']['longitude'];
    debugger;

    self.map.remove();
    self.map = new L.mapbox.map('map', 'bmy78.map-z27ovm6p')
                            .setView(new L.LatLng(lat, lng), 15);

    console.log('lat', lat);
    console.log('lng', lng);

    // use mapbox
    mapboxUrl = ".map-z27ovm6p.jsonp";
    wax.tilejson(mapboxUrl, function(tilejson) {
      connector = new wax.leaf.connector(tilejson);
      self.map.addLayer(connector);
    });
  });

I'm new to mapbox and leaflet, and I apologize in advance if this a bit basic. I'm trying to load a map with markers. However, I'm getting this error and I'm not sure how to debug it. self.map.addLayer(connector) is throwing the error. Does anyone know what I'm doing wrong? Thanks.

buildMap: function() {
  console.log('buildMap() function...');
  var lat, lng,
  self = this;

  navigator.geolocation.getCurrentPosition(function(data) {
    var lat, lng, latlng;
    lat = data['coords']['latitude'];
    lng = data['coords']['longitude'];
    debugger;

    self.map.remove();
    self.map = new L.mapbox.map('map', 'bmy78.map-z27ovm6p')
                            .setView(new L.LatLng(lat, lng), 15);

    console.log('lat', lat);
    console.log('lng', lng);

    // use mapbox
    mapboxUrl = "http://a.tiles.mapbox./v3/bmy78.map-z27ovm6p.jsonp";
    wax.tilejson(mapboxUrl, function(tilejson) {
      connector = new wax.leaf.connector(tilejson);
      self.map.addLayer(connector);
    });
  });

• javascript
• leaflet
• mapbox

Share Improve this question Follow asked May 18, 2014 at 17:19 user1717344user1717344 13311 gold badge11 silver badge88 bronze badges 5

• 1 You're not reading lat property in this part of code. Are you sure this is the one than triggers the error? – Pavlo Commented May 18, 2014 at 17:25
• 1 cannot read property 'insert name here' of undefined means you are trying to read a property of an object, but that object does not exist. But the code you show does not show you trying to access a lat property of anything eg someObject.lat – Patrick Evans Commented May 18, 2014 at 17:26
• Right. But self.map.addLayer(connector) throws the error, and the bottom of the callstack takes place in wax.leaf.js, around line 2029, where Reqwest! is included, and that part of wax.leaf.js is uglyified and minimized, so it's difficult to tell which object I'm trying to call 'lat' on, or why that object undefined. – user1717344 Commented May 18, 2014 at 17:43
• Actually, mapbox.js throws the error at the bottom of the stack and since its uglyified, its difficult to read. but this is where I believe the error is happening. I believe either o or e is 'undefined' but I'm not sure how they get defined. e=this._southWest,i=this._northEast,n=t.getSouthWest(),o=t.getNorthEast(),a=o.lat>=e.lat&&n – user1717344 Commented May 18, 2014 at 17:52
• 2 Please use Mapbox.js, not Wax: mapbox./mapbox.js/api/v1.6.2 - Wax has been deprecated for more than a year. – tmcw Commented May 19, 2014 at 1:53

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 2

If you want to prevent Map to be "undefined".

First declare your map variable as public js variable (in the head of your html document and outside any function)

var map;

Next, build the map inside the document ready function (to be sure that leaflet is properly load),

$( document ).ready(function() {
  map= L.mapbox.map('map', 'bmy78.map-z27ovm6p')
  //here you try to ask the user position then setView to map
}

You may now access the map variable without any "undefined error",

Best regards