Skip to content

Instantly share code, notes, and snippets.

@planemad
Last active November 25, 2018 10:29
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save planemad/933e2b5a4c7d9f0a26541522a1492f92 to your computer and use it in GitHub Desktop.
Save planemad/933e2b5a4c7d9f0a26541522a1492f92 to your computer and use it in GitHub Desktop.
OpenStreetMap India Mapbox GL Map

Demo of how to create an OpenStreetMap slippy map with custom disputed boundaries with Mapbox GL JS.

Features

  • Completely free and no API key required

How it works

A custom Mapbox GL map style is used to define the basemap and custom boundaries to overlay:

  • Basemap is a raster layer of openStreetMap Mapnik tiles
  • A GeoJSON with the disputed boundary lines for India is added as an additional datasource. The boundaries are sourced from OSM using Overpass API and simplified for minimal filesize.
    • An overlay layer is added of de facto boundary lines disputed by India with a line style to mute the boundaries from the basemap
    • An overlay layer is added of claimed boundary lines by India with a line style matching the boundaries in the basemap

The net effect creates a basemap with national boundaries of India according to local laws. For comparison see the boundaries of Kashmir in North India on the OpenStreetMap website

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title>OpenStreetMap India Mapbox GL Map</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<!-- Mapbox GL JS -->
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.51.0/mapbox-gl.css' rel='stylesheet' />
<style>
html,
body {
height: 100%;
}
#map {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id='map'></div>
<script>
// Initialize GL map
var map = new mapboxgl.Map({
container: 'map',
style: 'https://cdn.jsdelivr.net/gh/osm-in/mapbox-gl-styles@master/osm-mapnik-india-v8.json'
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment