title: How can I get a leaflet.js instance using only a DOM object?
body: <p>I'm right now building a custom Knockout.js binding to handle drawing of polygons. In this case the Knockout API only gives me a reference to a DOM object to access whatever it is I need to update. However, it looks like by design leaflet.js wants the user to store the map instance in their implementation. I don't have that option.</p>
  
  <p>Trying this gave me an error: <code>var existingMap = L.map('aMapIDGoesHere')</code> </p>
  
  <p>And the error was: <code>map already initialized</code>.</p>
  
  <p>Any way I can use a DOM element or element ID to access the map instance?</p>
  
  <p>By request here's the custom binding, please note it's a work in progress:</p>
  
  <pre><code>ko.bindingHandlers.leafletDraw = {
    init: function(element, valueAccessor, allBindingsAccessor) {
      var map = L.map(element).setView([40, -90], 3);
      var tiles = L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
          attribution: 'OSM',
          minZoom: 2
      }).addTo(map);
  
      // Initialise the FeatureGroup to store editable layers
      var editableLayers = new L.FeatureGroup();
      map.addLayer(editableLayers);
  
      // Initialise the draw control and pass it the FeatureGroup of editable layers
      var drawOptions = {
        edit: {
          featureGroup: editableLayers,
          remove: false
        },
        draw: {
          polyline: false,
          circle: false,
          marker: false,
          polygon: {
            allowIntersection: false,
            showArea: true
          }
        }
      }
      var drawControl = new L.Control.Draw(drawOptions);
      map.addControl(drawControl);
  
      // when a shape is first created
      map.on('draw:created', function (e) {
        var shapeString = $.map(e.layer._latlngs, function(pair) { return pair.lng.toString()+"::"+pair.lat.toString(); }).join(";;;");
        var value = valueAccessor();
        if (ko.isObservable(value)) {
          value(shapeString);
        }
  
        editableLayers.addLayer(e.layer);
  
        drawControl.removeFrom(map);
        drawOptions.draw.polygon = false;
        drawOptions.draw.rectangle = false;
        var editControl = new L.Control.Draw(drawOptions);
        map.addControl(editControl);
      });
  
      // handle when a shape is edited
      map.on('draw:edited', function (e) {
        var editedLayer = e.layers._layers[Object.keys(e.layers._layers)[0]];
        var shapeString = $.map(editedLayer._latlngs, function(pair) { return pair.lng.toString()+"::"+pair.lat.toString(); }).join(";;;");
        var value = valueAccessor();
        if (ko.isObservable(value)) {
          value(shapeString);
        }
      });
    },
    update: function(element, valueAccessor) {
      // need to figure this out since we can't access leaflet params from 
    }
  };
  </code></pre>
  
  <p><strong>Special Note</strong> You'll notice that I am converting points into a concatenated string. This is necessary for the time being.</p>