India's borders, drawn correctly on any web map.

Install the package

npm install bharatmap

Call fixMap after you create the map

It fixes the style you have now and every later setStyle, so switching between light and dark keeps working.

import maplibregl from "maplibre-gl";
import { fixMap } from "bharatmap";

const map = new maplibregl.Map({ container: "map", style: STYLE_URL, center: [78, 22], zoom: 4 });
await fixMap(maplibregl, map);

If you would rather fix the style before the map exists, use install(maplibregl) once, then await fixStyle(STYLE_URL) and pass the result as style.

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.

Nothing to install

Add the script after MapLibre. It puts a BharatMap object on the page.

Fix the style, then make the map

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/bharatmap.iife.js"></script>
<script>
  BharatMap.install(maplibregl);
  BharatMap.fixStyle("https://basemaps.cartocdn.com/gl/positron-gl-style/style.json").then((style) => {
    new maplibregl.Map({ container: "map", style, center: [78, 22], zoom: 4 });
  });
</script>

This is how the map at the top of this page is built.

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.

Install the packages

Leaflet draws vector basemaps through maplibre-gl-leaflet, which needs MapLibre. bharatmap fixes the MapLibre style.

npm install bharatmap maplibre-gl

Fix the style, then hand it to Leaflet

import maplibregl from "maplibre-gl";
import { install, fixStyle } from "bharatmap";

install(maplibregl);
const style = await fixStyle("https://basemaps.cartocdn.com/gl/positron-gl-style/style.json");
L.maplibreGL({ style }).addTo(map);

If your Leaflet map uses plain L.tileLayer("...png") tiles, bharatmap cannot cut the border. See the table below for what you can do.

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.

Install the packages

npm install bharatmap ol ol-mapbox-style

Fix the style and set the tile loader

OpenLayers has its own tile loading, so you turn off the MapLibre protocol and give each vector tile source bharatmap's loader.

import { fixStyle, olTileLoadFunction } from "bharatmap";
import { apply } from "ol-mapbox-style";
import VectorTileSource from "ol/source/VectorTile";

await apply(map, await fixStyle(STYLE_URL, { protocol: false }));
map.getAllLayers().forEach((layer) => {
  const source = layer.getSource && layer.getSource();
  if (source instanceof VectorTileSource) {
    source.setTileLoadFunction(olTileLoadFunction);
    source.refresh();
  }
});

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.

Install the package

npm install bharatmap

Fix the basemap style, not deck.gl

deck.gl, react-map-gl and the Vue and Angular wrappers draw their basemap with MapLibre, so you fix the style you pass in. This is the same engine as the MapLibre tab, but it has not been tested separately for each wrapper.

import maplibregl from "maplibre-gl";
import { install, fixStyle } from "bharatmap";

install(maplibregl);                       // once, at startup
const style = await fixStyle(STYLE_URL);   // pass this as the basemap style

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.

Host the corrected tiles

Mapbox GL JS, Tangram and QGIS cannot change tile requests the way MapLibre can, so you run a small tile proxy that returns tiles with the disputed lines already cut out. This one is a Cloudflare Worker, and the same handler runs on Deno, Bun and Node 18 and later.

import { tileProxy } from "bharatmap";

export default {
  fetch: tileProxy("https://tiles.example.com/planet/{z}/{x}/{y}.pbf"),
};

Point your map at it and add the lines

The proxy serves /{z}/{x}/{y}.pbf. Use that as the tile source. India's boundary itself is in boundary, a GeoJSON FeatureCollection you can add to any map as a line layer.

On Mapbox's own styles, check their worldview setting first. It is meant for this and may already do what you need.

Check that it worked

• Open the map in light and dark if you support both, and look at these views.
• Whole India (zoom 2 to 3): one line around India, with no extra dashed lines over Ladakh or Kashmir.
• Arunachal Pradesh (zoom 5 to 7): one continuous border, and the Myanmar and Bhutan borders still drawn.
• Where the line meets Himachal Pradesh and Bhutan (zoom 9 to 12): no gaps and no doubled lines.
• Credits: the border data attribution shows in the map's corner.