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);
Best Answer
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.