MapLibre map with MDX

Published on: Tue Jun 06 2023

Research

The research question for static maps has come up in the context of blog posts.

• If a static map is a PNG or JPEG, then many questions arise.
  • How do we maintain or update the map image file when the underlying map data changes?
  • Where do we store the map image file in the context of NPS.gov?
  • How do we simply write blog posts and showcase many different MapLibre styles?

Solution

An Astro component based on MapLibre GL JS.

1. Import MapLibre GL JS via package.json
2. Create an Astro component, which exposes the parameters to pass into the component: latitude, longitude, zoom, style, etc

MDX code

import MapLibre from "~/components/MapLibre.astro"

export const latitude = 32.870381
export const longitude = -116.98891
export const zoom = 3
export var mapstyle1 = "https://demotiles.maplibre.org/style.json"
export var mapstyle2 = "https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/park-tiles-field-mapper.json"
export var mapstyle3 = "https://zelonewolf.github.io/openstreetmap-americana/style.json"
export var mapstyle4 = "https://roblabs.com/xyz-raster-sources/styles/openstreetmap.json"
export var mapstyle5 = "https://roblabs.com/xyz-raster-sources/styles/naturalearthtiles.json"
export var mapstyle6 = "https://roblabs.com/xyz-raster-sources/styles/arcgis-world-imagery.json"
export var mapstyle7 = "https://atlas-stg.geoplatform.gov/styles/v1/atlas-user/ck58pyquo009v01p99xebegr9?access_token=pk.eyJ1IjoiYXRsYXMtdXNlciIsImEiOiJjazFmdGx2bjQwMDAwMG5wZmYwbmJwbmE2In0.lWXK2UexpXuyVitesLdwUg"
export var mapstyle = mapstyle3

MapLibre Map

This section prints to screen the exported values passed into the map

• latitude = 32.870381
• longitude = -116.98891
• zoom = 5
• mapstyle = https://roblabs.com/xyz-raster-sources/styles/naturalearthtiles.json
• mapdiv-with-exported-variables

Example - use set variables

<MapLibre
  container="mapdiv-with-exported-variables"
  latitude={latitude}
  longitude={longitude}
  zoom={zoom}
  mapstyle={mapstyle}
/>

Example - with variables in the component

Astro components look like HTML, so putting quotes around Numbers are required

<MapLibre
  container="mapdiv-with-variables-in-the-component"
  latitude="32.0"
  longitude="-116.0"
  zoom="3"
  mapstyle="https://demotiles.maplibre.org/style.json"
/>

<div> is mapdiv-with-variables-in-the-component

Example - interactive is true

<MapLibre
  container="mapdiv-with-variables-in-the-component-interactive-true"
  latitude="32.0"
  longitude="-116.0"
  zoom="3"
  mapstyle="https://demotiles.maplibre.org/style.json"
  interactive="true"
/>

<div> is mapdiv-with-variables-in-the-component-interactive-true

Example - Park Tiles Raster

<MapLibre
  container="mapdiv-park-tiles-raster-interactive-false"
  latitude="32.0"
  longitude="-116.0"
  zoom="3"
  mapstyle="https://raw.githubusercontent.com/roblabs/xyz-raster-sources/master/styles/park-tiles-field-mapper.json"
/>

<div> is container="mapdiv-park-tiles-raster-interactive-false"

🚀 Features

• ✅ Astro component for MapLibre that currently has parameters: latitude, longitude, zoom, mapstyle
  • 20 lines of Typescript in .Astro file
  • Tailwind CSS styling
• [✅] Multiple <MapLibre> components in a single MDX. Use a unique <div> containter to show multiple MapLibre maps

Roadmap Features

• [❌] Extend to NPS map components that behave as they are named. Proposed Builder components for Mather & NPMap5
  • <NPMap4 builderID=GUID>
  • <NPMap5 builderID=GUID>
  • <NPMap5Alert builderID=GUID>
  • <NPMap5Live builderID=GUID>