[GIS] Leaflet MapBox addlayer

javascriptleafletmapbox

I'm newbie in coding and I'm trying to modify some downloaded GitHub code to make customized application and display my data.

AddLayer function is making me desperate.
I'm trying to add data from MapBox account by changing the part of code with my Mapbox username and project id: 

 L.mapbox.tileLayer('myMBid.n7i50n7g'), 
      L.mapbox.gridLayer('myMBid.n7i50n7g'),

Please share your coding knowledge with me and teach me how can I modify code to be able to load data from MapBox?

Or how can I, inside this coding, insert option to load geojson or topojson files from application folder?

Full Code:

<pre>
var map = L.map('map',{maxZoom:17,minZoom:1}).setView([45.2701486, 18.5586462], 13);

L.mapbox.accessToken = 'pk.myMBpublickey';

var baseLayer = new L.mapbox.tileLayer('myMBid.hl6099hm').addTo(map);

// ADD LAYER CONTROLLER
var ui = document.getElementById('layerControls');

//ADD FIRST LAYER
addLayer(
  L.mapbox.tileLayer('myMBid.j2rlctfi'), 
  L.mapbox.gridLayer('myMBid.j2rlctfi'), 
  'Administrativne granice', 
  1
);

//ADD SECOND LAYER
addLayer(
  L.mapbox.tileLayer('myMBid.n7i50n7g'), 
  L.mapbox.gridLayer('myMBid.n7i50n7g'), 
  'Soil Types', 
  3
);

function addLayer(layer, gridlayer, name, zIndex) {
  layer.setZIndex(zIndex);
  var gridControl = L.mapbox.gridControl(gridlayer, {position: 'bottomleft'}).addTo(map);
  // Create a simple layer switcher that toggles layers on
  // and off.
  var link = document.createElement('a');
  link.href = '#';
  link.className = 'btn btn-primary btn-sm';
  link.type = 'button';
  link.innerHTML = name;
  link.onclick = function(e) {
    e.preventDefault();
    e.stopPropagation();
    if (map.hasLayer(layer)) {
      map.removeLayer(layer);
      map.removeControl(gridControl);
      this.className = 'btn btn-primary btn-sm';
    } else {
      map.addLayer(layer);
      map.addLayer(gridlayer);
      map.addControl(gridControl);
      this.className = 'active btn btn-primary btn-sm';
    }
  };
  ui.appendChild(link);
};

// ADD THE REFERENCE OVERLAY
var topPane = L.DomUtil.create('div', 'leaflet-top-pane', map.getPanes().mapPane);
var topLayer = new L.mapbox.tileLayer('landplanner.hl60jemk', {
  maxZoom: 18
}).addTo(map);
topPane.appendChild(topLayer.getContainer());
topLayer.setZIndex(7);
</pre>

Best Answer

You can accomplish this using the following:

L.mapbox.tileLayer('https://{s}.tiles.mapbox.com/v4/YOUR_MAP_ID/{z}/{x}/{y}.png?access_token=YOUR_ACCESS_TOKEN')

All you have to do is replace YOUR_MAP_ID and YOUR_ACCESS_TOKEN in the above snippet.

Related Question