Leaflet js: Uncaught TypeError: Cannot read property 'addLayer' of undefined

user_4222555 0
Viewed 11676

I'm experimenting with creating a map with Leaflet and displaying a marker on the map. Does anyone have any thoughts on the following error I receive when displaying a marker on the map?

I can initiate a map onload of the page:

var map;
var ajaxRequest;
var plotlist;
var plotlayers=[];

function initmap() {
    // set up the map
    map = new L.Map('map');

    // create the tile layer with correct attribution
    var osmUrl='https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png';
    var osmAttrib='Map data © <a href="https://openstreetmap.org">OpenStreetMap</a> contributors';
    var osm = new L.TileLayer(osmUrl, {minZoom: 8, maxZoom: 20, attribution: osmAttrib});       

    // start the map over Holland
    map.setView(new L.LatLng(52.36994, 4.90788),8);
    map.addLayer(osm);
}

I created a marker:

var marker=L.marker([52.63275, 4.75175]).bindPopup('testmarker');

When adding the marker to the map, I get an error "Uncaught TypeError: Cannot read property 'addLayer' of undefined":

marker.addTo(map);

When including this line within the initmap() function, it works fine. So appearantly the map instance is not reachable or something outside the function? Which is odd since the variable is created at the start of the script, outside the function?

Thanks!

leaflet javascript
2 Answers

Solved it. The map instance was created before the dom was fully loaded, so the div 'map' did not exist yet. I moved the script tags which includes javascript from the head of the page to the end of the body.

user_42225550

Not entirely relevant to this question but this is the first result I got when googling the same error message, so my answer might help others.

I was using Typescript and hit the error in a MapClicked event handler.

Handler looks like this;

 private onMapClicked(e: L.LeafletMouseEvent) {
   ///stuff
   mapItem.addTo(this.map);
 }

I don't know what goes on under the hood with Typescript, but this failed:

this.map.on("click", this.onMapClicked);

/// Cannot read property 'addLayer' of undefined"

and this worked:

this.map.on("click", (e: L.LeafletMouseEvent) => this.onMapClicked(e));
user_58018810
Related