diff --git a/CHANGELOG.md b/CHANGELOG.md
index b948c54b..10acbe02 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -9,6 +9,7 @@
 - Add support to edit local files on the file system if supported by the browser
 - Upgrade to MapLibre LG JS v5
 - Upgrade Vite 6 and Cypress 14 ([#970](https://github.com/maplibre/maputnik/pull/970))
+- Upgrade OpenLayers from v6 to v10
 - _...Add new stuff here..._
 
 ### 🐞 Bug fixes
diff --git a/package-lock.json b/package-lock.json
index 9ff31097..fe735988 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -38,8 +38,8 @@
         "lodash.throttle": "^4.1.1",
         "maplibre-gl": "^5.0.1",
         "maputnik-design": "github:maputnik/design#172b06c",
-        "ol": "^6.14.1",
-        "ol-mapbox-style": "^7.1.1",
+        "ol": "^10.3.1",
+        "ol-mapbox-style": "^12.4.0",
         "prop-types": "^15.8.1",
         "react": "^18.2.0",
         "react-accessible-accordion": "^5.0.0",
@@ -1885,12 +1885,6 @@
         "gl-style-validate": "dist/gl-style-validate.mjs"
       }
     },
-    "node_modules/@maplibre/maplibre-gl-style-spec/node_modules/quickselect": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
-      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
-      "license": "ISC"
-    },
     "node_modules/@mdi/js": {
       "version": "7.4.47",
       "resolved": "https://registry.npmjs.org/@mdi/js/-/js-7.4.47.tgz",
@@ -1950,9 +1944,10 @@
       }
     },
     "node_modules/@petamoriken/float16": {
-      "version": "3.8.6",
-      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.8.6.tgz",
-      "integrity": "sha512-GNJhABTtcmt9al/nqdJPycwFD46ww2+q2zwZzTjY0dFFwUAFRw9zszvEr9osyJRd9krRGy6hUDopWUg9fX7VVw=="
+      "version": "3.9.1",
+      "resolved": "https://registry.npmjs.org/@petamoriken/float16/-/float16-3.9.1.tgz",
+      "integrity": "sha512-j+ejhYwY6PeB+v1kn7lZFACUIG97u90WxMuGosILFsl9d4Ovi0sjk0GlPfoEcx+FzvXZDAfioD+NGnnPamXgMA==",
+      "license": "MIT"
     },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
@@ -2698,6 +2693,12 @@
       "integrity": "sha512-k58cfpkK15AKn1m+oRd9nh5BnuiowhbyvBBdAzcddtARMr3xRzP0VlFaAKovSG6N6Knx08EicjPlOMzDejerrQ==",
       "dev": true
     },
+    "node_modules/@types/rbush": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/@types/rbush/-/rbush-4.0.0.tgz",
+      "integrity": "sha512-+N+2H39P8X+Hy1I5mC6awlTX54k3FhiUmvt7HWzGJZvF+syUAAxP/stwppS8JE84YHqFgRMv6fCy31202CMFxQ==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "18.3.18",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.18.tgz",
@@ -4420,6 +4421,40 @@
       "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.4.tgz",
       "integrity": "sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA=="
     },
+    "node_modules/color-parse": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/color-parse/-/color-parse-2.0.2.tgz",
+      "integrity": "sha512-eCtOz5w5ttWIUcaKLiktF+DxZO1R9KLNY/xhbV6CkhM7sR3GhVghmt6X6yOnzeaM24po+Z9/S1apbXMwA3Iepw==",
+      "license": "MIT",
+      "dependencies": {
+        "color-name": "^2.0.0"
+      }
+    },
+    "node_modules/color-parse/node_modules/color-name": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/color-name/-/color-name-2.0.0.tgz",
+      "integrity": "sha512-SbtvAMWvASO5TE2QP07jHBMXKafgdZz8Vrsrn96fiL+O92/FN/PLARzUW5sKt013fjAprK2d2iCn2hk2Xb5oow==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12.20"
+      }
+    },
+    "node_modules/color-rgba": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/color-rgba/-/color-rgba-3.0.0.tgz",
+      "integrity": "sha512-PPwZYkEY3M2THEHHV6Y95sGUie77S7X8v+h1r6LSAPF3/LL2xJ8duUXSrkic31Nzc4odPwHgUbiX/XuTYzQHQg==",
+      "license": "MIT",
+      "dependencies": {
+        "color-parse": "^2.0.0",
+        "color-space": "^2.0.0"
+      }
+    },
+    "node_modules/color-space": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/color-space/-/color-space-2.0.1.tgz",
+      "integrity": "sha512-nKqUYlo0vZATVOFHY810BSYjmCARrG7e5R3UE3CQlyjJTvv5kSSmPG1kzm/oDyyqjehM+lW1RnEt9It9GNa5JA==",
+      "license": "MIT"
+    },
     "node_modules/color-string": {
       "version": "1.9.1",
       "resolved": "https://registry.npmjs.org/color-string/-/color-string-1.9.1.tgz",
@@ -6401,39 +6436,24 @@
       "license": "ISC"
     },
     "node_modules/geotiff": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.0.4.tgz",
