This article provides a process of how-to change disputed borders on a MapTiler Cloud 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 Cloud 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 Cloud 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"> 3<head>
<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@2.1.9/dist/maplibre-gl.js"></script>
<link href="https://unpkg.com/maplibre-gl@2.1.9/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/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.
Useful links
MapTiler Maps
MapTiler Cloud 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
Comments
0 comments
Please sign in to leave a comment.