Leaflet error: Uncaught TypeError: Cannot read property '_controlCorners'

Question

I'm trying to implement the Leaflet choropleth example on a map I already built.

I've followed the instructions and seen many implementations of the i.control and control hover option on Github but I can't figure out what my type error is.

Uncaught TypeError: Cannot read property '_controlCorners'

I dug into the leaflet.js code but frankly can't figure out what controlcorners is doing.

It has a problem with the line "info.addTo(map);" (see below)

I've console.logged info and it is defined. Where is this undefined part then?

Error in Chrome console:

Uncaught TypeError: Cannot read property '_controlCorners' of undefined 
o.Control.o.Class.extend.addTo
(anonymous function)

Code:

var map;

var mapquestOSM = L.tileLayer("http://{s}.mqcdn.com/tiles/1.0.0/osm/{z}/{x}/{y}.png", {
    maxZoom: 19,
    subdomains: ["otile1", "otile2", "otile3", "otile4"],
    attribution: 'Tiles courtesy of <a href="http://www.mapquest.com/" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png">. Map data (c) <a href="http://www.openstreetmap.org/" target="_blank">OpenStreetMap</a> contributors, CC-BY-SA.'
});


// experiment with info.update

            function style(feature) {
                return {
                    fillColor: getColor(feature.properties.POBTOT),
                    weight: 2,
                    opacity: 1,
                    color: '#666',
                    dashArray: '3',
                    fillOpacity: 0.7
                    };
                }

                var geojson;

                function highlightFeature(e) {
                    var layer = e.target;

                    layer.setStyle({
                        weight: 3,
                        color: '#F00',
                        dashArray: '',
                        fillOpacity: 0.7
                    });

                    if (!L.Browser.ie && !L.Browser.opera) {
                        layer.bringToFront();
                    info.update(layer.feature.properties);
                    }
                }

                function resetHighlight(e) {
                    geojson.resetStyle(e.target);
                    info.update();
                }

                function zoomToFeature(e) {
                    map.fitBounds(e.target.getBounds());
                }

                function onEachFeature(feature, layer) {
                    layer.on({
                        mouseover: highlightFeature,
                        mouseout: resetHighlight,
                        click: zoomToFeature
                    });
                }

                var info = L.control();

                info.onAdd = function (map) {
                    this._div = L.DomUtil.create('div', 'info');
                    this.update();
                    return this._div;
                };

                info.update = function (props) {
                    this._div.innerHTML = '<h4>Población en México</h4>' + (props ?
                        '<b>' + props.NOM_ENT + '</b><br />' + props.POBTOT + ' personas'
                        : 'Mueva el cursor sobre el mapa');
                };
                console.log(info);

                info.addTo(map);

Answer 1

Learned: console.log everything!

Console.log of map variable revealed it was undefined. Needed to move control code down below where I defined L.map.