javascript - set leaflet.js map to display current location -

i working leaflet.js package meteor , having trouble getting map default current location on initial render. setview method works fine hard numbers doesn't variables. pretty new js maybe mistake obvious. here's have:

 template.map.rendered = function() {  l.icon.default.imagepath = 'packages/bevanhunt_leaflet/images';   if (navigator.geolocation) {   navigator.geolocation.getcurrentposition(function(position) {     console.log('--- position: ---');     console.log('lat: ' + position.coords.latitude);     latit = position.coords.latitude;     console.log('long: ' + position.coords.longitude);     longit = position.coords.longitude;     console.log('---------------------');     var abc = l.marker([position.coords.latitude, position.coords.longitude]).addto(map); }  )}  map = l.map('map', {   doubleclickzoom: false }).setview([latit, longit], 13); 

the error keep getting is

uncaught typeerror: cannot read property 'addlayer' of undefined l.marker.l.class.extend.addto @ leaflet-src.js:3511 (anonymous function) @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28 

when console.log(latit) or console.log(longit) returns number, "undefined" after it. in advance can this!

edit:

exact console output on initial render:

exception tracker afterflush function: debug.js:41 referenceerror: latit not defined     @ template.map.rendered (client.js?    ea76789cca0ff64d5985320ec2127d5de1fb802f:36)     @ template.js:116     @ function.template._withtemplateinstancefunc (template.js:437)     @ firecallbacks (template.js:112)     @ null.<anonymous> (template.js:205)     @ view.js:104     @ object.blaze._withcurrentview (view.js:523)     @ view.js:103 @ object.tracker._runflush (tracker.js:468) @ onglobalmessage (setimmediate.js:102) client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:22 --- position: --- client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:23 lat: 41.0525926 client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:25 long: -73.5398427 client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:27 --------------------- leaflet-src.js:3511 uncaught typeerror: cannot read property 'addlayer' of     undefinedl.marker.l.class.extend.addto @ leaflet-src.js:3511(anonymous function)     @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28 

edit 2: wanted keep simple here js in entirety:

var map; var latit; var longit;  // on startup run resizing event meteor.startup(function() { $(window).resize(function() { $('#map').css('height', window.innerheight - 82 - 45); }); $(window).resize(); // trigger resize event  });  // create marker collection var markers = new meteor.collection('markers');  meteor.subscribe('markers');   template.map.rendered = function() {  l.icon.default.imagepath = 'packages/bevanhunt_leaflet/images';   if (navigator.geolocation) {   navigator.geolocation.getcurrentposition(function(position) {     console.log('--- position: ---');     console.log('lat: ' + position.coords.latitude);     latit = position.coords.latitude;     console.log('long: ' + position.coords.longitude);     longit = position.coords.longitude;     console.log('---------------------');     var abc = l.marker([position.coords.latitude, position.coords.longitude]).addto(map); }  )}  map = l.map('map', {   doubleclickzoom: false }).setview([latit, longit], 13); //error somewhere before here!!  l.tilelayer.provider('thunderforest.outdoors').addto(map);   map.on('dblclick', function(event) {  markers.insert({latlng: event.latlng}); });  //add markers var query = markers.find(); query.observe({ added: function (document) {   var marker = l.marker(document.latlng).addto(map)     .on('click', function(event) {       map.removelayer(marker);       markers.remove({_id: document._id});     }); }, //remove markers removed: function (olddocument) {   layers = map._layers;   var key, val;   (key in layers) {     val = layers[key];     if (val._latlng) {       if (val._latlng.lat === olddocument.latlng.lat && val._latlng.lng === olddocument.latlng.lng) {         map.removelayer(val);       }     }   } } }); }; 

thanks, @sosdoc , initializing variables , me in long term of project. rendering map @ current location found easier answer! leaflet has locate method built it. instead of passing 'uninitialized' latit , longit vars, did this:

map = l.map('map', {doubleclickzoom: false}).locate({setview: true, maxzoom: 16}); 

which sets map location. maxzoom variable amount of times can zoom , can changed.