feat(maplibre): try ProtoMaps for cleaner basemaps

ccns · Jul 24, 2024 · a3e0739 · a3e0739
1 parent 577c392
commit a3e0739
Showing 1 changed file with 13 additions and 31 deletions.
diff --git a/resources/maplibre.html b/resources/maplibre.html
@@ -1,7 +1,7 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <title>OSM Raster Tile</title>
+    <title>MapLibre Frame</title>
     <meta property="og:description" content="Add a third-party raster source to the map." />
     <meta charset='utf-8'>
     <meta name="viewport" content="width=device-width, initial-scale=1">
@@ -15,36 +15,18 @@
 <body>
 <div id="map"></div>
 <script>
-    const map = new maplibregl.Map({
-        container: 'map', // container id
-        style: {
-            'version': 8,
-            'sources': {
-                'raster-tiles': {
-                    'type': 'raster',
-                    'tiles': [
-                        'https://tile.openstreetmap.org/{z}/{x}/{y}.png'
-                    ],
-                    'tileSize': 256,
-                    'attribution':
-			'Data &copy; <a href="https://www.openstreetmap.org" target="_blank">OpenStreetMap</a> <a href="https://www.openstreetmap.org/about" target="_blank">contributors</a>'
-                }
-            },
-            'layers': [
-                {
-                    'id': 'simple-tiles',
-                    'type': 'raster',
-                    'source': 'raster-tiles',
-                    'minzoom': 0,
-                    'maxzoom': 22
-                }
-            ]
-        },
-        cooperativeGestures: true,
-        center: [120.21969795227051, 22.994353003362463], // starting position
-        //pitch: 40, // pitch in degrees
-        //bearing: 4.5, // bearing in degrees
-        zoom: 16 // starting zoom
+    var map = new maplibregl.Map({
+      container: 'map',
+      style: 'https://api.protomaps.com/styles/v2/light.json?key=38cbf126d8149997', // Style URL; see ProtoMaps documentation for more options
+      center: [120.21969795227051, 22.994353003362463], // starting position
+      cooperativeGestures: true,
+      // disable map rotation using right click + drag
+      map.dragRotate.disable();
+      // disable map rotation using keyboard
+      map.keyboard.disable();
+      // disable map rotation using touch rotation gesture
+      map.touchZoomRotate.disableRotation();
+      zoom: 16
     });
     const marker = new maplibregl.Marker()
         .setLngLat([120.21969795227051, 22.994353003362463])