-      "integrity": "sha512-aG8h9bJccGusioPsEWsEqx8qdXpZN71A20WCvRKGxcnHSOWLKmC5ZmsAmodfxb9TRQvs+89KikGuPzxchhA+Uw==",
+      "version": "2.1.3",
+      "resolved": "https://registry.npmjs.org/geotiff/-/geotiff-2.1.3.tgz",
+      "integrity": "sha512-PT6uoF5a1+kbC3tHmZSUsLHBp2QJlHasxxxxPW47QIY1VBKpFB+FcDvX+MxER6UzgLQZ0xDzJ9s48B9JbOCTqA==",
+      "license": "MIT",
       "dependencies": {
         "@petamoriken/float16": "^3.4.7",
         "lerc": "^3.0.0",
-        "lru-cache": "^6.0.0",
         "pako": "^2.0.4",
         "parse-headers": "^2.0.2",
+        "quick-lru": "^6.1.1",
         "web-worker": "^1.2.0",
-        "xml-utils": "^1.0.2"
+        "xml-utils": "^1.0.2",
+        "zstddec": "^0.1.0"
       },
       "engines": {
-        "browsers": "defaults",
         "node": ">=10.19"
       }
     },
-    "node_modules/geotiff/node_modules/lru-cache": {
-      "version": "6.0.0",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz",
-      "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==",
-      "dependencies": {
-        "yallist": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=10"
-      }
-    },
-    "node_modules/geotiff/node_modules/yallist": {
-      "version": "4.0.0",
-      "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
-      "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A=="
-    },
     "node_modules/get-caller-file": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-2.0.5.tgz",
@@ -8445,7 +8465,8 @@
     "node_modules/lerc": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/lerc/-/lerc-3.0.0.tgz",
-      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww=="
+      "integrity": "sha512-Rm4J/WaHhRa93nCN2mwWDZFoRVF18G1f47C+kvQWyHGEZxFpTUi73p7lMVSAndyxGt6lJ2/CFbOcf9ra5p8aww==",
+      "license": "Apache-2.0"
     },
     "node_modules/levn": {
       "version": "0.4.1",
@@ -8851,12 +8872,6 @@
         "pbf": "bin/pbf"
       }
     },
-    "node_modules/maplibre-gl/node_modules/quickselect": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
-      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
-      "license": "ISC"
-    },
     "node_modules/maplibre-gl/node_modules/which": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/which/-/which-4.0.0.tgz",
