From f366c5faae28408818ff796b42f29b810635d8e4 Mon Sep 17 00:00:00 2001
From: Petr Sloup <petr.sloup@maptiler.com>
Date: Tue, 7 May 2024 16:27:41 +0200
Subject: [PATCH] Stop using obsolete search API from EPSG.io

---
 examples/reprojection-by-code.html | 10 +++++++---
 examples/reprojection-by-code.js   | 23 ++++++++++++-----------
 2 files changed, 19 insertions(+), 14 deletions(-)

diff --git a/examples/reprojection-by-code.html b/examples/reprojection-by-code.html
index 0af34d35f83..ba165760df9 100644
--- a/examples/reprojection-by-code.html
+++ b/examples/reprojection-by-code.html
@@ -1,14 +1,18 @@
 ---
 layout: example.html
-title: Reprojection with EPSG.io Search
+title: Reprojection with coordinate system search
 shortdesc: Demonstrates client-side raster reprojection of OSM to arbitrary projection
 docs: >
   This example shows client-side raster reprojection capabilities from
   OSM (EPSG:3857) to arbitrary projection by searching
-  in <a href="https://epsg.io/">EPSG.io</a> database.
-tags: "reprojection, projection, proj4js, epsg.io, graticule"
+  in <a href="https://docs.maptiler.com/cloud/api/coordinates/">MapTiler Cloud Coordinates API</a>.
+  **Note**: Make sure to get your own API key at https://www.maptiler.com/cloud/ when using this example.
+tags: "reprojection, projection, proj4js, epsg, maptiler, graticule"
 resources:
   - https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css
+cloak:
+  - key: get_your_own_D6rA4zTHduk6KOKTXzGB
+    value: Get your own API key at https://www.maptiler.com/cloud/
 ---
 <div id="map" class="map"></div>
 <form class="row">
diff --git a/examples/reprojection-by-code.js b/examples/reprojection-by-code.js
index 5b15153405a..b49a9c90e93 100644
--- a/examples/reprojection-by-code.js
+++ b/examples/reprojection-by-code.js
@@ -70,21 +70,19 @@ function setProjection(code, name, proj4def, bbox) {
 
   resultSpan.innerHTML = '(' + code + ') ' + name;
 
-  const newProjCode = 'EPSG:' + code;
-  proj4.defs(newProjCode, proj4def);
+  proj4.defs(code, proj4def);
   register(proj4);
-  const newProj = getProjection(newProjCode);
+  const newProj = getProjection(code);
   const fromLonLat = getTransform('EPSG:4326', newProj);
 
-  let worldExtent = [bbox[1], bbox[2], bbox[3], bbox[0]];
-  newProj.setWorldExtent(worldExtent);
+  newProj.setWorldExtent(bbox);
 
   // approximate calculation of projection extent,
   // checking if the world extent crosses the dateline
-  if (bbox[1] > bbox[3]) {
-    worldExtent = [bbox[1], bbox[2], bbox[3] + 360, bbox[0]];
+  if (bbox[0] > bbox[2]) {
+    bbox[2] += 360;
   }
-  const extent = applyTransform(worldExtent, fromLonLat, undefined, 8);
+  const extent = applyTransform(bbox, fromLonLat, undefined, 8);
   newProj.setExtent(extent);
   const newView = new View({
     projection: newProj,
@@ -95,7 +93,9 @@ function setProjection(code, name, proj4def, bbox) {
 
 function search(query) {
   resultSpan.innerHTML = 'Searching ...';
-  fetch('https://epsg.io/?format=json&q=' + query)
+  fetch(
+    `https://api.maptiler.com/coordinates/search/${query}.json?exports=true&key=get_your_own_D6rA4zTHduk6KOKTXzGB`,
+  )
     .then(function (response) {
       return response.json();
     })
@@ -105,9 +105,10 @@ function search(query) {
         for (let i = 0, ii = results.length; i < ii; i++) {
           const result = results[i];
           if (result) {
-            const code = result['code'];
+            const id = result['id'];
+            const code = id['authority'] + ':' + id['code'];
             const name = result['name'];
-            const proj4def = result['wkt'];
+            const proj4def = result['exports']['wkt'];
             const bbox = result['bbox'];
             if (
               code &&