Forem: Shinsuke Nakamori

Wait, Are You Still Using Vanilla QGIS?

Shinsuke Nakamori — Wed, 13 Aug 2025 09:20:34 +0000

Yes, the title is a bit provocative—but if you clicked on this, chances are you’re already a regular QGIS user.

So, go ahead. Fire up the QGIS you use every day.

You probably see something like this:

Now, let me ask you one thing:

"Are you really satisfied with how it looks?"

If the answer is “not really,” by the end of this article you’ll be able to customize QGIS’s appearance into something like this:

How to Change QGIS’s Look

Many of you probably already know that QGIS’s GUI is built using Qt.

If you’ve ever created a QGIS plugin in PyQGIS, you’ve probably written imports like:

from PyQt5.QtWidgets import QDialog

So it’s only natural to think:

“If QGIS uses Qt, couldn’t I just tweak its GUI using Qt features?”

Let’s try it.
Open QGIS’s Python console and bring up the editor:

Now, enter this code and hit the ▶ run button:

iface.mainWindow().setStyleSheet("background-color: #333; color: #32cd32;")

Oh, Whole new vibe.

Since QGIS’s mainWindow is a Qt widget, you can forcibly apply styles using setStyleSheet.

Once you understand that, you know what comes next:

“Let’s go wild with StyleSheets and make QGIS truly our own.”

So I Made It a QGIS Plugin

At first, I was just playing around with StyleSheets. But as the number of tweaks grew—and as I thought it might be fun to let you customize QGIS too—I turned it into a plugin.

https://plugins.qgis.org/plugins/QGISDresser/#plugin-about

Installation

Installation is just like any other QGIS plugin. Search for “Dresser” and you should find it right away.

Usage

You can launch it only from the Plugins menu.
I intentionally avoided adding a toolbar button so it wouldn’t clutter your GIS workflow.

The dialog is kept as simple as possible—there’s not much to configure.

Use preset
→ Choose from pre-registered presets.

Use image
→ Use your own image as the background. You can also pick text color (black or white) so it stays readable.

In either case, once you set a background and click OK, QGIS’s appearance changes instantly.

It’s so straightforward that you’ll get the hang of it almost instantly.

Creating Background Images

If you want to use your own image as a background, there’s a little trick to it.

Right now, QGISDresser stretches the image to fill the entire QGIS window size.
So, if you want something like your favorite character appearing in the layer panel area, you’ll need to prepare an image with enough empty space for proper positioning.

It’s easier to show than to tell:

Take a screenshot of your QGIS window and paste it into PowerPoint.
Place your character image where you want it to appear.
Create a rectangle the same size as the QGIS screenshot and fill it with your desired background color.
Select both the character and rectangle, right-click, and choose “Save as Picture.”
Load that image into QGISDresser—and done!

Editing Presets

Here’s a secret: the presets in QGISDresser are editable.

Just open the QGISDresser installation folder, go into preset/, and you’ll find a list.yml file that defines the presets:

styles:
  - name: "simple-blue-white"
    char-color: "white"
    treeview-color: "rgba(128, 128, 128, 0.6)"
    main-color: "#0000FF"
    main-image: "transparent"
    main-position: "right"
    btn-color: "white"
    btn-image: "transparent"
    btn-position: "top"

You can set parameters like:

name → Display name in the preset list
char-color → Text color (not limited to black/white)
treeview-color → Layer panel background (use some transparency so the background shows)
main-color → Main background color
main-image → Main background image
main-position → Alignment of the main background image
btn-color → Button background color
btn-image → Button background image
btn-position → Alignment of the button background image

To add a custom preset:

Put your image in the images/ folder.
Add a new entry to list.yml.

Example:

  - name: "Sample"
    char-color: "black"
    treeview-color: "rgba(200, 200, 200, 0.6)"
    main-color: "transparent"
    main-image: "sample.png"
    main-position: "center"
    btn-color: "transparent"
    btn-image: "transparent"
    btn-position: "top"

Conclusion

I released this plugin mainly because I thought it would be fun.
It probably still has plenty of bugs, so if you notice anything or have feature requests, please open an issue here:

