Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

accessibility improvements #93

Merged
merged 3 commits into from
Jan 6, 2025
Merged

accessibility improvements #93

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
f4a2cfb
Improve accessibility
bdon Jan 5, 2025
6ad8fc3
update downloads docs on retained builds policy.
bdon Jan 6, 2025
147f567
Update syntax highlighting to high contrast themes.
bdon Jan 6, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 7 additions & 1 deletion .vitepress/config.mts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,12 @@ export default defineConfig({
head: [["link", { rel: "icon", type: "image/png", href: "/favicon.png" }]],
description: "Technical Documentation for Protomaps",
cleanUrls: true,
markdown: {
theme: {
light: 'github-light-high-contrast',
dark: 'github-dark-high-contrast'
}
},
themeConfig: {
logo: "/logo.svg",
// https://vitepress.dev/reference/default-theme-config
Expand Down Expand Up @@ -76,7 +82,7 @@ export default defineConfig({
socialLinks: [
{ icon: "github", link: "https://github.com/protomaps" },
{ icon: "mastodon", link: "https://mapstodon.space/@protomaps" },
{ icon: "twitter", link: "https://twitter.com/protomaps" },
{ icon: "bluesky", link: "https://bsky.app/profile/protomaps.com" },
],

search: {
Expand Down
8 changes: 8 additions & 0 deletions basemaps/downloads.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,14 @@ The Version 4 Protomaps basemap daily build channel is available at [maps.protom

A mirror in the AWS `us-west-2` is available on [Source Cooperative (beta)](https://beta.source.coop) at the [protomaps/openstreetmap](https://beta.source.coop/repositories/protomaps/openstreetmap/) repository. This mirrors the most recent daily build only.

### Build History

The daily builds bucket retains:

* All builds for the past week.
* Weekly monday builds for the past month.
* The latest build for each version (major + minor + patch) beyond that.

## Partial Downloads

To download a cutout of a specific region, rather than the entire world map, see the CLI's [extract command](/pmtiles/cli#extract).
Expand Down
97 changes: 51 additions & 46 deletions components/CostCalculator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,13 +79,14 @@ const cfShow = ref(false);

<template>
<div>
<h3>Inputs</h3>
<div class="well">
<div class="big">
<input v-model="formattedRequests" />monthly tile requests
<div>
<div class="text-xl">
<input id="requests" class="text-xl" v-model="formattedRequests" />
<label for="requests"> monthly tile requests</label>
</div>
<div>
<input
aria-label="set the number of requests"
type="range"
id="range"
min="0"
Expand All @@ -98,47 +99,51 @@ const cfShow = ref(false);
<strong>{{ mapViews.toLocaleString() }}</strong> monthly map viewer
sessions
</div>
<div>
(one viewing session loads <input v-model.number="tilesPerView" />tiles)
<div class="text-sm">
<input id="tilesPerView" v-model.number="tilesPerView" />
<label for="tilesPerView"> Tile loads per viewing session</label>
</div>
<div>
<div class="mt-4">
<strong>{{ outgoingGB.toLocaleString() }} GB</strong> outgoing bandwidth
to Internet
</div>
<div>
(average tile size
<input v-model.number="averageTileSizeKB" />kilobytes)
<div class="text-sm">
<input id="averageTileSizeKB" v-model.number="averageTileSizeKB" />
<label for="averageTileSizeKB"> Average tile size in kilobytes</label>
</div>
<div class="text-sm">
<input v-model.number="cacheHitRate" /> CDN cache hit rate
</div>
<div class="text-sm">
<input v-model.number="storedGB" /> Gigabytes stored
</div>
<div><input v-model.number="cacheHitRate" /> CDN cache hit rate</div>
<div><input v-model.number="storedGB" /> gigabytes on cloud storage</div>
</div>
</div>
<div>
<h3>Google Maps</h3>
<span class="cost">{{ googleCost.toFixed(2) }} USD per month</span>
<div>
(Reference:
<span class="text-lg">{{ googleCost.toFixed(2) }} USD per month</span>
<div class="text-sm">
<a
href="https://developers.google.com/maps/documentation/javascript/usage-and-billing"
>SKU: Dynamic Maps</a
>)
>
</div>
</div>
<div class="highlight">
<h3>Hosted Map API</h3>
<span class="cost">{{ hostedCost.toFixed(2) }} USD per month</span>
<div>
(<input v-model.number="hostedPerKViews" /> USD per 1,000 sessions)
<span class="text-lg">{{ hostedCost.toFixed(2) }} USD per month</span>
<div class="text-sm">
<input v-model.number="hostedPerKViews" /> USD per 1,000 sessions
</div>
</div>
<div class="highlight">
<h3>Protomaps on AWS</h3>
<span class="cost"
<span class="text-lg"
><strong>{{ aws.total.toFixed(2) }} USD</strong> per month</span
>
<div class="showBreakdown" v-on:click="awsShow = !awsShow">
<button class="showBreakdown" v-on:click="awsShow = !awsShow">
{{ awsShow ? "Hide" : "Show" }} cost breakdown
</div>
</button>
<table v-show="awsShow">
<thead>
<tr>
Expand Down Expand Up @@ -246,12 +251,12 @@ const cfShow = ref(false);
</div>
<div>
<h3>Protomaps on Cloudflare</h3>
<span class="cost"
<span class="text-lg"
><strong>{{ cf.total.toFixed(2) }} USD</strong> per month</span
>
<div class="showBreakdown" v-on:click="cfShow = !cfShow">
<button class="showBreakdown" v-on:click="cfShow = !cfShow">
{{ cfShow ? "Hide" : "Show" }} cost breakdown
</div>
</button>
<table v-show="cfShow">
<thead>
<tr>
Expand Down Expand Up @@ -331,42 +336,42 @@ const cfShow = ref(false);
<style scoped>
input {
border: 1px solid #ccc;
width: 3rem;
margin-right: 0.5rem;
width: 2rem;
border-radius: 3px;
padding-left: 0.2rem;
}

#range {
width: 100%;
.mt-4 {
margin-top: 2rem;
}

#notes {
color: #777;
.text-sm {
font-size: 0.8rem;
}

.showBreakdown {
cursor: pointer;
font-weight: 500;
color: var(--vp-c-brand-1);
text-decoration: underline;
.text-lg {
font-size: 1.2rem;
}

.big,
.big input {
.text-xl {
font-size: 2rem;
}

.big input {
width: 15rem;
.showBreakdown {
display: block;
cursor: pointer;
font-weight: 500;
color: var(--vp-c-brand-1);
text-decoration: underline;
}

.well {
padding: 1rem;
background: var(--vp-sidebar-bg-color);
border-radius: 8px;
#range {
margin-top: 1rem;
margin-bottom: 1rem;
width: 100%;
}

.cost {
font-size: 1.2rem;
#requests {
width: 15rem;
}
</style>
Loading