geocodeearth · bdon · May 24, 2025 · May 24, 2025
diff --git a/index.html → leaflet.html b/index.html → leaflet.html
diff --git a/maplibre.html b/maplibre.html
@@ -0,0 +1,79 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <title>Geocode Earth MapLibre autocomplete demo</title>
+    <meta charset='utf-8'>
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/maplibre-gl.css" integrity="sha384-Nq6PQ+9vJPvw7U/VfDELyrWoGQMsy0gi6QShhaSrGzkpF5KkM40csg2leky+YMTd" crossorigin="anonymous">
+    <script src="https://unpkg.com/[email protected]/dist/maplibre-gl.js" integrity="sha384-fbK/nfUWrNCXVhbZNnr4HloMRmGGz4rnCxIWwFmPlwt88j8H+O4ii0aPXkWkwYFe" crossorigin="anonymous"></script>
+    <script src="https://unpkg.com/@maplibre/[email protected]/dist/maplibre-gl-geocoder.js" integrity="sha384-aFcsTOJ9ukC2LxNVpdsFXZ5k3ql1SkzlwDt8KPFmLZPXMc8VE1a08XVOxcJDu0vR" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://unpkg.com/@maplibre/[email protected]/dist/maplibre-gl-geocoder.css" integrity="sha384-UkDpPApjTpHJHpcJiSNAmbobh30W0/dmt0DoKm4V8CWYRYvQ/Jhd/ijFz0tFdVnH" crossorigin="anonymous">
+    <style>
+        html, body, #map {
+            width: 100%; height: 100%; 
+            margin: 0; padding: 0; border: 0;
+        }
+    </style>
+</head>
+<body>
+    <div id="map"></div>
+
+    <script>
+        //obviously API keys must be kept very secure :)
+        function rot13(s) {
+          return (s ? s : this).split('').map(function(_)
+            {
+              if (!_.match(/[A-Za-z]/)) return _;
+              c = Math.floor(_.charCodeAt(0) / 97);
+              k = (_.toLowerCase().charCodeAt(0) - 83) % 26 || 26;
+              return String.fromCharCode(k + ((c == 0) ? 64 : 96));
+            }).join('');
+        };
+
+        // init maplibre map
+        const map = new maplibregl.Map({
+            container: 'map',
+            style: 'https://api.protomaps.com/styles/v5/light/en.json?key=795dd4ec374ec84d',
+            center: [0, 0],
+            zoom: 1
+        });
+
+        const NUM_RESULTS = 5;
+
+        const peliasResults = async (config, endpoint) => {
+            const { lat, lng } = map.getCenter();
+            const url = "https://api.geocode.earth/v1/" + endpoint +
+                        "?api_key=" + rot13('tr-5sp05q10542r8o04') +
+                        "&text=" + encodeURIComponent(config.query) +
+                        "&focus.point.lat=" + lat +
+                        "&focus.point.lon=" + lng +
+                        "&size=" + NUM_RESULTS;
+            const result = await fetch(url);
+            json = await result.json();
+            json.features.forEach(f => {
+                const props = f.properties;
+                f.place_name = props.label;
+            });
+            return json;
+        };
+
+        // set geocoder options
+        const geocoder = new MaplibreGeocoder(
+            {
+                getSuggestions: config => peliasResults(config, "autocomplete"),
+                forwardGeocode: config => peliasResults(config, "search")
+            },
+            {
+                maplibregl,
+                showResultsWhileTyping: true,
+                placeholder: "Search a city or address",
+                limit: NUM_RESULTS,
+                proximityMinZoom: 9 // only prioritize the viewport when zoomed in to z9
+            }
+        );
+
+        map.addControl(geocoder);
+
+    </script>
+</body>
+</html>