[GIS] Problems with simple Leaflet + Mapbox TitleLayer

leafletmapboxtile-layertiles

I'm completely new to GIS, and thought I would start off with the leaflet quick tutorial. However, I'm having problems with adding the base tile layer with Mapbox. This is my code so far: 

    <!DOCTYPE html>
<html lang='en'>
<head>
    <title>Agricultural Trade Patterns</title> 
    <meta charset='utf-8' />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    <link rel="stylesheet" href="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.css" />
</head>
<body>
    <div id="map" style="width: 600px; height: 600px"></div> 
    <script src="http://cdn.leafletjs.com/leaflet/v0.7.7/leaflet.js"></script> 
    <script>
        //initialize the map 
        var map = L.map('map').setView([41.854501, -87.715496],13);

        L.titleLayer('https://api.mapbox.com/v4/skadambi.p07cgnk1/page.html?access_token=pk.eyJ1Ijoic2thZGFtYmkiLCJhIjoiY2lqdndsZGg3MGNua3U1bTVmcnRqM2xvbiJ9.9I5ggqzhUVrErEQ328syYQ#3/0.00/0.00', {
            maxZoom:18,
            attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>',
            id: 'skadambi.p07cgnk1',
            accessToken: 'pk.eyJ1Ijoic2thZGFtYmkiLCJhIjoiY2lqdndsZGg3MGNua3U1bTVmcnRqM2xvbiJ9.9I5ggqzhUVrErEQ328syYQ'
        }).addTo(map); 

        map.on('click', onMapClick);


    </script>
</body>

I tried to follow the tutorial as much as I could, but whenever I test it I'm getting the error: 

TypeError: L.titleLayer is not a function

And I can't figure out why.

Am I passing the wrong arguments to tileLayer?

I know my URL template doesn't have the exact format that was on the leaflet tutorial, but I couldn't find a png url like that anywhere?

Is that the problem?

Best Answer

You wrote L.titleLayer, but it should be L.tileLayer.

You also provided an URL that does not serve tiles (individual PNG or JPEG images), but an .html file that contains the complete code with a map already (try opening it, you'll see). You should use this URL from the Leaflet tutorial instead: https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}

Related Question