Dragging button isn't in the middle of the map

[hejustbrave]

and my code is:

<script> import { onMounted, reactive } from "@vue/runtime-core"; import DrawTool from "./components/drawTool.vue"; // import {} from "leaflet-splitmap";

export default {
name: "App",
components: {
DrawTool,
},
setup() {
// console.log(a);
let L = window.L;
let map = reactive({});
let data = reactive({ myMap: null });
onMounted(() => {
map = L.map("map", {
// 初始化地图信息
crs: L.CRS.EPSG4326,
center: { lat: 22.791758946936532, lng: 113.52616661006695 },
maxZoom: 18,
zoom: 14,
});
data.myMap = map;
require("leaflet-side-by-side");
require("leaflet-splitmap");
var myLayer2 = L.supermap.tiandituTileLayer({
layerType: "vec",
// url:'http://t0.tianditu.gov.cn/cva_c/wmts?',
key: "49d42799e2f10cf2d3c1d24c02cdb71f",
// isLabel:true
}).addTo(map);

  var myLayer1 = L.supermap.tiandituTileLayer({
      layerType: "img",
      key: "49d42799e2f10cf2d3c1d24c02cdb71f",
      // isLabel: true,
    }).addTo(map);
    
    L.control.sideBySide(myLayer2,myLayer1).addTo(map);

  // map.on("mouseup", (e) => {
  //   let latlng = e.latlng;
  //   console.log(latlng); // {lat: 30.59, lng: 114.32}
  //   console.log(map.getZoom()); // {lat: 30.59, lng: 114.32}
  // });
});
return {
  data,
};

},
};
</script>

<style> body { margin: 0; } #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; } #map { position: absolute; left: 0px; right: 0px; width: 100%; height: 100%; } </style>

[zhenyu-123]

text-align: center;

[hejustbrave]

您好，您的邮件本人已经收到，谢谢！

[claudiobogossian]

i had the same problem, make sure map dimensions are updated using map.invalidateSize() before enable sideBySide control.

[hejustbrave]

您好，您的邮件本人已经收到，谢谢！

[Aqulia]

I have the same problem，please tell me the solution about it ，thank you！！！！

[hejustbrave]

您好，您的邮件本人已经收到，谢谢！

[claudiobogossian]

I have the same problem，please tell me the solution about it ，thank you！！！！

After page load, make sure to invoke map.invalidateSize() before enabling sideBySide control.

[Aqulia]

I have the same problem，please tell me the solution about it ，thank you！！！！

After page load, make sure to invoke map.invalidateSize() before enabling sideBySide control.

I tried, but it didn't work. I control the opening and closing of the roller shutter function through a button. But adding the above code is completely useless

[claudiobogossian]

We invalidate only after page load... Not when the tool is activated.

Peek.13-04-2023.19-15.mp4

[Aqulia]

We invalidate only after page load... Not when the tool is activated.

Sorry，I still don't understand when I should call this method, meaning after initializing the map object? Or before loading each layer?I tried both separately, but both failed

[hejustbrave]

now coding with vue，the control seems work normal，my code as the layers added before setting to the control

[iamtekson]

I solved the issue by overwriting the default CSS as below,

.leaflet-sbs-divider {
  margin-left: 10px !important;
}

[hejustbrave]

您好，您的邮件本人已经收到，谢谢！