title: set leaflet.js map to display current location
body: <p>I am working with the leaflet.js package for meteor and I am having trouble getting the map to default to my current location on the initial render. The setView method works fine with hard numbers but it doesn't like my variables. I am pretty new to js so maybe the mistake is obvious. Here's what i have: </p>
  
  <pre><code> Template.map.rendered = function() {
   L.Icon.Default.imagePath = 'packages/bevanhunt_leaflet/images';
  
   if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log('--- Your 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);
  </code></pre>
  
  <p>The error i keep getting is</p>
  
  <pre><code>Uncaught TypeError: Cannot read property 'addLayer' of undefined
  L.Marker.L.Class.extend.addTo @ leaflet-src.js:3511
  (anonymous function) @ client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:28
  </code></pre>
  
  <p>when i console.log(latit) or console.log(longit) it returns the number, as well as "undefined" after it. Thanks in advance to anyone who can help with this!</p>
  
  <p>EDIT: </p>
  
  <p>exact console output on initial render:</p>
  
  <pre><code>Exception from Tracker afterFlush function:
  debug.js:41 ReferenceError: latit is not defined
      at Template.map.rendered (client.js?    ea76789cca0ff64d5985320ec2127d5de1fb802f:36)
      at template.js:116
      at Function.Template._withTemplateInstanceFunc (template.js:437)
      at fireCallbacks (template.js:112)
      at null.&lt;anonymous&gt; (template.js:205)
      at view.js:104
      at Object.Blaze._withCurrentView (view.js:523)
      at view.js:103
  at Object.Tracker._runFlush (tracker.js:468)
  at onGlobalMessage (setimmediate.js:102)
  client.js?ea76789cca0ff64d5985320ec2127d5de1fb802f:22 --- Your 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
  </code></pre>
  
  <p>EDIT 2:
  I wanted to keep this simple but here is my js in its entirety:</p>
  
  <pre><code>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('--- Your 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 is 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;
    for (key in layers) {
      val = layers[key];
      if (val._latlng) {
        if (val._latlng.lat === oldDocument.latlng.lat &amp;&amp; val._latlng.lng === oldDocument.latlng.lng) {
          map.removeLayer(val);
        }
      }
    }
  }
  });
  };
  </code></pre>