@@ -9715,14 +9730,18 @@
       }
     },
     "node_modules/ol": {
-      "version": "6.15.1",
-      "resolved": "https://registry.npmjs.org/ol/-/ol-6.15.1.tgz",
-      "integrity": "sha512-ZG2CKTpJ8Q+tPywYysVwPk+yevwJzlbwjRKhoCvd7kLVWMbfBl1O/+Kg/yrZZrhG9FNXbFH4GeOZ5yVRqo3P4w==",
+      "version": "10.3.1",
+      "resolved": "https://registry.npmjs.org/ol/-/ol-10.3.1.tgz",
+      "integrity": "sha512-D1nRQVLOBCRempVqBFV8pSI5H13BtnhuLDjGl+3NKdMOFyjx/UqRX/tcMspEw3LhFOSPWn1Ev+1KIRV8AlHM7A==",
+      "license": "BSD-2-Clause",
       "dependencies": {
-        "geotiff": "2.0.4",
-        "ol-mapbox-style": "^8.0.5",
-        "pbf": "3.2.1",
-        "rbush": "^3.0.1"
+        "@types/rbush": "4.0.0",
+        "color-rgba": "^3.0.0",
+        "color-space": "^2.0.1",
+        "earcut": "^3.0.0",
+        "geotiff": "^2.1.3",
+        "pbf": "4.0.1",
+        "rbush": "^4.0.0"
       },
       "funding": {
         "type": "opencollective",
@@ -9730,22 +9749,28 @@
       }
     },
     "node_modules/ol-mapbox-style": {
-      "version": "7.1.1",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-7.1.1.tgz",
-      "integrity": "sha512-GLTEYiH/Ec9Zn1eS4S/zXyR2sierVrUc+OLVP8Ra0FRyqRhoYbXdko0b7OIeSHWdtJfHssWYefDOGxfTRUUZ/A==",
-      "dependencies": {
-        "@mapbox/mapbox-gl-style-spec": "^13.20.1",
-        "mapbox-to-css-font": "^2.4.1",
-        "webfont-matcher": "^1.1.0"
-      }
-    },
-    "node_modules/ol/node_modules/ol-mapbox-style": {
-      "version": "8.2.1",
-      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-8.2.1.tgz",
-      "integrity": "sha512-3kBBuZC627vDL8vnUdfVbCbfkhkcZj2kXPHQcuLhC4JJEA+XkEVEtEde8x8+AZctRbHwBkSiubTPaRukgLxIRw==",
+      "version": "12.4.0",
+      "resolved": "https://registry.npmjs.org/ol-mapbox-style/-/ol-mapbox-style-12.4.0.tgz",
+      "integrity": "sha512-P8Jg9AXSG6FpUNrADejpwMG0HbmHTZOJQQocACzaDL0QrU4kzmCvj06xUIKhTxT5mtC413pCVAbyXJ4mx0XFnQ==",
+      "license": "BSD-2-Clause",
       "dependencies": {
         "@mapbox/mapbox-gl-style-spec": "^13.23.1",
         "mapbox-to-css-font": "^2.4.1"
+      },
+      "peerDependencies": {
+        "ol": "*"
+      }
+    },
+    "node_modules/ol/node_modules/pbf": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/pbf/-/pbf-4.0.1.tgz",
+      "integrity": "sha512-SuLdBvS42z33m8ejRbInMapQe8n0D3vN/Xd5fmWM3tufNgRQFBpaW2YVJxQZV4iPNqb0vEFvssMEo5w9c6BTIA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "resolve-protobuf-schema": "^2.1.0"
+      },
+      "bin": {
+        "pbf": "bin/pbf"
       }
     },
     "node_modules/once": {
@@ -9874,7 +9899,8 @@
     "node_modules/pako": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/pako/-/pako-2.1.0.tgz",
-      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="
+      "integrity": "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug==",
+      "license": "(MIT AND Zlib)"
     },
     "node_modules/parent-module": {
       "version": "1.0.1",
@@ -9891,7 +9917,8 @@
     "node_modules/parse-headers": {
       "version": "2.0.5",
       "resolved": "https://registry.npmjs.org/parse-headers/-/parse-headers-2.0.5.tgz",
-      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA=="
+      "integrity": "sha512-ft3iAoLOB/MlwbNXgzy43SWGP6sQki2jQvAyBg/zDFAgr9bfNWZIUj42Kw2eJIl8kEi4PbgE6U1Zau/HwI75HA==",
+      "license": "MIT"
     },
     "node_modules/parse-json": {
       "version": "5.2.0",
@@ -10481,6 +10508,18 @@
       "integrity": "sha512-kJt5qhMxoszgU/62PLP1CJytzd2NKetjSRnyuj31fDd3Rlcz3fzlFdFLD1SItunPwyqEOkca6GbV612BWfaBag==",
       "dev": true
     },
+    "node_modules/quick-lru": {
+      "version": "6.1.2",
+      "resolved": "https://registry.npmjs.org/quick-lru/-/quick-lru-6.1.2.tgz",
+      "integrity": "sha512-AAFUA5O1d83pIHEhJwWCq/RQcRukCkn/NSm2QsTEMle5f2hP0ChI2+3Xb051PZCkLryI/Ir1MVKviT2FIloaTQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/quick-temp": {
       "version": "0.1.8",
       "resolved": "https://registry.npmjs.org/quick-temp/-/quick-temp-0.1.8.tgz",
@@ -10549,9 +10588,10 @@
       }
     },
     "node_modules/quickselect": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-2.0.0.tgz",
-      "integrity": "sha512-RKJ22hX8mHe3Y6wH/N3wCM6BWtjaxIyyUIkpHOvfFnxdI4yD4tBXEBKSbriGujF6jnSVkJrffuo6vxACiSSxIw=="
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/quickselect/-/quickselect-3.0.0.tgz",
+      "integrity": "sha512-XdjUArbK4Bm5fLLvlm5KpTFOiOThgfWWI4axAZDWg4E/0mKdZyI9tNEfds27qCi1ze/vwTR16kvmmGhRra3c2g==",
+      "license": "ISC"
     },
     "node_modules/randombytes": {
       "version": "2.1.0",
@@ -10569,11 +10609,12 @@
       "integrity": "sha512-Mn6TbyYpFgwFuQ8KJKqf3bqqY9O1y37/0jgSK/61PUxV4QfIMv0+K2ioq8DfOjkBslcjwSzRfIDEXfzA9aCx7A=="
     },
     "node_modules/rbush": {
-      "version": "3.0.1",
-      "resolved": "https://registry.npmjs.org/rbush/-/rbush-3.0.1.tgz",
-      "integrity": "sha512-XRaVO0YecOpEuIvbhbpTrZgoiI6xBlz6hnlr6EHhd+0x9ase6EmeN+hdwwUaJvLcsFFQ8iWVF1GAK1yB0BWi0w==",
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/rbush/-/rbush-4.0.1.tgz",
+      "integrity": "sha512-IP0UpfeWQujYC8Jg162rMNc01Rf0gWMMAb2Uxus/Q0qOFw4lCcq6ZnQEZwUoJqWyUGJ9th7JjwI4yIWo+uvoAQ==",
+      "license": "MIT",
       "dependencies": {
-        "quickselect": "^2.0.0"
+        "quickselect": "^3.0.0"
       }
     },
     "node_modules/react": {
@@ -13079,12 +13120,8 @@
     "node_modules/web-worker": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/web-worker/-/web-worker-1.3.0.tgz",
-      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA=="
-    },
-    "node_modules/webfont-matcher": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/webfont-matcher/-/webfont-matcher-1.1.0.tgz",
-      "integrity": "sha512-ov8lMvF9wi4PD7fK2Axn9PQEpO9cYI0fIoGqErwd+wi8xacFFDmX114D5Q2Lw0Wlgmb+Qw/dKI2KTtimrJf85g=="
+      "integrity": "sha512-BSR9wyRsy/KOValMgd5kMyr3JzpdeoR9KVId8u5GVlTTAtNChlsE4yTxeY7zMdNSyOmoKBv8NH2qeRY9Tg+IaA==",
+      "license": "Apache-2.0"
     },
     "node_modules/whatwg-encoding": {
       "version": "3.1.1",
@@ -13286,9 +13323,10 @@
       }
     },
     "node_modules/xml-utils": {
-      "version": "1.8.0",
-      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.8.0.tgz",
-      "integrity": "sha512-1TY5yLw8DApowZAUsWCniNr8HH6Ebt6O7UQvmIwziGKwUNsQx6e+4NkfOvCfnqmYIcPjCeoI6dh1JenPJ9a1hQ=="
+      "version": "1.10.1",
+      "resolved": "https://registry.npmjs.org/xml-utils/-/xml-utils-1.10.1.tgz",
+      "integrity": "sha512-Dn6vJ1Z9v1tepSjvnCpwk5QqwIPcEFKdgnjqfYOABv1ngSofuAhtlugcUC3ehS1OHdgDWSG6C5mvj+Qm15udTQ==",
+      "license": "CC0-1.0"
     },
     "node_modules/xtend": {
       "version": "4.0.2",
@@ -13402,6 +13440,12 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zstddec": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/zstddec/-/zstddec-0.1.0.tgz",
+      "integrity": "sha512-w2NTI8+3l3eeltKAdK8QpiLo/flRAr2p8AGeakfMZOXBxOg9HIu4LVDxBi81sYgVhFhdJjv1OrB5ssI8uFPoLg==",
+      "license": "MIT AND BSD-3-Clause"
     }
   }
 }
