Protomap basemap for apps by drewda · Pull Request #280 · interline-io/tlv2-ui

drewda · 2026-01-07T23:02:36Z

No description provided.

Copilot

Pull request overview

This pull request replaces the old protomaps-themes-base package (v1.3.1) with the newer @protomaps/basemaps package (v5.7.0), introducing support for vector-based Protomaps basemaps with multiple theme variants (light, dark, white, grayscale, black) across the application. The default basemap is changed from Carto to Protomaps grayscale throughout the codebase.

Key changes:

Replaces protomaps-themes-base dependency with @protomaps/basemaps v5.7.0
Adds five new Protomaps basemap variants with vector tile support
Updates all map components to default to protomaps-grayscale instead of carto
Implements special handling for vector basemaps (Protomaps) vs raster basemaps (Carto, Nearmap)

Reviewed changes

Copilot reviewed 13 out of 14 changed files in this pull request and generated 6 comments.

Show a summary per file

File	Description
yarn.lock	Removes old protomaps-themes-base@1.3.1 and adds @protomaps/basemaps@5.7.0
package.json	Updates dependencies and exports new basemap utilities via "./lib/basemaps"
src/runtime/composables/useBasemapLayers.ts	Adds five Protomaps basemap configurations, exports Protomaps utilities, and defines constants for glyphs/sprite URLs
src/runtime/components/pathway-map.vue	Changes default basemap from 'carto' to 'protomaps-grayscale'
src/runtime/apps/transfers/station-select-map.vue	Switches to Protomaps grayscale basemap with proper vector layer initialization
src/runtime/apps/transfers/station-bbox-select-map.vue	Switches to Protomaps grayscale basemap with proper vector layer initialization
src/runtime/apps/transfers/platform-pathway-map.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/station-editor.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/pathway-map.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/pages/station-stops.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/pages/station-pathways.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/level-map.vue	Adds comprehensive vector basemap support with visibility toggling and switches default to Protomaps
src/runtime/apps/stations/level-editor.vue	Changes default basemap to 'protomaps-grayscale'
src/runtime/apps/stations/basemap-control.vue	Changes default basemap prop to 'protomaps-grayscale'

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2026-01-08T06:43:42Z

src/runtime/composables/useBasemapLayers.ts

 */
 export function useBasemapLayers () {
  const config = useRuntimeConfig()
+  const protomapsApikey = config.public.tlv2?.protomapsApikey


The protomapsApikey is being interpolated directly into tile URLs without validation. If the API key is undefined or null, this will result in malformed URLs like "...?key=undefined" for all Protomaps basemap variants. Consider adding validation or a fallback to handle missing API key configuration gracefully, or at minimum document that the API key is required.

Copilot · 2026-01-08T06:43:43Z

src/runtime/composables/useBasemapLayers.ts

+export const PROTOMAPS_GLYPHS_URL = 'https://protomaps.github.io/basemaps-assets/fonts/{fontstack}/{range}.pbf'
+
+/**
+ * Protomaps sprite URL base for MapLibre styles (append flavor name, e.g. /light)


The documentation comment states to "append flavor name, e.g. /light" but this is misleading. The actual URL should append the specific theme identifier (e.g., "/light" or "/dark"). Consider clarifying the comment to specify the exact format expected, such as "append theme identifier (e.g., '/light', '/dark')" to be more precise.

Suggested change

* Protomaps sprite URL base for MapLibre styles (append flavor name, e.g. /light)

* Protomaps sprite URL base for MapLibre styles (append theme identifier, e.g. '/light', '/dark')

Copilot · 2026-01-08T06:43:43Z

src/runtime/apps/transfers/station-select-map.vue

-          type: 'raster',
-          tiles: basemaps.carto.source.tiles,
-        },
+        'protomaps-base': grayscaleBasemap.source as any,


Using 'as any' type assertion bypasses TypeScript's type safety. The source configuration should match MapLibre's expected source type. Consider properly typing the grayscaleBasemap.source or using a more specific type assertion to maintain type safety.

Copilot · 2026-01-08T06:43:43Z

src/runtime/apps/transfers/station-bbox-select-map.vue

      version: 8,
      sources: {
-        carto: basemaps.carto.source
+        'protomaps-base': grayscaleBasemap.source as any


Using 'as any' type assertion bypasses TypeScript's type safety. The source configuration should match MapLibre's expected source type. Consider properly typing the grayscaleBasemap.source or using a more specific type assertion to maintain type safety.

Copilot · 2026-01-08T06:43:44Z

src/runtime/composables/useBasemapLayers.ts

+    'protomaps-light': {
+      label: 'Protomaps (light)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        // For vector sources, we need to add multiple layers, not just one
+        // This will be handled specially in the map initialization
+        isVector: true,
+        flavor: LIGHT
+      }
+    },
+    'protomaps-dark': {
+      label: 'Protomaps (dark)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: DARK
+      }
+    },
+    'protomaps-white': {
+      label: 'Protomaps (white)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: WHITE
+      }
+    },
+    'protomaps-grayscale': {
+      label: 'Protomaps (grayscale)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: GRAYSCALE
+      }
+    },
+    'protomaps-black': {
+      label: 'Protomaps (black)',
+      source: {
+        type: 'vector',
+        tiles: [`https://api.protomaps.com/tiles/v4/{z}/{x}/{y}.pbf?key=${protomapsApikey}`],
+        maxzoom: 14,
+        attribution: '<a href="https://www.transit.land/terms">Transitland</a> | <a href="https://protomaps.com">Protomaps</a> | &copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
+      },
+      layer: {
+        isVector: true,
+        flavor: BLACK
+      }
+    },


The source configuration for all five Protomaps basemap variants contains identical code with the same tiles URL, maxzoom, and attribution. This repetition violates DRY principles and makes maintenance harder. Consider extracting the common configuration into a shared constant or helper function to reduce duplication.

Protomap basemap for apps

9e9275a

drewda mentioned this pull request Jan 7, 2026

update misc NPM dependencies #267

Closed

drewda added 7 commits January 7, 2026 16:13

update to latest @protomaps/basemaps

1d27457

export

ebd4882

use protomaps v4 tiles

8106b2d

more in composable

551d36e

sprite url

572a755

urls from https://docs.protomaps.com/basemaps/maplibre#assets

8fa3b50

cheap fix for type warning

23bc198

drewda marked this pull request as ready for review January 8, 2026 06:39

Copilot AI review requested due to automatic review settings January 8, 2026 06:39

Copilot started reviewing on behalf of drewda January 8, 2026 06:39 View session

Copilot AI reviewed Jan 8, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Protomap basemap for apps#280

Protomap basemap for apps#280
drewda wants to merge 8 commits intomainfrom
replace-carto-basemaps

drewda commented Jan 7, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Copilot AI Jan 8, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	* Protomaps sprite URL base for MapLibre styles (append flavor name, e.g. /light)
	* Protomaps sprite URL base for MapLibre styles (append theme identifier, e.g. '/light', '/dark')

Conversation

drewda commented Jan 7, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Jan 8, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants