title: Unable to initialize Leaflet.draw toolbar
body: <p>I am having difficulty initializing the <a href="https://github.com/Leaflet/Leaflet.draw" rel="nofollow">Leaflet.draw toolbar</a>. I've tried using code from various examples and still cannot get the toolbar to display on my map. My code exists in its own .js file and is shown below: </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function main() {
  
  // create a map in the "map" div, set the view to a given place and zoom
  var map = L.map('map', {
      drawControl: true
  }).setView([35.110756 , -120.591667], 14);
  
  // add an OpenStreetMap tile layer
  L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/satellite-streets-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1IjoiemFjaHJvYmluc29uIiwiYSI6IjZXWDh0enMifQ.P_x5U3esb8BJM9apOhn4Kg', {
      attribution: '© Mapbox © OpenStreetMap © DigitalGlobe'
  }).addTo(map);
  
  
  // Initialise the FeatureGroup to store editable layers
  var drawnItems = new L.FeatureGroup();
  map.addLayer(drawnItems);
  
  // Initialise the draw control and pass it the FeatureGroup of editable layers
  var drawControl = new L.Control.Draw({
      position: 'topleft',
      draw: {
          marker: true
      },
      edit: {
          featureGroup: drawnItems
      }
  });
  map.addControl(drawControl);
      
  map.on('draw:created', function(e){
      var type = e.layerType,
          layer = e.layer;
      
      if (type === 'marker'){
          layer.bindPopup('A popup!');
      }
      
      drawnItems.addLayer(layer);
  });
  
  }
  
  window.onload = main;</code></pre>
  </div>
  </div>
  </p>