0

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>
1

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.

0

I tried to check if my MapBox data is ok and I tested the code in Plunker:

    L.mapbox.accessToken = 'pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg';

var map = L.mapbox.map('mapbox', 'fnevistic.n7o8oi8c', {
  'center': [45.25, 18.55],
  'zoom': 12
});

Everything is working fine. Map is displayed, pop-up is working. Now I'm trying to find the way to implement that code inside existing one:

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

I've made code corrections according to Evil Genius instructions:

//ADD FIRST LAYER
addLayer(
  L.mapbox.tileLayer(''https://{s}.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg'), 
  L.mapbox.gridLayer(''https://{s}.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg'), 
  'Administrativne granice', 
  1
);

When I run the application I'm getting these errors:

*

GET https://a.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/%7Bz%7D/%7Bx%7D/%7By%7D.pn…token=pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg 404 (Not Found) i @ mapbox.js:1e.exports @ mapbox.js:6e.exports._loadTileJSON @ mapbox.js:6L.TileLayer.extend.initialize @ mapbox.js:6s.Class.extend.e @ mapbox.js:1e.exports @ mapbox.js:7(anonymous function) @ physicalLayers.js:15 mapbox.js:7

could not load TileJSON at

https://a.tiles.mapbox.com/v4/fnevistic.n7o8oi8c/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoiZm5ldmlzdGljIiwiYSI6IkZyYy03U28ifQ.tI5Od3maJWFflOMcit5vDg e.exports.log @ mapbox.js:7(anonymous function) @ mapbox.js:6s.Util.bind @ mapbox.js:1s @ mapbox.js:6o @ mapbox.js:1

*

  • L.mapbox.tileLayer(''https://{s}: Are there two " ' " on purpose in front of 'HTTPS'? Please incorporate edits and other changes into your question and not as an answer. – Klaster Aug 21 '15 at 12:13
  • Still not working. Getting this error in console: "Failed to load resource: net::ERR_INSECURE_RESPONSE" – Phil Aug 21 '15 at 13:31

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.