2015-02-20 21 views
5

Próbuję dodać mapy ulotek do mojej strony i używam kafelków Mapbox. Nie jestem w stanie uzyskać mapy w podstawowym samouczku do pracy, wszystko co widzę to szary ekran. Mam identyfikator mp z mapbox i dodałem go do mojego kodu. Załączanie odpowiedniego kodu poniżej.Problemy z mapami ulotek (płytki map GET nieautoryzowane 401)

var map = L.map('map').setView([51.505, -0.09], 13); 
    L.tileLayer('http://{s}.tiles.mapbox.com/v3/rakshak.l937n12c/{z}/{x}/{y}.png', { 
    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://mapbox.com">Mapbox</a>', 
    maxZoom: 18 
    }).addTo(map); 

i to co widzę w konsoli:

GET http://a.tiles.mapbox.com/v4/rakshak.l937n12c/13/4093/2723.png 401 (Unauthorized) 

W css mam po prostu umieścić wysokość mapy, aby wysokość: 100vh.

Wszystko, co widzę na moim ekranie to kontroler powiększenia mapy i szary ekran. Czy brakuje mi ważnego kroku?

Edit 1: Aktualizacja kod JS:

var map = L.map('map').setView([51.505, -0.09], 13); 
L.tileLayer('http://api.tiles.mapbox.com/v4/rakshak.l937n12c/{z}/{x}/{y}.{format}?access_token=pk.eyJ1IjoicmFrc2hhayIsImEiOiJ5cHhqeHlRIn0.Vi87VjI1cKbl1lhOn95Lpw', { 
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://mapbox.com">Mapbox</a>', 
maxZoom: 18 
}).addTo(map); 
+1

Żądany jest token: zobacz https://www.mapbox.com/developers/api/maps/. Twoja prośba powinna wyglądać następująco: 'http://api.tiles.mapbox.com/v4/{mapid}/{z}/{x}/{y}.{format}?access_token=. Ustawiłeś tylko 'mapid''a – slaur4

+0

Hej dzięki za odpowiedź, dodałem token dostępu z ekranu mopboksa i nadal widzę szary ekran i ten sam komunikat o błędzie w konsoli. Dodałem mój kod aktualizacji js do mojego pytania. – DrkStr

Odpowiedz

9

Skonfiguruj tileLayer zawierać identyfikator mapy i token użytkownika:

var tileLayer = L.tileLayer('https://{s}.tiles.mapbox.com/v4/{mapId}/{z}/{x}/{y}.png?access_token={token}', { 
    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://mapbox.com">Mapbox</a>', 
    subdomains: ['a','b','c','d'], 
    mapId: <YOUR MAPID HERE>, 
    token: <YOUR TOKEN HERE> 
}); 

Oto przykład pracuje nad Plunker: http://plnkr.co/edit/Kf3f8h?p=preview

+0

Próbowałem tego, teraz pojawia się błąd "Uncaught TypeError: undefined is not function" in line leaflet.js: 7. – DrkStr

+1

Cóż, ten kod Ci dał, działa, możesz sprawdzić przykład. Co mogę powiedzieć? Oto kolejny Plunker używający twojego MapID i tokena: http://plnkr.co/edit/kzA9Vw?p=preview, to działa. Co robisz źle, nie widzę na podstawie podanego kodu. Czy możesz podzielić się Plunkerem lub JSfiddle, który ma twój problem? – iH8

+0

Nigdy wcześniej nie używałam pnkr, więc nie jestem pewien, czy zrobiłem to dobrze. Oto link: http://plnkr.co/edit/9TLUXY9zutATHHBdCdMk?p=preview – DrkStr

Powiązane problemy