DEV Community

Shinsuke Nakamori for MIERUNE

Posted on

Deploy MBTiles Server in Minutes with FastAPI and Render

Have you ever needed to quickly deploy a tile server for your mapping application?

Setting up a tile server usually means wrestling with:

  • Infrastructure provisioning and configuration
  • Custom API development for tile serving
  • Preparing tile datasets
  • Scaling and performance tuning
  • Deployment pipeline configuration

There are too many things to consider, don't you think?

In this article, I'll show you a simple way to serve a tile server on Render.

Prerequisites

To build a tile server following this article, you only need three things:

  • GitHub account - For accessing the template repository
  • Render.com account - For hosting your tile server (free tier available)
  • MBTiles file(s) - Your tile data ready to serve

That's it! No complex infrastructure setup, no server management experience required.

What are MBTiles?

If you're not familiar with MBTiles, it's a specification for storing tiled map data in a single SQLite database file. Popular tools like QGIS, and Tippecanoe can generate MBTiles from your geospatial data.

For this tutorial, don't worry if you don't have MBTiles files yet - the template includes sample data to get you started.

πŸš€ Basic: Deploy Your First Tile Server

Let's get your tile server up and running in just a few minutes. We'll use the GitHub template that includes sample MBTiles data, so you don't need to prepare anything in advance.

Step 1: Fork the Template

  1. Sign in to GitHub
  2. Create your own repository from template
  3. Create a new repository in your GitHub account Image description

Step 2: Deploy to Render

  1. Sign in to Render
  2. Create a new web service
  3. Connect your newly created GitHub repository Image description Image description Image description
  4. Configure the deployment settings:
    • Build Command: pip install uv && uv sync --frozen
    • Start Command: uv run uvicorn main:app --host 0.0.0.0 --port $PORT Image description
  5. Select Free Plan Image description
  6. Click "Deploy Web Service" Image description

That's it! Render will automatically build and deploy your tile server.

Step 3: Verify Your Server is Running

Once deployment is complete, you'll get a URL like https://your-app-name.onrender.com.
Image description

Let's verify your server is working:

  • Health Check: https://your-app-name.onrender.com/health
    • Should return {"status": "ok"}
  • API Documentation: https://your-app-name.onrender.com/docs
    • Interactive API explorer

If both endpoints are accessible, your tile server is ready to serve maps!

Step 4: Visualize Your Tiles

Now let's see your tiles in action! The template includes a sample HTML file that demonstrates how to use your tile server with MapLibre GL JS.

  1. Go to your GitHub repository or template repository
  2. Download sample.html and open it in a text editor
  3. Replace the TILE_SERVER_URL

        // Replace with your Render app URL (e.g., https://your-app-name.onrender.com)
        const TILE_SERVER_URL = 'https://your-app-name.onrender.com';
    
  4. Save the file and open it in your web browser

    Image description

You should see an interactive map with:

  • Natural Earth raster tiles (beautiful terrain imagery)
  • Japanese medical area polygons (vector data overlay)
  • Layer toggle controls (top-left corner) to show/hide each layer

πŸŽ‰ Congratulations! You now have a working tile server with sample data from Natural Earth and Japanese medical area polygons.

⚑ Advanced: Serve Your Own Data

Ready to take your tile server to the next level? Let's explore how to create and deploy your own tiles using real-world geospatial data.

Step 5: Create MBTiles from Your Data

If you already have geospatial data you'd like to serve as tiles, feel free to use your own datasets. However, if you want to experiment with tile serving using sample data, there are many excellent open data sources available worldwide.

Here are some recommended open data portals:

LINZ Data Service

  • New Zealand's open geospatial data
  • Most datasets available under Creative Commons licenses
  • High-quality, well-maintained datasets

San Francisco Open Data

  • San Francisco's municipal open data
  • Available under PDDL (Public Domain Dedication and License)
  • Rich urban datasets perfect for city-scale applications

data.gov.uk

  • United Kingdom's government open data
  • Available under Open Government Licence
  • Comprehensive coverage of various sectors

Of course, you're not limited to these sources - feel free to explore open data from your own country or region. Just make sure to check the licensing terms to ensure the data can be used for your intended purpose.

For this demonstration, I'll use the Greater Manchester Metrolink Network dataset from data.gov.uk.

While the detailed process of creating MBTiles is beyond the scope of this article, QGIS makes it straightforward to convert various geospatial formats to MBTiles. If you need detailed guidance on this process, modern AI assistants will provide step-by-step instructions.

Step 6: Deploy Custom MBTiles

Now let's deploy your custom MBTiles to your tile server.

Access your repository and navigate to the appropriate directory.

  • For raster tiles: Click the raster directory
  • For vector tiles: Click the vector directory Image description

Upload your MBTiles file and commit the changes.
Image description
Image description

That's it! Render will automatically detect the repository changes and redeploy your application. You can monitor the deployment progress in your Render dashboard.

Once deployment is complete, your custom tiles will be available at:
https://your-app-name.onrender.com/vector/your-filename/{z}/{x}/{y}.pbf

πŸŽ‰ Amazing! Your custom geospatial data is now live and ready to serve tiles to mapping applications worldwide.

Step 7: Test Your Custom Tiles

Now let's verify that your custom tiles are working by viewing them on an interactive map.

Update your sample.html file to use your new custom tiles. In my case, I added the following code to display the Greater Manchester Metrolink data:

        // Add vector tile layer (GM Metrolink)
        map.addSource('metrolink-source', {
            'type': 'vector',
            'tiles': [
                `${TILE_SERVER_URL}/vector/GM_Metrolink/{z}/{x}/{y}.pbf`
            ],
            'attribution': 'Contains Transport for Greater Manchester data. Contains OS data Β© Crown copyright and database right 2017.'
        });

        // Add Metrolink lines layer
        map.addLayer({
            'id': 'metrolink-layer',
            'type': 'line',
            'source': 'metrolink-source',
            'source-layer': 'Metrolink_Lines_Functional',
            'paint': {
                'line-color': 'rgba(0, 0, 255, 0.8)',
                'line-width': 3
            },
            'layout': {
                'visibility': 'visible'
            }
        });

        // Add Metrolink stops layer
        map.addLayer({
            'id': 'metrolink-stops-layer',
            'type': 'circle',
            'source': 'metrolink-source',
            'source-layer': 'Metrolink_Stops_Functional',
            'paint': {
                'circle-color': 'rgba(255, 255, 0, 0.9)',
                'circle-radius': 4,
                'circle-stroke-color': 'rgba(0, 0, 255, 1)',
                'circle-stroke-width': 2
            },
            'layout': {
                'visibility': 'visible'
            }
        });
Enter fullscreen mode Exit fullscreen mode

After making these changes and refreshing your browser, you should see the Manchester Metrolink network displayed on your map!
Image description

Conclusion

In this article, we've covered the complete journey from deploying a basic tile server to serving your own custom geospatial data. Here's what you've accomplished:

βœ… Deployed a production-ready tile server using Render's free tier
βœ… Learned to work with MBTiles format for efficient tile storage
βœ… Created custom tiles from real-world open data sources
βœ… Visualized your data with interactive web maps

This foundation gives you everything needed to build mapping applications, from simple data visualization to complex geospatial analysis tools. The beauty of this approach is its simplicity - no complex infrastructure, no server management, just upload your data and go!

Top comments (0)