Skip to content

Commit

Permalink
Show zoom level in map corner on the layers documentation (#96)
Browse files Browse the repository at this point in the history 
* On basemaps layers docs, show the current zoom level.

* use language-script pairs from library.

* update favicon.

* update opengraph
  • Loading branch information
@bdon
bdon authored Jan 22, 2025
1 parent 288e18a commit 5c07d09
Show file tree
Hide file tree
Showing 4 changed files with 46 additions and 178 deletions.
5 changes: 4 additions & 1 deletion .vitepress/config.mts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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: {
Expand Down
18 changes: 9 additions & 9 deletions basemaps/layers.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |
| ------------- | ----------------------------------------- | --------------------------------- |
Expand All @@ -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.

Expand All @@ -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+.

Expand All @@ -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.

Expand All @@ -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.

Expand Down Expand Up @@ -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 |
| ----------------- | :------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------: |
Expand All @@ -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 |
| ---------- | :-------: | ----------: |
Expand Down Expand Up @@ -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 |
| -------------------- | :--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------: | ----------: |
Expand Down Expand Up @@ -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+.

Expand Down
201 changes: 33 additions & 168 deletions components/MaplibreMap.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand All @@ -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>";
Expand Down Expand Up @@ -103,6 +105,7 @@ const props = defineProps<{
lat?: number;
lng?: number;
langSelect?: boolean;
showZoom?: boolean;
}>();
onMounted(() => {
Expand All @@ -112,6 +115,7 @@ onMounted(() => {
false,
);
}
currentZoom.value = props.zoom;
map = new maplibregl.Map({
container: mapRef.value,
style: style(props.theme, props.highlightLayer),
Expand Down Expand Up @@ -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>
Expand All @@ -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;
}
Expand All @@ -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>
Binary file modified public/favicon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 5c07d09

Please sign in to comment.