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?

  • 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 Dec 12 '14 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 Dec 14 '14 at 19:36

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.