Recipes

Copy the shortest path for your stack

Each focused recipe links to the guide that explains its contract. For complete runnable applications, use the public demos repository.

GitHub demos Quickstart

React

Render a named map

Use this after completing the React + Vite quickstart.

MadridMap.tsx

import { Map } from "@tileflow/react";
import "maplibre-gl/dist/maplibre-gl.css";
 
export function MadridMap() {
  return (
    <Map
      map="madrid"
      center={[-3.7038, 40.4168]}
      zoom={12}
      height={420}
      mapOptions={{
        cooperativeGestures: true,
        maxZoom: 18,
      }}
    />
  );
}

Vue

Use the shared named-map runtime

Install @tileflow/vue instead of the React runtime and keep the same Vite adapter and manifest contract.

MadridMap.vue

<script setup lang="ts">
import { TileflowMap } from "@tileflow/vue";
import "maplibre-gl/dist/maplibre-gl.css";
</script>
 
<template>
  <TileflowMap
    map="madrid"
    :center="[-3.7038, 40.4168]"
    :zoom="12"
    :map-options="{
      cooperativeGestures: true,
      maxZoom: 18,
    }"
  />
</template>

Svelte

Render the same map name from Svelte

Install @tileflow/svelte, retain the Vite adapter, and import MapLibre CSS once in the app.

MadridMap.svelte

<script lang="ts">
  import { TileflowMap } from "@tileflow/svelte";
  import "maplibre-gl/dist/maplibre-gl.css";
</script>
 
<TileflowMap
  map="madrid"
  center={[-3.7038, 40.4168]}
  zoom={12}
  mapOptions={{
    cooperativeGestures: true,
    maxZoom: 18,
  }}
/>

Next.js

Wrap the config and add the local route

withTileflow writes static production assets. The App Router handler serves fresh config-backed assets during next dev.

next.config.ts

import type { NextConfig } from "next";
import { withTileflow } from "@tileflow/next";
 
const nextConfig: NextConfig = {};
 
export default withTileflow(nextConfig);

app/api/tileflow/[[...tileflow]]/route.ts

import { createTileflowRouteHandlers } from "@tileflow/next/server";
 
export const runtime = "nodejs";
export const dynamic = "force-dynamic";
 
export const { GET, HEAD } = createTileflowRouteHandlers({
  routeBase: "/api/tileflow",
});

Webpack

Serve and emit Tileflow assets

The plugin serves fresh local styles through webpack-dev-server and emits the manifest and style files during production builds.

webpack.config.ts

import { TileflowWebpackPlugin } from "@tileflow/webpack";
 
export default {
  plugins: [new TileflowWebpackPlugin()],
  devServer: {
    historyApiFallback: true,
  },
};

MapLibre

Load a deployed style directly

Use the stable style URL when the app already owns the MapLibre lifecycle. See How it works for the delivery model.

map.ts

import maplibregl from "maplibre-gl";
import "maplibre-gl/dist/maplibre-gl.css";
 
new maplibregl.Map({
  container: "map",
  style: "https://api.tileflow.dev/maps/map_1234567890abcdef/style.json",
  center: [-3.7038, 40.4168],
  zoom: 12,
});

Static maps

Create an image from a trusted server route

Keep TILEFLOW_API_KEY on the server. The Static maps guide covers scenes, overlays, cache behavior, and limits.

app/api/maps/static/route.ts

import { createStaticMap, marker } from "@tileflow/static";
 
export async function POST() {
  const result = await createStaticMap(
    {
      map: "madrid",
      camera: {
        type: "center",
        center: [-3.7038, 40.4168],
        zoom: 12,
      },
      size: { width: 1200, height: 800 },
      overlays: [marker({ coordinate: [-3.7038, 40.4168] })],
    },
    {
      apiKey: process.env.TILEFLOW_API_KEY,
    },
  );
 
  return Response.json(result);
}

Tilesets

Register, upload, inspect, then deploy

Register the project-owned tileset before uploading its PMTiles archive. See Tilesets for ownership, limits, and status checks.

Terminal

export TILEFLOW_API_KEY=tf_live_...
tileflow tileset register --id madrid --name Madrid
tileflow tileset upload ./madrid.pmtiles --id madrid
tileflow status
tileflow deploy --tileset madrid

Deploy

Validate before publishing

Deploy writes the local production manifest containing stable hosted style URLs. See Deploy for CI, access, and manifest behavior.

Terminal

export TILEFLOW_API_KEY=tf_live_...
tileflow validate
tileflow deploy