CODEWITHSUNDEEP
leaflet
Claes Gustavsson
Claes Gustavsson

Reputation: 5669

loading leaflet map in ajax loaded page renders no tiles?

Hi I´m doing a phonegap app that loads my subpages with ajax and in one off them I´m trying to load a leaflet map. It is not rendering the tiles? I don´t know what I´m missing?

I load the leaflet css and js file in my index file and in my subpage that should display the map I have the following code:

    <div id="themappage">
       <div id="header" class="toolbar">
        <h1>The Map</h1>
        <a href="#" class="back">BACK</a>
      </div>


    <div id="map"></div>


    <script>
    $(document).ready(function(){


        var map = L.map('map');

            L.tileLayer('http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d/997@2x/256/{z}/{x}/{y}.png', {
                maxZoom: 18,
                attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://cloudmade.com">CloudMade</a>'
            }).addTo(map);

            function onLocationFound(e) {
                var radius = e.accuracy / 2;

                L.marker(e.latlng).addTo(map)
                    .bindPopup("You are within " + radius + " meters from this point").openPopup();

                L.circle(e.latlng, radius).addTo(map);
            }

            function onLocationError(e) {
                alert(e.message);
            }

            map.on('locationfound', onLocationFound);
            map.on('locationerror', onLocationError);

            map.locate({setView: true, maxZoom: 16});
 });
    </script>
    </div>

Any input appreciated, thanks.

Update! Just found out if I use http://{s}.tile.osm.org/{z}/{x}/{y}.png instead off http://{s}.tile.cloudmade.com/42dfb943872a465d89807eb88f6a1f4d/997/256/{z}/{x}/{y}.png as the tile layer then it renders the tiles, why doesn´t the tiles from cloudemade render?

Upvotes: 0

Views: 1720

Answers (1)

Josh
Josh

Reputation: 3442

When I tried to load it, I got a 403 (Forbidden) error using that API-Key. Try to get another one (you did request your own right?). The reason that the OSM works is that it doesn't require an API-Key.

The API-Key is the part of the url that starts with 42dfb... and goes to the /. Replace that with a good key and you should be good to go.

Upvotes: 1

Related Questions