Fix Laggy Map Dragging on Mobile with Dark Mode Enabled

[fityannugroho]

PR Checklist

Please check if your PR fulfills the following requirements:

Put [x] to check

• I have read the documentation.
• I have read and followed the Contributing Guidelines.
• I have included a pull request description of my changes.
• I have included the necessary changes to the documentation.
• I have added tests to cover my changes.

PR Type

What kind of change does this PR introduce?

Please check any kind of changes that applies to this PR using [x]

• Bug fix
• Feature
• Code style update (formatting, local variables)
• Refactoring (no functional changes, no api changes)
• Build related changes
• CI related changes
• ..... (describe the other type)

What is the current behavior?

Please describe the current behavior that you are modifying, or link to a relevant issue.

Issue Number: N/A

Currently, the map experiences lag when dragged on mobile devices with dark mode enabled. The primary cause of this lag is the implementation of dark mode using Tailwind CSS on the map tiles. This setup requires each tile to undergo additional processing to apply the dark theme, resulting in delays that impact performance, especially on mobile.

What is the new behavior?

This pull request includes significant changes to the map component and its dependencies, focusing on improving the map rendering and theming capabilities. The most important changes include the creation of a new TileLayer component, updates to the Map component, and modifications to the package dependencies.

Map Component and TileLayer Enhancements:

• components/map.tsx: Updated to use the new TileLayer component and added a maxZoom property to the MapContainer. [1] [2]
• components/tile-layer.tsx: Created a new TileLayer component that integrates with Maplibre GL and dynamically updates the map style based on the current theme.

Dependency Updates:

• package.json: Added the @maplibre/maplibre-gl-leaflet dependency.
• pnpm-lock.yaml: Updated to include several new dependencies related to Maplibre and other map rendering libraries. [1] [2] [3] [4] [5] [6] [7] [8] [9] [10] [11] [12] [13] [14] [15] [16] [17] [18] [19] [20] [21] [22] [23]

Other information

None

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
idn-area-map	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Nov 13, 2024 3:29am