3

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

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.

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.