Geospatial Tile-API Integration Examples (Leaflet / Mapbox GL / MapLibre)
Overview
A set of three minimal, self-contained example apps showing how to consume a geospatial satellite-tile API (Highsight) from the most common web mapping libraries: Leaflet, Mapbox GL JS, and MapLibre GL. Each is a Vite project that wires the same XYZ tile endpoint into a different renderer.
Why It Exists
Developers adopting a tile/imagery API need copy-pasteable, library-specific starting points. Rather than one framework-coupled demo, this provides parallel, idiomatic examples per mapping stack so a consumer can drop the Highsight tile source into whichever library they already use.
What We Built
Three sibling Vite apps, leaflet/, mapbox/, and maplibre/, each pulling raster tiles from https://api.highsight.dev/v1/tiles/{z}/{x}/{y} with an API key supplied via environment variables. The MapLibre example, for instance, defines a satellite-tiles raster source (256px tiles, zoom 3–9) and renders it through a style-spec v8 configuration. Each project is a clean index.html + src/main.js setup with .env.example templates, keeping the integration surface obvious and minimal.
Technologies & Approach
Plain JavaScript with Vite for fast dev/build, and three rendering libraries (Leaflet, Mapbox GL JS, MapLibre GL) consuming the same XYZ raster tile contract. Environment-based API keys keep credentials out of source while staying easy to run.
Outcome / Impact
Provides ready-to-run reference integrations that lower the barrier to adopting the Highsight tile API across the dominant web mapping ecosystems, demonstrating the studio’s fluency in geospatial frontends and developer-experience artifacts.
Capabilities Demonstrated
- Geospatial mapping SDK integration across Leaflet, Mapbox GL, and MapLibre
- Raster (XYZ) tile-source configuration and styling
- Clean, reproducible example/reference apps with env-based config