How to switch Mapbox base map layers?

Question

Can someone help me on how I can switch the basemap layers?

I'm using Mapbox layers, but when I switch from satellite to road, the feature layer is pushed to the behind the new basemap.

Answer 1

This occurs when your code does not differentiate between Basemaps and Overlays.

Your feature layers should be added to the map as overlays and not basemaps.

The following example is from the Leaflet LayersControl docs page

var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/API-key/{styleId}/256/{z}/{x}/{y}.png',
    cloudmadeAttribution = 'Map data © 2011 OpenStreetMap contributors, Imagery © 2011 CloudMade';

var minimal   = L.tileLayer(cloudmadeUrl, {styleId: 22677, attribution: cloudmadeAttribution}),
    midnight  = L.tileLayer(cloudmadeUrl, {styleId: 999,   attribution: cloudmadeAttribution}),
    motorways = L.tileLayer(cloudmadeUrl, {styleId: 46561, attribution: cloudmadeAttribution});

var map = L.map('map', {
    center: new L.LatLng(39.73, -104.99),
    zoom: 10,
    layers: [minimal, motorways, cities]
});

var baseMaps = {
    "Minimal": minimal,
    "Night View": midnight
};

var overlayMaps = {
    "Motorways": motorways,
    "Cities": cities
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

At this point, the basemaps (Minimal and Night View) will always be underneath the overlays (Motorways and Cities) - no matter how many times you switch between basemaps.

Make sure your feature layers are added to the map as overlays and not as basemaps.