From 22185a218504af6fce81e46587dab2519719cc28 Mon Sep 17 00:00:00 2001
From: Harry Bond <endim8@pm.me>
Date: Fri, 17 Mar 2023 21:40:49 +0000
Subject: [PATCH] use OM-like maptiler vector tiles

Signed-off-by: Harry Bond <endim8@pm.me>
---
 public/ge0.html | 31 ++++++++++++++++++-------------
 1 file changed, 18 insertions(+), 13 deletions(-)

diff --git a/public/ge0.html b/public/ge0.html
index 9ccfcf8..33214aa 100644
--- a/public/ge0.html
+++ b/public/ge0.html
@@ -9,18 +9,21 @@
 
   <meta name="apple-itunes-app" content="app-id=1567437057, app-argument=om:/${path}">
 
-  <meta name="description" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
-  <meta itemprop="name" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
-  <meta itemprop="description" content="Android & iOS offline maps app for travelers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
+  <meta name="description" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
+  <meta itemprop="name" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
+  <meta itemprop="description" content="Android & iOS offline maps app for travellers, tourists, hikers, and cyclists based on top of crowd-sourced OpenStreetMap data and curated with love by MAPS.ME founders.">
 
   <link rel="apple-touch-icon" sizes="180x180" href="/icons/apple-touch-icon.png">
   <link rel="icon" type="image/png" sizes="32x32" href="/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="/icons/favicon-16x16.png">
   <link rel="mask-icon" href="/icons/safari-pinned-tab.svg" color="#449f33">
 
-  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" integrity="sha512-xodZBNTC5n17Xt2atTPuE1HxjVMSvLVW9ocqUKLsCC5CXdbqCmblAshOMAS6/keqq/sMZMZ19scR4PsZChSR7A==" crossorigin="" />
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.js"></script>
+  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.8.0/leaflet.css" />
+  <link href="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.css" rel='stylesheet' />
+  <script src="https://unpkg.com/maplibre-gl@2.4.0/dist/maplibre-gl.js"></script>
+  <script src="https://unpkg.com/@maplibre/maplibre-gl-leaflet@0.0.17/leaflet-maplibre-gl.js"></script>
   <style>
-
     html,
     body {
       margin: 0;
@@ -67,7 +70,7 @@
       background-color: #FFF;
       text-align: center;
       padding: 10px;
-      box-shadow: 0 3px 10px 0 #00000030;
+      box-shadow: 0 0px 5px 0 #00000030;
       display: flex;
       flex-flow: row wrap;
       align-items: center;
@@ -131,7 +134,6 @@
       to { opacity: 0; }
     }
   </style>
-  <script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js" integrity="sha512-XQoYMqMTK8LvdxXYG3nZ448hOEQiglfqkJs1NOQV44cWnUrBc8PkAOcXy20w0vlaXaVUearIOBhiXZ5V3ynxwA==" crossorigin=""></script>
   <title>${title}</title>
 </head>
 
@@ -160,7 +162,9 @@
       </div>
     </div>
   </div>
-  <div id="map" class="map"></div>
+  <div id="map" class="map">
+    <a href="https://www.maptiler.com" style="position:absolute;left:10px;bottom:10px;z-index:999;"><img src="https://api.maptiler.com/resources/logo.svg" alt="MapTiler logo"></a>
+  </div>
   <div id="notif" class="notif">Coordinates copied to clipboard.</div>
   <script type="text/javascript">
     var isiOS = navigator.platform.substr(0, 2) === 'iP' ||  // iPhone, iPad, iPod, including simulators.
@@ -206,19 +210,20 @@
     var lon = ${ lon };
     var zoom = ${ zoom };
     var map = L.map('map').setView([lat, lon], zoom);
+
     var POI_Icon = L.icon({
       iconUrl: '/placemarks/poi-icon.svg',
       iconSize: [25, 36.5],
       iconAnchor: [12.5, 36.5],
       popupAnchor:  [0, -36.5]
     });
-
-    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', { /*https://{s}.tile.openstreetmap.fr/hot/{z}/{x}/{y}.png*/
-      attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
-      maxZoom: 19,
+    
+   const gl = L.maplibreGL({
+      attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e",
+      style: `https://api.maptiler.com/maps/65258bd7-685d-4272-a6eb-0a4a62066f3c/style.json?key=88F9udSJXKhAAhJqrJ8d`
     }).addTo(map);
+    
     map.zoomControl.setPosition('bottomright');
-
     var marker = L.marker([lat, lon], {icon: POI_Icon}).addTo(map);
     marker.bindPopup('${name}');//.openPopup();
   </script>
-- 
2.45.3