Enhance map updates and component performance

- Updated API documentation to clarify the initial data message structure for real-time tile updates.
- Modified MapView component to load configuration and user data in parallel, improving map loading speed.
- Implemented asynchronous loading for markers after the map is visible, enhancing user experience.
- Introduced batching for tile updates to optimize rendering performance during map updates.
- Refactored character and marker creation functions to utilize dynamic Leaflet imports, improving modularity.

frontend-nuxt/composables/useMapInit.ts

@@ -67,6 +67,7 @@ export async function initLeafletMap(
   const layer = new SmartTileLayer(tileUrl, {
     minZoom: 1,
     maxZoom: 6,
+    maxNativeZoom: 6,
     zoomOffset: 0,
     zoomReverse: true,
     tileSize: TileSize,
@@ -81,6 +82,7 @@ export async function initLeafletMap(
   const overlayLayer = new SmartTileLayer(tileUrl, {
     minZoom: 1,
     maxZoom: 6,
+    maxNativeZoom: 6,
     zoomOffset: 0,
     zoomReverse: true,
     tileSize: TileSize,
@@ -100,6 +102,8 @@ export async function initLeafletMap(
     opacity: 0,
     visible: false,
     pane: 'tilePane',
+    updateWhenIdle: true,
+    keepBuffer: 2,
   } as GridCoordLayerOptions)
   coordLayer.addTo(map)
   coordLayer.setZIndex(500)