1

I think the problem is in the mbURL. Simplified script:

    osmUrl    = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
    esriUrl   = 'https://server.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServe\
r/tile/{z}/{y}/{x}',
    mbUrl = 'https://api.tiles.mapbox.com/v4/mtnbiker.d7jfhf8u.json?access_token=pk.eyJ1IjoibXRuYmlrZXIiLCJhIjoiNmI5ZmZjMzAyNzJhY2Q0N2ZlN2E1ZTdkZjBiM2I1MTUifQ.6R3ptz9ejWpxcdZetLLRqg';


var mbMap   = L.tileLayer(mbUrl),
    osmMap  = L.tileLayer(osmUrl),
    esriMap = L.tileLayer(esriUrl);

var map = L.map('map', {layers: [osmMap]})
           .setView([<%= @location.latitude %>, <%= @location.longitude %>], 17);

var baseLayers = {
  "OSM Street" : osmMap,
  "1908 LA [?]": mbMap,
  "Satellite"  : esriMap
};

L.control.layers(baseLayers).addTo(map);

You can see this in (in)action at alpha site and then click on stack on the right and select 1908 LA. No errors, but no display. I can display the tiles—click on Map on the nav bar, it's the same map I want to display. Something wrong in the syntax of mbURL, but I've looked searched and tried many alternatives. (The lat and long are Rails calls to a PostgreSQL database and they work, because they also display the marker. The ? mark in 1908 LA is to suggest the user that there may be a problem.)

Code is at https://git.heroku.com/secure-shore-68966.git. Tileset is at https://www.mapbox.com/studio/tilesets/mtnbiker.d7jfhf8u/.

1

A L.TileLayer expects a url template for tiled images. What you're feeding it is a TileJSON metadata description for the tileset.

Look at the metadata manually, find the tile URL template, create a L.TileLayer with it:

L.tileLayer("http://{s}.tiles.mapbox.com/v4/mtnbiker.d7jfhf8u/{z}/{x}/{y}.jpg?access_token=pk.eyJ1IjoibXRuYmlrZXIiLCJhIjoiNmI5ZmZjMzAyNzJhY2Q0N2ZlN2E1ZTdkZjBiM2I1MTUifQ.6R3ptz9ejWpxcdZetLLRqg").addTo(map);

See a working example.

2
  • Thank you. I see how that creates a single layer. But how do I make it one of the selectable layers? I admit to being confused by the various syntaxes possible with Mapbox/Leaflet. I had successfully displayed the 1908 LA map as a baselayer on secure-shore-68966.herokuapp.com/map
    – Greg
    Oct 20 '16 at 15:52
  • to make it as selectable layer, set your mbUrl variable as the string provided here. It should have the {s}, {z}/{x}/{y} parameters as the osmUrl variable does.
    – Nikhil VJ
    Sep 2 '17 at 2:46

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.