diff --git a/package.json b/package.json
index 4cb9afb9..6c163c6a 100644
--- a/package.json
+++ b/package.json
@@ -52,8 +52,8 @@
     "lodash.throttle": "^4.1.1",
     "maplibre-gl": "^5.0.1",
     "maputnik-design": "github:maputnik/design#172b06c",
-    "ol": "^6.14.1",
-    "ol-mapbox-style": "^7.1.1",
+    "ol": "^10.3.1",
+    "ol-mapbox-style": "^12.4.0",
     "prop-types": "^15.8.1",
     "react": "^18.2.0",
     "react-accessible-accordion": "^5.0.0",
diff --git a/src/components/MapOpenLayers.tsx b/src/components/MapOpenLayers.tsx
index ce2da021..ddf723df 100644
--- a/src/components/MapOpenLayers.tsx
+++ b/src/components/MapOpenLayers.tsx
@@ -85,10 +85,11 @@ class MapOpenLayersInternal extends React.Component<MapOpenLayersInternalProps,
   componentDidMount() {
     this.overlay = new Overlay({
       element: this.popupContainer!,
-      autoPan: true,
-      autoPanAnimation: {
-        duration: 250
-      }
+      autoPan: {
+        animation: {
+          duration: 250
+        }
+      },
     });
 
     const map = new Map({