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
- Sign in to GitHub
- Create your own repository from template
- Create a new repository in your GitHub account
Step 2: Deploy to Render
- Sign in to Render
- Create a new web service
- Connect your newly created GitHub repository
- 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
-
Build Command:
- Select Free Plan
- Click "Deploy Web Service"
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
.
Let's verify your server is working:
-
Health Check:
https://your-app-name.onrender.com/health
- Should return
{"status": "ok"}
- Should return
-
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.
- Go to your GitHub repository or template repository
- Download
sample.html
and open it in a text editor -
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';
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:
- New Zealand's open geospatial data
- Most datasets available under Creative Commons licenses
- High-quality, well-maintained datasets
- San Francisco's municipal open data
- Available under PDDL (Public Domain Dedication and License)
- Rich urban datasets perfect for city-scale applications
- 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
Upload your MBTiles file and commit the changes.
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'
}
});
After making these changes and refreshing your browser, you should see the Manchester Metrolink network displayed on your map!
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)