To style only one country on a Mapbox map, you need to follow these steps:

Karol Munoz

3 min readJun 19, 2024

Set up your Mapbox environment:

Create an HTML file.
Include the Mapbox GL JS library.
Initialize the map with your Mapbox access token.

2. Add a GeoJSON source for countries:

Use a GeoJSON file containing the country’s boundaries.
Add the GeoJSON data as a source in the Mapbox map.

3. Create a layer to style the specific country:

Use the fill layer to style the country.
Use a filter to target the specific country by its properties (e.g., name or ISO code).

Here’s a step-by-step guide with the complete code:

Step-by-Step Guide

Set up your Mapbox environment

First, create an HTML file and include the Mapbox GL JS library:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Style One Country on Mapbox</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        // Add your Mapbox access token here
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        // Initialize the map
        const map = new mapboxgl.Map({
            container: 'map', // container ID
            style: 'mapbox://styles/mapbox/streets-v11', // style URL
            center: [0, 0], // starting position [lng, lat]
            zoom: 2 // starting zoom
        });
    </script>
</body>
</html>

Add a GeoJSON source for countries

You will need a GeoJSON file that contains the boundaries of the countries. For demonstration purposes, let’s assume you have a GeoJSON file countries.geojson which includes a property ISO_A3 that holds the ISO code of the countries.

Add the GeoJSON source and create a layer to style the specific country

Modify the <script> section of your HTML file:

<script>
    map.on('load', () => {
        // Add GeoJSON source
        map.addSource('countries', {
            'type': 'geojson',
            'data': 'path/to/your/countries.geojson' // Replace with the path to your GeoJSON file
        });

        // Add a layer to style the specific country (e.g., United States with ISO code 'USA')
        map.addLayer({
            'id': 'highlighted-country',
            'type': 'fill',
            'source': 'countries',
            'paint': {
                'fill-color': '#f08', // Color of the country
                'fill-opacity': 0.5 // Opacity of the color
            },
            'filter': ['==', 'ISO_A3', 'USA'] // Replace 'USA' with the ISO code of the country you want to highlight
        });        // Optional: Add a border to the country
        map.addLayer({
            'id': 'country-borders',
            'type': 'line',
            'source': 'countries',
            'paint': {
                'line-color': '#f08',
                'line-width': 2
            },
            'filter': ['==', 'ISO_A3', 'USA'] // Replace 'USA' with the ISO code of the country you want to highlight
        });
    });
</script>

Full HTML Code

Here’s the full code with all the steps integrated:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>Style One Country on Mapbox</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
    <script src="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.js"></script>
    <link href="https://api.mapbox.com/mapbox-gl-js/v2.9.1/mapbox-gl.css" rel="stylesheet" />
    <style>
        body { margin: 0; padding: 0; }
        #map { position: absolute; top: 0; bottom: 0; width: 100%; }
    </style>
</head>
<body>
    <div id="map"></div>
    <script>
        mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';

        const map = new mapboxgl.Map({
            container: 'map',
            style: 'mapbox://styles/mapbox/streets-v11',
            center: [0, 0],
            zoom: 2
        });        map.on('load', () => {
            map.addSource('countries', {
                'type': 'geojson',
                'data': 'path/to/your/countries.geojson' // Replace with the path to your GeoJSON file
            });            map.addLayer({
                'id': 'highlighted-country',
                'type': 'fill',
                'source': 'countries',
                'paint': {
                    'fill-color': '#f08',
                    'fill-opacity': 0.5
                },
                'filter': ['==', 'ISO_A3', 'USA'] // Replace 'USA' with the ISO code of the country you want to highlight
            });            map.addLayer({
                'id': 'country-borders',
                'type': 'line',
                'source': 'countries',
                'paint': {
                    'line-color': '#f08',
                    'line-width': 2
                },
                'filter': ['==', 'ISO_A3', 'USA'] // Replace 'USA' with the ISO code of the country you want to highlight
            });
        });
    </script>
</body>
</html>

Summary

This guide helps you style a specific country on a Mapbox map by:

Setting up the Mapbox environment.
Adding a GeoJSON source containing country boundaries.
Creating layers with filters to style the specific country.

Replace 'USA' and the path to your GeoJSON file with the appropriate values for your use case.

To style only one country on a Mapbox map, you need to follow these steps:

Step-by-Step Guide

Full HTML Code

Summary

Written by Karol Munoz