diff --git a/dist/charting.js b/dist/charting.js
index 9c57fc9c..9c04eb76 100644
--- a/dist/charting.js
+++ b/dist/charting.js
@@ -38670,6 +38670,7 @@ function mapMixin(_chart, chartDivId, _mapboxgl) {
         });
         _map.on("styledata", function () {
           // reapplying the previous style's render layer to the new style layer when basemap gets changed
+          var firstSymbolLayerId = getFirstSymbolLayerId();
           if (savedLayers.length) {
             Object.entries(savedSources).forEach(function (_ref4) {
               var _ref5 = _slicedToArray(_ref4, 2),
@@ -38678,7 +38679,7 @@ function mapMixin(_chart, chartDivId, _mapboxgl) {
               if (!_map.getSource(source)) {
                 _map.addSource(id, source);
                 savedLayers.forEach(function (layer) {
-                  _map.addLayer(layer);
+                  _map.addLayer(layer, firstSymbolLayerId);
                 });
                 savedLayers = [];
                 savedSources = {};
diff --git a/src/mixins/map-mixin.js b/src/mixins/map-mixin.js
index 0c99dcc3..ff18df02 100644
--- a/src/mixins/map-mixin.js
+++ b/src/mixins/map-mixin.js
@@ -873,12 +873,14 @@ export default function mapMixin(
 
       _map.on("styledata", () => {
         // reapplying the previous style's render layer to the new style layer when basemap gets changed
+        const firstSymbolLayerId = getFirstSymbolLayerId()
+
         if (savedLayers.length) {
           Object.entries(savedSources).forEach(([id, source]) => {
             if (!_map.getSource(source)) {
               _map.addSource(id, source)
               savedLayers.forEach(layer => {
-                _map.addLayer(layer)
+                _map.addLayer(layer, firstSymbolLayerId)
               })
               savedLayers = []
               savedSources = {}