How to toggle map style without affecting order of the layers.

[Mayur8933]

How to toggle map style without affecting order of the layers. (geojson and raster).

I'm trying to toggle the map style , but what is happening , I'm able to change the map style, but couldn't able to keep the layers in orders, the markers I'm showing are hiding behind the raster layer after changing the style.

I'm sharing my code here, please suggest something. Glad if you helped me.

const mapLoad = () => {
    const map = mapRef.current.getMap();

    // Load all markers with borders on maps
    if (mapRef.current && mapRef.current?.getMap().style._loaded) {
      map.loadImage(markerImg, (error, image) => {
        if (error) throw error;
        map.addImage('custom-marker', image, { sdf: true });
        map.addImage('marker-border', image, { sdf: true });
      })

      baseLayerId.map((getMapId) => {
        map.moveLayer(getMapId + "layer", "border", "point")
      })
    }
    // applyFilter();
    mapFilters();
  };
const stylesChange = () => {
    const map = mapRef.current.getMap();
    if (mapRef.current && mapRef.current.isStyleLoaded()) {
      if (
        mapStyle ==
        "satellite-v9"
      ) {
        map.remove();
        setMapStyle("light-v10")
        map.setMap();
      } else {
        map.remove();
        setMapStyle("satellite-v9")
      }
    }
  };

  return (
    <>
      {geojsoData && geojsoData.length && (
        <Grid className={classes.mapArea}>
          <ReactMapGL
            styleDiffing
            initialViewState={viewPort}
            mapStyle={"mapbox://styles/mapbox/" + mapStyle}
            mapboxAccessToken={MAPBOX_TOKEN}
            ref={mapRef}
            onLoad={mapLoad}
            onMouseMove={handleMouseMove}
            onClick={onClickMarkerEvent}
            onMouseOut={closeAllActions}
          >
            <NavigationControl position="bottom-left" />
            <GeolocateControl position="bottom-left" />

            <button
              className={classes.styleChangeBtn}
              onClick={(e) => stylesChange(e)}
              style={{
                backgroundImage:
                  mapStyle ===
                    "satellite-v9"
                    ? `url(${lightView})`
                    : `url(${satelliteView})`,
              }}
            ></button>

            {/* On hover of Markers displaying popup with Anomaly details and Thermal image */}
            {mouseMoveEvent && panelData && (
              <Popup
                longitude={mouseMoveEvent.lngLat.lng}
                latitude={mouseMoveEvent.lngLat.lat}
                closeButton={false}
              >
                <HoverPopupWithImg panelData={panelData.properties} />
              </Popup>
            )}

            {/* Display markers layer on map */}
            {geojsoData && geojsoData.length && (
              <>
                <Source id="marker" type="geojson" data={{
                  type: "FeatureCollection",
                  features: geojsoData
                }} />

                <Layer
                  id='border'
                  type='symbol'
                  source="marker"
                  layout={{
                    "icon-image": 'marker-border',
                    "icon-size": 0.55,
                    "icon-allow-overlap": true,
                    "visibility": "visible"
                  }}
                  paint={{
                    "icon-color": "white",
                    "icon-halo-color": "white",
                  }}
                />

                <Layer
                  id='point'
                  type='symbol'
                  source="marker"
                  layout={{
                    "icon-image": 'custom-marker',
                    "icon-size": 0.45,
                    "icon-allow-overlap": true,
                    "visibility": "visible"
                  }}
                  paint={{
                    "icon-color": ["get", "color_code"],
                    "icon-halo-color": "white",
                  }}
                />

              </>
            )}

            {/* Base Layers */}
            {baseLayerId.length &&
              baseLayerId.map((getMapId) => {
                return (
                  <React.Fragment key={getMapId}>
                    <Source
                      id={getMapId + "lay"}
                      type="raster"
                      url={`mapbox://${getMapId}`}
                    />
                    <Layer
                      id={getMapId + "layer"}
                      type="raster"
                      source={getMapId + "lay"}
                    />
                  </React.Fragment>
                );
              })}