0

I am a new user and I can't seem to get the tiles on the map.

var mymap = L.map('mapid').setView([51.512, -0.104], 1);

L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/{mapbox.mapbox-streets-v8}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: 'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: 'mapbox.mapbox-streets-v8',
    accessToken: 'accessToken.here'
}).addTo(mymap);

var source = new EventSource('/topic/twitterdata2');

source.addEventListener('message', function(e){
    obj = JSON.parse(e.data);
    console.log(obj);
    lat = obj.place.bounding_box.coordinates[0][0][1]; 
    long = obj.place.bounding_box.coordinates[0][0][0];
    username = obj.user.name;
    tweet = obj.text;

    marker = L.marker([lat,long],).addTo(mymap).bindPopup('Username: <strong>' + username + '</strong><br>Tweet: <strong>' + tweet + '</strong>');

}, false);

enter image description here

  • Instead of whole layer name {mapbox.mapbox-streets-v8} you must specify just {id} in layer url. Also id value is wrong, it should be only streets-v8. – TomazicM May 25 at 11:37
0

You can try with this code:

let yourMAP= L.tileLayer(
  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=YourToken",
  {
    attribution:
      'Map data &copy; <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, <a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
    maxZoom: 18,
    id: "mapbox.streets",
    accessToken: "YourToken"
  }
).addTo(mymap);

And you need to get an access token on the Mapbox page. It is free for some number of requests, I am not sure how many, but should be enough for non-commecrial use. Then put the token in accessToken attribute or in the URL of the map(YourToken). Check more at this page: https://docs.mapbox.com/help/tutorials/mapbox-with-openlayers/

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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