I'm trying to put a Control into an existing div but I don't really know where or how I can force the map.addControl method to show the control (it is a draw control by the way) within an already existing div on the map. I'm using the leaflet draw plugin by the way.

My html looks something like this:

<div class="tooldiv" ng-controller="ClientState">

tooldiv is where the control should be placed.

This is my leaflet config:

var drawnItems = new L.FeatureGroup();

var drawControl = new L.Control.Draw({
    position: 'topleft',
    draw: {
        polyline: false,
        polygon: {
            title: 'Draw a sexy polygon!',
            allowIntersection: false,
            drawError: {
                color: '#b00b00',
                timeout: 1000
            shapeOptions: {
                color: '#bada55'
            showArea: true
        circle: false,
        rectangle: false,
        marker: false
    edit: false

// Add and remove DrawControl menu when layer is selected/unselected
this.toggle_layer_edit = function(edit_polygon) {
    if (edit_polygon === true) {
        if (draw_control_check === null) {
            draw_control_check = map.addControl(drawControl);
    } else {
        if (draw_control_check !== null) {
            draw_control_check = null;

While searching for an answer I got the idea that it might not even be possible?

  • 1
    Definitely possible, but you'll have to work with the plugin source and figure out how its placing toolbar elements on the page. Have you checked out this: github.com/manleyjster/Leaflet.Toolbar
    – toms
    Commented Dec 12, 2014 at 19:57
  • Ah, this looks promising. I'll look into it tomorrow first thing in the morning. Thanks for pointing this out to me.
    – LarsVegas
    Commented Dec 14, 2014 at 19:36


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Browse other questions tagged or ask your own question.