0

I have been using leaflet to show map in my website, which is in dark mode, but until recently, I found dark mode in leaflet map stopped working at all,

This is my code,

this.map = L.map('dv-map', {
            minZoom: this.props.minZoom,
            maxZoom: this.props.maxZoom
        }).setView(this.props.center, this.props.initLevel);
        L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=' + this.props.mapBoxToken, {
                maxZoom: this.props.maxZoom,
                id: 'mapbox.dark'
            })
            .addTo(this.map);

I tested other id, such as mapbox.streets, mapbox.satellite etc., still fine, only dark is not working at all.

Can anybody tell me how to prvoide dark mode for the leaflet map?

Thanks

user3006967
  • 3,291
  • 10
  • 47
  • 72
  • 2
    Mapbox chaged theier tiles system, take a look here: https://stackoverflow.com/a/64262141/8283938 – Falke Design Oct 17 '20 at 14:37
  • Does this answer your question? [Blank map tiles - Error 410 gone (Mapbox & Leaflet JS)](https://stackoverflow.com/questions/64073635/blank-map-tiles-error-410-gone-mapbox-leaflet-js) – Falke Design Oct 17 '20 at 14:38

1 Answers1

0

Did you tried this?

L.tileLayer('https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}', {
    attribution: '© <a href="https://www.mapbox.com/about/maps/">Mapbox</a> © <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a> <strong><a href="https://www.mapbox.com/map-feedback/" target="_blank">Improve this map</a></strong>',
    tileSize: 512,
    maxZoom: this.props.maxZoom,
    zoomOffset: -1,
    id: 'mapbox/dark-v10',
    accessToken: this.props.mapBoxToken
});
Carlos Denis
  • 1
  • 2
  • 1
    Please consider adding some explanation about what is different and why it would work better. – ghybs Jan 20 '21 at 16:13