zrobby zrobby - 3 months ago 25
Javascript Question

Unable to initialize Leaflet.draw toolbar

I am having difficulty initializing the Leaflet.draw toolbar. 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:



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;




Answer

Make sure you copied all the required external .js files. Leaflet.draw requires

  • leaflet.css
  • leaflet.draw.css
  • leaflet.js
  • leaflet.draw.js

HTML:

<div id="map" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;"></div>

Script:

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);


  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();

http://jsfiddle.net/silverhawk/dw9jok46/