https://github.com/nakamori1024/QGISDresserPlugin

Deploy MBTiles Server in Minutes with FastAPI and Render

Shinsuke Nakamori — Sun, 29 Jun 2025 14:50:09 +0000

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
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"}
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';

Save the file and open it in your web browser

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

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!

A Guide to Building a Map Application with Svelte

Shinsuke Nakamori — Wed, 26 Feb 2025 04:10:11 +0000

Have you ever wanted to build a map application but found the setup process overwhelming? With Svelte MapLibre GL, you can create a highly interactive and reactive map application with ease.

This guide will take you step by step through the development process. To keep things beginner-friendly, we'll start by setting up a new Svelte project. If you're already comfortable with that part, feel free to jump ahead!

Setting Up the Project

First, set up a Svelte project using the following command:

npx sv create .

There are no specific requirements for the project setup, but for this guide, I'll use the following configuration. Feel free to use it as a reference.

Installing Svelte MapLibre GL

You can install Svelte MapLibre GL with the following command:

npm install --save-dev svelte-maplibre-gl

Adding a Basic Map

Now, let's add a map. Replace the content of src/routes/+page.svelte with the following code.

<script lang="ts">
    import { MapLibre, NavigationControl, ScaleControl, GlobeControl } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />
</MapLibre>

Build the Svelte application with the following command.

npm run dev

If everything is set up correctly, you should see a map like the one below.

That's all it takes to add a map. Easy, right?

Adding Markers to the Map

Now that we've added a map, let's have some fun by adding markers wherever you like! As an example, we'll place a marker at Sapporo Station in Japan.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker lnglat={[141.350714, 43.068564]} />
</MapLibre>

Getting a feel for reactivity

According to the author, the main advantage of this map library is its reactivity. To get a feel for it, let's update the previous code as follows.

<script lang="ts">
    import {
        MapLibre,
        Marker,
        NavigationControl,
        ScaleControl,
        GlobeControl
    } from 'svelte-maplibre-gl';

    let lnglat: [number, number] = [141.350714, 43.068564];
</script>

<MapLibre
    class="h-[55vh] min-h-[300px]"
    style="https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json"
    zoom={3.5}
    center={{ lng: 137, lat: 36 }}
>
    <NavigationControl />
    <ScaleControl />
    <GlobeControl />

    <Marker bind:lnglat draggable />
</MapLibre>

<p>
    Longitude:
    <input type="number" bind:value={lnglat[0]} />
</p>
<p>
    Latitude:
    <input type="number" bind:value={lnglat[1]} />
</p>

Try moving the marker or changing the value in the text box. You'll see how Svelte and MapLibre interact with each other in real time.

Exciting, isn't it? If you find it interesting, be sure to give it a try!

You can find this demo in the following repository. Check it out for reference!
https://github.com/nakamori1024/svelte-maplibre-demo

Next Steps

If you're interested, try exploring the following next steps:

Adding features (Coming Soon)
Deploying with AWS Amplify (Coming Soon)

Forem: Shinsuke Nakamori

Wait, Are You Still Using *Vanilla* QGIS?

How to Change QGIS’s Look

So I Made It a QGIS Plugin

Installation

Usage

Creating Background Images

Editing Presets

Conclusion

Deploy MBTiles Server in Minutes with FastAPI and Render

Prerequisites

What are MBTiles?

🚀 Basic: Deploy Your First Tile Server

Step 1: Fork the Template

Step 2: Deploy to Render

Step 3: Verify Your Server is Running

Step 4: Visualize Your Tiles

⚡ Advanced: Serve Your Own Data

Step 5: Create MBTiles from Your Data

Step 6: Deploy Custom MBTiles

Step 7: Test Your Custom Tiles

Conclusion

A Guide to Building a Map Application with Svelte

Setting Up the Project

Installing Svelte MapLibre GL

Adding a Basic Map

Adding Markers to the Map

Getting a feel for reactivity

Next Steps

Wait, Are You Still Using Vanilla QGIS?