Leaflet: t.addLayer error

[joefinnerty]

I downloaded the javascript zip and extracted it in a folder on my webserver.

In header.php

============================================= tried to generate a map from the example:

=============================================

receive the error below:
leaflet.js:5 Uncaught TypeError: t.addLayer is not a function

console info seems to point to:
attribution: '© OpenStreetMap contributors'})

[IvanSanchez]

.addTo() needs an instance of L.Map, not a string.

[kannes]

Randomly spotted this issue and saw the 3 thumbs-down icons on @IvanSanchez's comment without comments. I assume those were 3 unhappy, ungrateful users that had the same issue but sadly did not bother asking for details?

The long explanation and solution should be this (untested, from the top of my head):

<script type="text/javascript">
var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(mapid);

L.marker([51.5, -0.09]).addTo(mapid).bindPopup(
   'A pretty CSS3 pop. Easily customizable.'
).openPopup();
</script> 

@joefinnerty sadly did not provide a minimal, working example so we have to guess what mapid is. Like Ivan suggested, it probably is a string, probably the CSS id of the map DIV element.

You cannot use that on a Tile Layer's or Marker's addTo() method. You must pass the actual Leaflet Map object to that. Here that would be the map.

So presumably this should work:

<script type="text/javascript">
var map = L.map('mapid').setView([51.505, -0.09], 13);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

L.marker([51.5, -0.09]).addTo(map).bindPopup(
   'A pretty CSS3 pop. Easily customizable.'
).openPopup();
</script>