Show zoom level in map corner on the layers documentation (#96)

* On basemaps layers docs, show the current zoom level.

* use language-script pairs from library.

* update favicon.

* update opengraph

Author: bdon

.vitepress/config.mts

@@ -3,7 +3,10 @@ import { defineConfig } from "vitepress";
 // https://vitepress.dev/reference/site-config
 export default defineConfig({
   title: "Protomaps Docs",
-  head: [["link", { rel: "icon", type: "image/png", href: "/favicon.png" }]],
+  head: [
+    ["link", { rel: "icon", type: "image/png", href: "/favicon.png" }],
+    ["meta", { property: "og:image", content: "https://protomaps.com/docs_opengraph.jpg" }]
+  ],
   description: "Technical Documentation for Protomaps",
   cleanUrls: true,
   markdown: {

basemaps/layers.md

@@ -47,7 +47,7 @@ The current version is **Version 4**.
 
 ## boundaries
 
-<MaplibreMap highlightLayer="boundaries" :zoom=5 :lat="52" :lng="4"/>
+<MaplibreMap highlightLayer="boundaries" :zoom=5 :showZoom="true" :lat="52" :lng="4"/>
 
 | Key           | Values                                    | Description                       |
 | ------------- | ----------------------------------------- | --------------------------------- |
@@ -58,7 +58,7 @@ The current version is **Version 4**.
 
 ## buildings
 
-<MaplibreMap highlightLayer="buildings" :zoom=14 :lat="51.5" :lng="-0.2"/>
+<MaplibreMap highlightLayer="buildings" :zoom=14 :showZoom="true" :lat="51.5" :lng="-0.2"/>
 
 Buildings from OpenStreetMap. z0-14 contains merged buildings, even disconnected ones. z15+ contains individual OSM equivalent buildings.
 
@@ -71,7 +71,7 @@ Buildings from OpenStreetMap. z0-14 contains merged buildings, even disconnected
 
 ## earth
 
-<MaplibreMap highlightLayer="earth" :zoom=3 :lat="-4.5" :lng="127"/>
+<MaplibreMap highlightLayer="earth" :zoom=3 :showZoom="true" :lat="-4.5" :lng="127"/>
 
 Polygons from the Natural Earth 50m `land` theme for z0-z4, 10m for z5, preprocessed land polygons from [OSMCoastline](https://osmdata.openstreetmap.de) for z6+.
 
@@ -81,7 +81,7 @@ Polygons from the Natural Earth 50m `land` theme for z0-z4, 10m for z5, preproce
 
 ## landcover
 
-<MaplibreMap highlightLayer="landcover" :zoom=2 :lat="38" :lng="-100"/>
+<MaplibreMap highlightLayer="landcover" :zoom=2 :showZoom="true" :lat="38" :lng="-100"/>
 
 Polygons from the Daylight distribution's [landcover](https://daylightmap.org/2023/10/11/landcover.html) theme, for z0-z7.
 
@@ -93,7 +93,7 @@ _NOTE: It's recommended to pair with **natural** layer polygons in from OpenStre
 
 ## landuse
 
-<MaplibreMap highlightLayer="landuse" :zoom=13 :lat="-1.28" :lng="36.8"/>
+<MaplibreMap highlightLayer="landuse" :zoom=13 :showZoom="true" :lat="-1.28" :lng="36.8"/>
 
 Polygons from OpenStreetMap, from a curated subset of `aeroway`, `amenity`, `area:aeroway`, `boundary`, `highway`, `landuse`, `leisure`, `man_made`, `natural`, `place`, `railway`, `tourism` tags, for all zooms.
 
@@ -166,7 +166,7 @@ Polygons from OpenStreetMap, from a curated subset of `aeroway`, `amenity`, `are
 
 Points from OpenStreetMap and Natural Earth, from a curated subset of place tags, for all zooms.
 
-<MaplibreMap highlightLayer="places" :zoom=2 :lat="-24.6" :lng="134"/>
+<MaplibreMap highlightLayer="places" :zoom=2 :showZoom="true" :lat="-24.6" :lng="134"/>
 
 | Key               |                                                                                         Values                                                                                         | Description |
 | ----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------: |
@@ -181,7 +181,7 @@ Points from OpenStreetMap and Natural Earth, from a curated subset of place tags
 
 Points from OpenStreetMap, from a curated subset of aeroway, amenity, attraction, boundary, craft, highway, historic, landuse, leisure, natural, railway, shop, tourism tags, for all zooms.
 
-<MaplibreMap highlightLayer="pois"  :zoom=16 :lat="52.525" :lng="13.41"/>
+<MaplibreMap highlightLayer="pois"  :zoom=16 :showZoom="true" :lat="52.525" :lng="13.41"/>
 
 | Key        |  Values   | Description |
 | ---------- | :-------: | ----------: |
@@ -345,7 +345,7 @@ _NOTE: The list of kind values is not comprehensive as some raw OSM tag values a
 Linear transportation features designed for movement, including highways, streets,
 railways and piers from OpenStreetMap. This layer represents built infrastructure including railways. Refer to the [transit](#transit) layer for passenger services.
 
-<MaplibreMap highlightLayer="roads" :zoom=13 :lat="35.68" :lng="139.76"/>
+<MaplibreMap highlightLayer="roads" :zoom=13 :showZoom="true" :lat="35.68" :lng="139.76"/>
 
 | Key                  |                                                                                                                                                                                                                                                                                       Values                                                                                                                                                                                                                                                                                       | Description |
 | -------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------: |
@@ -391,7 +391,7 @@ This layer is currently empty.
 
 ## water
 
-<MaplibreMap highlightLayer="water" :zoom=6 :lat="-1.3" :lng="-49"/>
+<MaplibreMap highlightLayer="water" :zoom=6 :showZoom="true" :lat="-1.3" :lng="-49"/>
 
 Polygons from the Natural Earth 50m `lakes` and `ocean` themes for z0-z4, 10m for z5, preprocessed land polygons from [OSMCoastline](https://osmdata.openstreetmap.de) for z6+.
 

components/MaplibreMap.vue

@@ -2,6 +2,7 @@
 import maplibregl from "maplibre-gl";
 import { ref, onMounted, onUpdated, watch } from "vue";
 import { default as layers } from "protomaps-themes-base";
+import { language_script_pairs } from "protomaps-themes-base";
 import { useData } from "vitepress";
 
 const { isDark } = useData();
@@ -10,6 +11,7 @@ const mapRef = ref(null);
 var map;
 
 const lang = ref("en");
+const currentZoom = ref(0);
 
 const tableFromProps = (props: unknown) => {
   let tableHTML = "<table>";
@@ -103,6 +105,7 @@ const props = defineProps<{
   lat?: number;
   lng?: number;
   langSelect?: boolean;
+  showZoom?: boolean;
 }>();
 
 onMounted(() => {
@@ -112,6 +115,7 @@ onMounted(() => {
       false,
     );
   }
+  currentZoom.value = props.zoom;
   map = new maplibregl.Map({
     container: mapRef.value,
     style: style(props.theme, props.highlightLayer),
@@ -146,178 +150,17 @@ onMounted(() => {
       popup.remove();
     },
   );
+
+  map.on("zoom", () => {
+    currentZoom.value = map.getZoom().toFixed(2);
+  });
 });
 
 watch([isDark, lang], () => {
   map.setStyle(style(props.theme, props.highlightLayer, lang.value));
 });
 
-const language_script_pairs = [
-  {
-    lang: "ar",
-    full_name: "Arabic",
-  },
-  {
-    lang: "cs",
-    full_name: "Czech",
-  },
-  {
-    lang: "bg",
-    full_name: "Bulgarian",
-  },
-  {
-    lang: "da",
-    full_name: "Danish",
-  },
-  {
-    lang: "de",
-    full_name: "German",
-  },
-  {
-    lang: "el",
-    full_name: "Greek",
-  },
-  {
-    lang: "en",
-    full_name: "English",
-  },
-  {
-    lang: "es",
-    full_name: "Spanish",
-  },
-  {
-    lang: "et",
-    full_name: "Estonian",
-  },
-  {
-    lang: "fa",
-    full_name: "Persian",
-  },
-  {
-    lang: "fi",
-    full_name: "Finnish",
-  },
-  {
-    lang: "fr",
-    full_name: "French",
-  },
-  {
-    lang: "ga",
-    full_name: "Irish",
-  },
-  {
-    lang: "he",
-    full_name: "Hebrew",
-  },
-  {
-    lang: "hi",
-    full_name: "Hindi",
-  },
-  {
-    lang: "hr",
-    full_name: "Croatian",
-  },
-  {
-    lang: "hu",
-    full_name: "Hungarian",
-  },
-  {
-    lang: "id",
-    full_name: "Indonesian",
-  },
-  {
-    lang: "it",
-    full_name: "Italian",
-  },
-  {
-    lang: "ja",
-    full_name: "Japanese",
-  },
-  {
-    lang: "ko",
-    full_name: "Korean",
-  },
-  {
-    lang: "lt",
-    full_name: "Lithuanian",
-  },
-  {
-    lang: "lv",
-    full_name: "Latvian",
-  },
-  {
-    lang: "ne",
-    full_name: "Nepali",
-  },
-  {
-    lang: "nl",
-    full_name: "Dutch",
-  },
-  {
-    lang: "no",
-    full_name: "Norwegian",
-  },
-  {
-    lang: "mr",
-    full_name: "Marathi",
-  },
-  {
-    lang: "mt",
-    full_name: "Maltese",
-  },
-  {
-    lang: "pl",
-    full_name: "Polish",
-  },
-  {
-    lang: "pt",
-    full_name: "Portuguese",
-  },
-  {
-    lang: "ro",
-    full_name: "Romanian",
-  },
-  {
-    lang: "ru",
-    full_name: "Russian",
-  },
-  {
-    lang: "sk",
-    full_name: "Slovak",
-  },
-  {
-    lang: "sl",
-    full_name: "Slovenian",
-  },
-  {
-    lang: "sv",
-    full_name: "Swedish",
-  },
-  {
-    lang: "tr",
-    full_name: "Turkish",
-  },
-  {
-    lang: "uk",
-    full_name: "Ukrainian",
-  },
-  {
-    lang: "ur",
-    full_name: "Urdu",
-  },
-  {
-    lang: "vi",
-    full_name: "Vietnamese",
-  },
-  {
-    lang: "zh-Hans",
-    full_name: "Chinese (Simplified)",
-  },
-  {
-    lang: "zh-Hant",
-    full_name: "Chinese (Traditional)",
-  },
-].sort((a, b) => a.full_name.localeCompare(b.full_name));
+language_script_pairs.sort((a, b) => a.full_name.localeCompare(b.full_name));
 </script>
 
 <template>
@@ -330,19 +173,34 @@ const language_script_pairs = [
       {{ option.full_name }}
     </option>
   </select>
-  <div ref="mapRef" class="maplibre-map"></div>
+  <div class="map-container">
+    <div ref="mapRef" class="maplibre-map"></div>
+    <div v-if="props.showZoom" class="zoom-display">z={{ currentZoom }}</div>
+  </div>
 </template>
 
 <style>
 @import "maplibre-gl/dist/maplibre-gl.css";
 </style>
 
 <style>
+.map-container {
+  position: relative;
+}
+
 .maplibre-map {
   height: 300px;
   width: 100%;
 }
 
+.zoom-display {
+  position: absolute;
+  bottom: 0;
+  font-size: 12px;
+  padding-left: 0.3rem;
+  padding-right: 0.3rem;
+}
+
 .docs-popup .maplibregl-popup-content {
   padding: 4px;
 }
@@ -356,10 +214,17 @@ const language_script_pairs = [
   border-bottom-color: rgb(22, 22, 24);
 }
 
-.dark .maplibregl-ctrl-attrib {
+.dark .maplibregl-ctrl-attrib,
+.dark .zoom-display {
   background-color: hsla(0, 0%, 0%, 0.5);
 }
 .dark .maplibregl-ctrl-attrib a {
   color: rgba(235, 235, 245, 0.6);
 }
+
+select {
+  background: var(--vp-sidebar-bg-color);
+  padding-left: 0.5rem;
+  margin-bottom: 0.5rem;
+}
 </style>