3

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?

Improve this question

1 Answer 1

Reset to default
2

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}

Improve this answer
2
  • Oh wow.... that was a dumb error. I can't believe I didn't catch that. Thanks for the link for the URL. Is that the URL you are always supposed to use for mapbox? And then your map id would just change the map displayed?
    – ocean800
    Commented Jan 28, 2016 at 22:18
  • 2
    That would be the easiest way, the {id} and {accessToken} will be replaced by Leaflet with the ID and Token you provide. You can also just write them directly into the URL of course, that would make no difference, but it's easier to read and change this way
    – chrki
    Commented Jan 28, 2016 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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