Update roadmap Globe View and MLT (#389)

* Update roadmap Globe View & MLT

* fix syntax?

Author: louwers

src/content.config.ts

@@ -37,6 +37,7 @@ const roadmapItems = defineCollection({
     z.object({
       title: z.string(),
       heroImage: image(),
+      heroImageFit: z.optional(z.enum(["fill", "contain", "cover"])),
       status: z.enum(["under-consideration", "in-progress", "released"]),
       bountyLink: z.optional(z.string()),
       bountyActive: z.optional(z.boolean()),

src/content/roadmap/globe-view/index.mdx

@@ -1,7 +1,7 @@
 ---
 title: Globe View
 heroImage: "./image.png"
-status: in-progress
+status: released
 bountyActive: true
 bountyLink: https://github.com/maplibre/maplibre/issues/190
 ---
@@ -12,3 +12,7 @@ Goals:
 - Ability to show and interact with Globe (or alternative view on earth) when map is zoomed out - while reusing and loading the same Mercator vector tile and raster data - client side reprojection of the data - using Adaptive Composite Map Projection - where deeply zoomed you are in Mercator - but from certain zoom level up there is transition to another projection.
 
 Discussion Thread: https://github.com/maplibre/maplibre/discussions/161
+
+Globe View is not yet available for MapLibre Native, see this issue: https://github.com/maplibre/maplibre-native/issues/3161
+
+Globe View or Globe Projection was released as part of [MapLibre GL JS 5.0.0](https://github.com/maplibre/maplibre-gl-js/releases/tag/v5.0.0) in January 2025.

src/content/roadmap/maplibre-tiles/image.png

@@ -0,0 +1,10 @@
+---
+title: MapLibre Tiles
+heroImage: "./image.png"
+heroImageFit: contain
+status: in-progress
+---
+
+Development of the [MapLibre Tile Spec (MLT)](https://github.com/maplibre/maplibre-tile-spec) is mostly finalized. MLT is a next-generation tile format and a successor to MVT.
+
+As of January 2025, implementation has started for MapLibre GL JS and MapLibre Native.

src/content/roadmap/maplibre-tiles/index.mdx

@@ -62,7 +62,7 @@ function formatDate(dateString) {
                       class="card-img-top"
                       src={item.data.heroImage}
                       alt={item.data.title}
-                      style="width: 100%; height: 250px; object-fit: cover;"
+                      style={`width: 100%; height: 250px; object-fit: ${item.data.heroImageFit || "cover"};`}
                     />
                     <div class="card-body">
                       <h5 class="card-title">{item.data.title}</h5>