How to make it work with Mapbox ?

[Koosch]

Hi Carderne,

Thanks a lot for the whole process ! I am trying to make it work with a mapbox style. I tried to do it by deleting this part :

var map = L.map('map').setView([40, -100], 4);

// This is the Carto Positron basemap
var basemap = L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
  attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> &copy; <a href="http://cartodb.com/attributions">CartoDB</a>',
  subdomains: 'abcd',
  maxZoom: 19
});
basemap.addTo(map);

And by adding this one instead :

mapboxgl.accessToken = 'My_access_token'; var map = new mapboxgl.Map({ container: 'map', style: 'My_style_URL', center: [-1.547264, 47.204631], zoom: 10 }); basemap.addTo(map);

I am quite new at coding, and every element I found about G. Sheets + Mapbox is old and tools presented do not exist anymore. So, I am counting a lot on your solution, do you think it could work with Mapbox ?

Bests,

Koosch

[carderne]

Hi @Koosch, the problem is that you're trying to use Mapbox GL, whereas my example is based on Leaflet.

It'll be a bit of work to get my example working with Mapbox GL, as it has different APIs for loading data, and the Leaflet plugins I'm using here (AwesomeMarkers and Sidebar) won't necessarily work with Mapbox GL... Feel free to drop me an email (address on my profile page) if you want to discuss further.