On this page

How to automatically change disputed borders according to your map visitors’ location

This page provides a process of how-to change disputed borders on a MapTiler map based on the political view of the country where the visitor is from. There is a JavaScript sample code for the setup, which uses the IP address of the visitor as one of the key components for the whole setup.

Build a map with correct disputed borders

Building a map can be quite sensitive, especially, if you live in a country that has a territorial dispute with another country. Or if you live somewhere else and you want your map to reflect these disputes and provide up-to-date information. MapTiler maps provide such tools with their disputed borders tag functionality and with other added features and code samples.

If you are a developer, who wants to build an online map, based on MapTiler maps, that reflects globally known territorial disputes, and that serves correctly drawn disputed borders according to the policy of the country, where the map visitor is from, feel free to use the following sample code.

Code Sample


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>freegeoip - Example</title>
    <script src="https://unpkg.com/maplibre-gl@{{site.versions.maplibre-gl}}/dist/maplibre-gl.js"></script>
    <link
      href="https://unpkg.com/maplibre-gl@{{site.versions.maplibre-gl}}/dist/maplibre-gl.css"
      rel="stylesheet"
    />
  </head>
  <style>
    body {
      margin: 0;
      padding: 0;
    }
    #map {
      position: absolute;
      top: 0;
      bottom: 0;
      width: 100%;
    }
  </style>
  <body>
    <div id="map"></div>
    <script>
      const YOUR_FREEGEOIP_API_KEY = "";
      const YOUR_MAPTILER_API_KEY = "";
      const geoipURL = `https://api.freegeoip.app/json/?apikey=${YOUR_FREEGEOIP_API_KEY}`;

      const getCountryByIp = async () => {
        const response = await fetch(geoipURL);
        const geoip = await response.json();
        return geoip;
      };

      const showDisputedBorders = (map, country_code) => {
        /*You can uncomment the following line to force a country code to see the map boundaries changes. Use the country code you want to test.*/
        //country_code = "IN";
        const claimed_by_countries = [
          "RU",
          "UA",
          "XN",
          "AM",
          "XK",
          "IN",
          "PK",
          "CN",
          "NP",
          "BT",
          "TR",
          "SY",
          "PS",
          "IL",
          "SY",
          "ET",
          "EH",
          "SD",
          "SS",
          "KE",
        ];
        if (!claimed_by_countries.includes(country_code)) {
          //if the country code is not in the list of disputed ones, do nothing and return
          return;
        }
        if (map.getLayer("admin_disputed")) {
          //for styles based on the basic style
          const admin_disputed = map.getLayer("admin_disputed");
          map.setFilter("admin_disputed", [
            ...admin_disputed.filter,
            ["==", "claimed_by", country_code],
          ]);
        } else if (map.getLayer("boundary_2_z5_disputed")) {
          //for styles based on the streets style
          const boundary_disputed = map.getLayer("boundary_2_z5_disputed");
          const boundary_disputed_maritime = map.getLayer(
            "boundary_2_z5_disputed_maritime",
          );
          map.setFilter("boundary_2_z5_disputed", [
            ...boundary_disputed.filter,
            ["==", "claimed_by", country_code],
          ]);
          map.setFilter("boundary_2_z5_disputed_maritime", [
            ...boundary_disputed_maritime.filter,
            ["==", "claimed_by", country_code],
          ]);
        }
      };

      const map = new maplibregl.Map({
        container: "map", // container id
        style: `https://api.maptiler.com/maps/{{site.map-styles.streets}}/style.json?key=${YOUR_MAPTILER_API_KEY}`, // style URL
        center: [75.503, 33.629], // starting position [lng, lat]
        zoom: 6, // starting zoom
      });

      map.on("load", () => {
        getCountryByIp()
          .then((geoip) => {
            const { country_code } = geoip;
            // Do something with the country code
            showDisputedBorders(map, country_code);
          })
          .catch((err) => {
            console.log(err);
          });
      });
    </script>
  </body>
</html>

Conclusion

Dealing with disputed borders is a sensitive topic that is ever-present. As countries and national states evolve, grow, shrink, fade away or wage wars against each other, their country borders change as well. MapTiler strives to develop comprehensive tools to empower its users and developers to provide up-to-date maps with advanced automated functionalities, such as the auto-adjustment of disputed borders based on visitors’ location (IP based) and their country’s national policy.

Next steps

Continue to Creating a custom vector dataset (GeoJSON) for a step-by-step guide on creating a custom dataset with specific information to be saved in GeoJSON format.

Useful links

MapTiler Maps
MapTiler API
Disputed borders on your maps
List of disputed borders and their tags
How to display disputed borders according to the official national policy
How to build a map for users in a specific country
MapTiler Planet updates explained