Accepted answer

If you're open to try, you can use mapbox-gl.js library, which allows to use personalized vector tiles as basemap, so you can customize any element of the basemap. Here you can find some guidelines. Then, it's as easy as passing a property to the map definition:

//Mapbox API Token
mapboxgl.accessToken = '{API TOKEN}'

//Setup mapbox-gl map
var map = new mapboxgl.Map({
    container: 'map',
    style: 'mapbox://styles/{USERNAME}/{STYLE_ID}', //Copied from Mapbox Studio
    center: [Lng, Lat],
    zoom: 4,  

Additionaly, you can use D3.js to work with your data layers, as shown in this example, you just need to include the update() and projectPoint(lon, lat) functions after loading data into SVG elements.

I recently managed to configure the vector tiles and it's awesome how smooth they run with pan/zoom/rotation.


Simply don't add any L.TileLayers to your map, and use CSS to set its background.

Related Query

More Query from same tag